added custom dropdown feature and handled heading sections

dist/assets/a-doc-editor.css

@@ -84,6 +84,7 @@ canvas:focus-visible {
     opacity: 1;
     pointer-events: auto;
     z-index: 10;
+    animation: shineAnimation 1s infinite alternate;
 }
 
 .toolbar .item:hover {
@@ -120,16 +121,14 @@ canvas:focus-visible {
     overflow-y: hidden;
 }
 
-.content-area .left-sidebar {
-    width: 200px;
-    background-color: #408640;
-    padding: 5px;
-}
-
+.content-area .left-sidebar,
 .content-area .right-sidebar {
+    max-width: 200px;
     width: 200px;
-    background-color: #f5c468;
+    background-color: #408640;
     padding: 5px;
+    white-space: nowrap; /* Prevent text wrapping */
+    text-overflow: ellipsis; /* Add ellipsis ( ... ) */
 }
 
 .content-area .left-sidebar,
@@ -138,7 +137,7 @@ canvas:focus-visible {
     flex-shrink: 0;
     height: 100%;
     overflow-x: hidden;
-    overflow-y: auto;
+    overflow-y: hidden;
     text-wrap: nowrap;
     transition: 0.5s;
     margin-top: 0;
@@ -156,8 +155,6 @@ canvas:focus-visible {
 .left-sidebar .content,
 .right-sidebar .content {
     opacity: 1;
-    position: relative;
-    left: 0%;
     transition: 0.5s;
 }
 
@@ -179,6 +176,7 @@ canvas:focus-visible {
     background: #858585;
     gap: 20px;
     align-items: center;
+    overflow-x: hidden;
 }
 
 .page-list canvas {
@@ -198,31 +196,49 @@ canvas:focus-visible {
     width: 100%;
     background-color: red;
 }
+.toolbar .item ul.dropdown {
+    position: absolute;
+    max-height: 300px;
+    width: max-content;
+    min-width: 100px;
+    padding: 0;
+    border: 1px #000 solid;
+    overflow-y: auto;
+    overflow-x: hidden;
+    list-style-type: none;
+    z-index: 2;
+    display: none;
+    background: white;
+}
+.toolbar .item ul.dropdown.show
+{
+    display: block;
+}
+.toolbar .item ul.dropdown li{
+    padding: 5pt;
+    width: 100%;
+}
+
+.toolbar .item ul.dropdown li:hover,
+.toolbar .item ul.dropdown li.selected {
+    background: #09f;
+}
+
+li.init {
+    cursor: pointer;
+}
+
+a#submit {
+    z-index: 1;
+}
+
 
 @keyframes shineAnimation {
     0% {
         background: #fff;
     }
 
-    50% {
-        background: #ddd;
-    }
-
     100% {
-        background: #fff;
+        background: #eee;
     }
-}
-
-*::-webkit-scrollbar {
-    background: transparent;
-}
-
-*::-webkit-scrollbar-track {
-    background-color: #00000022;
-    border-radius: 5px;
-}
-
-*::-webkit-scrollbar-thumb {
-    background: #7dbbb3;
-    border-radius: 5px;
 }
\ No newline at end of file