sidebars display completed

dist/assets/a-doc-editor.css

 .a-doc-editor {
     display: flex;
     flex-direction: column;
-    height: 590px;
+    height: 520px;
 }
 
 .a-doc-editor canvas:focus-visible {
     /* outline: auto rgb(0, 68, 255, 50%); */
+    background: #fff;
 }
 
 
@@ -23,20 +24,45 @@
     flex: 1;
     position: relative;
     background-color: #ccc;
+    overflow: hidden;
+    transition: 300ms;
 }
 
 .a-doc-editor .body .left-sidebar {
     position: absolute;
+    padding: 8px;
     height: 100%;
+    width: 17%;
     left: 0;
-    background-color: #be3737;
+    background-color: #8a9a9b;
+    border-radius: 0 10px 10px 0;
+    transition: 300ms;
+}
+
+.a-doc-editor .body .left-sidebar.hide {
+    left: -16%;
+    transition: 300ms;
+}
+
+.a-doc-editor .body .toggle-sidebar {
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
 }
 
 .a-doc-editor .body .right-sidebar {
     position: absolute;
     height: 100%;
     right: 0;
-    background-color: #8abe37;
+    width: 17%;
+    background-color: #969b8a;
+    border-radius: 10px 0 0 10px;
+    transition: 300ms;
+}
+
+.a-doc-editor .body .right-sidebar.hide {
+    right: -14%;
+    transition: 300ms;
 }
 
 .a-doc-editor .body .scrolling-area {
@@ -59,3 +85,24 @@
 .a-doc-editor .body .scrolling-area canvas.page:first-child {
     margin-top: 10px;
 }
+
+.a-doc-editor ::-webkit-scrollbar {
+    width: 10px;
+    /* Set the width of the scrollbar */
+}
+
+/* Thumb */
+.a-doc-editor ::-webkit-scrollbar-thumb {
+    background-color: #888;
+    /* Set the color of the scrollbar thumb */
+    border-radius: 5px;
+    /* Set border radius */
+}
+
+/* Track */
+.a-doc-editor ::-webkit-scrollbar-track {
+    background-color: #f0f0f0;
+    /* Set the color of the scrollbar track */
+    border-radius: 5px;
+    /* Set border radius */
+}
\ No newline at end of file

dist/assets/a-doc-editor.js

@@ -76,22 +76,31 @@ var ADocEditor = function (customConfig) {
         let leftSidebarId = `left-sidebar-${new Date().getTime()}`
         let rightSidebarId = `right-sidebar-${new Date().getTime()}`
         let htmlSetup = /*html*/`
-        <div class="a-doc-editor" id="${mainComponentId}">
+<div class="a-doc-editor" id="${mainComponentId}">
     <div class="header" id="${headerComponentId}">
-            <div>Menu bar</div>
+        <div class="menu-bar">Menu bar</div>
         <div>Formating tools</div>
         <div>Page tools</div>
     </div>
     <div class="body">
-            <div class="scrolling-area" id="${scrollingAreaId}">
+        <div class="scrolling-area" id="${scrollingAreaId}"></div>
+        <div class="left-sidebar hide" id="${leftSidebarId}">
+            <div class="toggle-sidebar">
+                <span>Summary</span>
+                <span>X</span>
+            </div>
+        </div>
+        <div class="right-sidebar hide" id="${rightSidebarId}">
+            <div class="toggle-sidebar">
+                <span>X</span>
+                <span>Comments</span>
+            </div>
         </div>
-            <div class="left-sidebar" id="${leftSidebarId}">Left</div>
-            <div class="right-sidebar" id="${rightSidebarId}">Right</div>
     </div>
     <div class="footer" id="${footerComponentId}">
         <div>Footer Data</div>
     </div>
-        </div>
+</div>
         `
         container.innerHTML = htmlSetup
         mainComponent = document.getElementById(mainComponentId)
@@ -100,6 +109,12 @@ var ADocEditor = function (customConfig) {
         footerComponent = document.getElementById(footerComponentId)
         leftSidebar = document.getElementById(leftSidebarId)
         rightSidebar = document.getElementById(rightSidebarId)
+        mainComponent.getElementsByClassName('toggle-sidebar')[0].addEventListener('click',(e)=>{
+            leftSidebar.classList.toggle('hide')
+        })
+        mainComponent.getElementsByClassName('toggle-sidebar')[1].addEventListener('click',(e)=>{
+            rightSidebar.classList.toggle('hide')
+        })
 
 
 

dist/index.html

@@ -11,9 +11,13 @@
         body {
             background: #aaa;
         }
+        #user-container-for-editor{
+            margin: 20px;
+        }
     </style>
 </head>
 <body>
+    <div class="body"></div>
     <p>Click on the canvas and start typing</p>
     <div id="user-container-for-editor"></div>