some feature added for headers

dist/assets/a-doc-editor.css

@@ -12,7 +12,8 @@
 hidden {
     display: none;
 }
-canvas:focus-visible{
+
+canvas:focus-visible {
     outline: unset;
 }
 
@@ -38,7 +39,7 @@ canvas:focus-visible{
     background-color: goldenrod;
 }
 
-.toolbar [adc-type="menu-item"]:hover [adc-type="menu-options"] {
+.toolbar [adc-type="menu-item"].hover [adc-type="menu-options"] {
     opacity: 1;
     z-index: 10;
     pointer-events: auto;
@@ -57,7 +58,7 @@ canvas:focus-visible{
 
 .toolbar .item {
     position: relative;
-    background: #408640;
+    background: white;
     border: 1px solid gray;
     border-radius: 3px;
     padding-top: 2px;
@@ -71,10 +72,12 @@ canvas:focus-visible{
 .popover {
     position: absolute;
     padding: 5px;
-    background-color: gray;
+    background-color: #fff;
     border: 1px solid purple;
     opacity: 0;
     pointer-events: none;
+    text-align: center;
+    box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.4);
 }
 
 .popover.show {
@@ -84,7 +87,8 @@ canvas:focus-visible{
 }
 
 .toolbar .item:hover {
-    background: #5fad5f;
+    background: white;
+    animation: shineAnimation 1s infinite alternate;
 }
 
 [adc-type="popover"] {
@@ -110,6 +114,59 @@ canvas:focus-visible{
     background-color: #f5c468;
 }
 
+.content-area {
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+.content-area .left-sidebar{
+    width: 200px;
+    background-color:#408640;
+    padding: 5px;
+}
+
+.content-area .right-sidebar{
+    width: 200px;
+    background-color: #f5c468;
+    padding: 5px;
+}
+.content-area .left-sidebar,
+.content-area .page-list,
+.content-area .right-sidebar{
+    flex-shrink: 0;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    text-wrap: nowrap;
+    transition: 0.5s;
+    margin-top: 0;
+}
+
+.left-sidebar .toggle-btn,
+.right-sidebar .toggle-btn{
+    display: block;
+    position: static;
+    top: 0;
+    width: 100%;
+    text-align: center;
+}
+.left-sidebar .content,
+.right-sidebar .content{
+    opacity: 1;
+    position: relative;
+    left: 0%;
+    transition: 0.5s;
+}
+
+.left-sidebar.hide,
+.right-sidebar.hide{
+    width: 50px;    
+}
+
+.left-sidebar.hide .content,
+.right-sidebar.hide .content{
+    opacity: 0;
+}
 .page-list {
     position: relative;
     display: block;
@@ -126,7 +183,8 @@ canvas:focus-visible{
     height: auto;
     display: block;
     position: relative;
-    margin: 20px;
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
 
 .footer {
@@ -135,3 +193,15 @@ canvas:focus-visible{
     width: 100%;
     background-color: red;
 }
+
+@keyframes shineAnimation {
+    0% {
+        background: #fff;
+    }
+    50% {
+        background: #ddd;
+    }
+    100% {
+        background: #fff;
+    }
+}
\ No newline at end of file