refactor sidebar dom structure

apps/app/src/components/Layout/BasicLayout.tsx

@@ -37,9 +37,11 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
       <DndProvider backend={HTML5Backend}>
 
         <div className="page-wrapper flex-row">
-          <Sidebar />
+          <div className="z-2">
+            <Sidebar />
+          </div>
 
-          <div className="d-flex flex-grow-1 flex-column">{/* neccessary for nested {children} make expanded */}
+          <div className="d-flex flex-grow-1 flex-column z-1">{/* neccessary for nested {children} make expanded */}
             <AlertSiteUrlUndefined />
             {children}
           </div>

apps/app/src/components/Sidebar/ResizableArea/ResizableArea.module.scss

@@ -17,28 +17,26 @@
   top: 0px;
   bottom: 0px;
   left: 100%;
-  z-index: 10; // greater than the value of SimpleBar
-  width: 0;
 
   .grw-navigation-draggable-hitarea {
-    position: relative;
+    position: absolute;
     left: -4px;
     width: 24px;
     height: 100%;
     cursor: ew-resize;
-    .grw-navigation-draggable-hitarea-child {
-      position: absolute;
-      left: 3px;
-      display: none;
-      width: 2px;
-      height: 100%;
-      background-color: rgb(76, 154, 255);
-    }
+  }
+  .grw-navigation-draggable-line {
+    position: absolute;
+    left: -1px;
+    display: none;
+    width: 3px;
+    height: 100%;
+    background-color: rgb(76, 154, 255);
   }
 }
 
 .grw-navigation-draggable:hover :global {
-  .grw-navigation-draggable-hitarea-child {
+  .grw-navigation-draggable-line {
     display: block;
   }
 }

apps/app/src/components/Sidebar/ResizableArea/ResizableArea.tsx

@@ -88,12 +88,13 @@ export const ResizableArea = memo((props: Props): JSX.Element => {
       </div>
       <div className={styles['grw-navigation-draggable']}>
         { !disabled && (
-          <div
-            className="grw-navigation-draggable-hitarea"
-            onMouseDown={dragableAreaMouseDownHandler}
-          >
-            <div className="grw-navigation-draggable-hitarea-child"></div>
-          </div>
+          <>
+            <div
+              className="grw-navigation-draggable-hitarea"
+              onMouseDown={dragableAreaMouseDownHandler}
+            />
+            <div className="grw-navigation-draggable-line"></div>
+          </>
         ) }
       </div>
     </>

apps/app/src/components/Sidebar/Sidebar.module.scss

@@ -8,7 +8,6 @@
     display: flex;
     flex-direction: row;
     height: 100%;
-    overflow: hidden;
   }
 
   .grw-sidebar-content-header {
@@ -55,6 +54,10 @@
       transform: translateX(0);
     }
   }
+
+  .sidebar-contents-container {
+    backdrop-filter: blur(20px);
+  }
 }
 
 .grw-sidebar {
@@ -69,11 +72,6 @@
 }
 
 
-.grw-sidebar :global {
-  .sidebar-contents-container {
-    backdrop-filter: blur(20px);
-  }
-}
 @include bs.color-mode(light) {
   .grw-sidebar :global {
     --bs-border-color: var(--grw-highlight-200);

apps/app/src/components/Sidebar/Sidebar.tsx

@@ -91,18 +91,18 @@ export const SidebarSubstance = memo((): JSX.Element => {
   return (
     <div className="grw-navigation-wrap">
       <SidebarNav />
-      <ResizableArea
-        width={resizableAreaWidth}
-        minWidth={sidebarMinWidth}
-        disabled={disableResizing}
-        onResize={resizeHandler}
-        onResizeDone={resizeDoneHandler}
-        onCollapsed={collapsedByResizableAreaHandler}
-      >
-        <div className="sidebar-contents-container">
+      <div className="sidebar-contents-container">
+        <ResizableArea
+          width={resizableAreaWidth}
+          minWidth={sidebarMinWidth}
+          disabled={disableResizing}
+          onResize={resizeHandler}
+          onResizeDone={resizeDoneHandler}
+          onCollapsed={collapsedByResizableAreaHandler}
+        >
           <SidebarContents />
-        </div>
-      </ResizableArea>
+        </ResizableArea>
+      </div>
     </div>
   );