Merge branch 'imprv/sidebar-dom-structure' into imprv/sidebar-mode

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

@@ -2,28 +2,12 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
 .grw-sidebar :global {
-  // sticky
-  position: sticky;
-  top: 0;
-
-  // set the max value that should be taken when sticky
-  height: 100vh;
-
   border-right : 1px solid var(--bs-border-color);
 
-  .data-layout-container {
+  .grw-navigation-wrap {
     display: flex;
     flex-direction: row;
-    height: 100vh;
-    margin-top: 0px;
-  }
-  .navigation {
-    .grw-navigation-wrap {
-      display: flex;
-      flex-direction: row;
-      height: 100%;
-      overflow: hidden;
-    }
+    height: 100%;
   }
 
   .grw-sidebar-content-header {
@@ -36,18 +20,23 @@
 
 // Dock Mode
 @mixin dock() {
+  .grw-navigation-wrap {
+    // sticky
+    position: sticky;
+    top: 0;
+
+    // set the max value that should be taken when sticky
+    height: 100vh;
+  }
 }
 
 // Drawer Mode
 @mixin drawer() {
-  z-index: bs.$zindex-fixed + 2;
 
-  .data-layout-container {
+  .grw-navigation-wrap {
     position: fixed;
     top: 0;
-    width: 0;
-  }
-  div.navigation.transition-enabled {
+    z-index: bs.$zindex-fixed + 2;
     max-width: 80vw;
 
     // apply transition
@@ -56,15 +45,19 @@
   }
 
   &:not(.open) {
-    div.navigation {
+    .grw-navigation-wrap {
       transform: translateX(-100%);
     }
   }
   &.open {
-    div.navigation {
+    .grw-navigation-wrap {
       transform: translateX(0);
     }
   }
+
+  .sidebar-contents-container {
+    backdrop-filter: blur(20px);
+  }
 }
 
 .grw-sidebar {
@@ -73,22 +66,12 @@
       @include drawer();
     }
     &.grw-sidebar-dock {
-      @include bs.media-breakpoint-down(sm) {
-        @include drawer();
-      }
-      @include bs.media-breakpoint-up(md) {
-        @include dock();
-      }
+      @include dock();
     }
   }
 }
 
 
-.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,23 +91,19 @@ export const SidebarSubstance = memo((): JSX.Element => {
   const disableResizing = isResizeDisabled || isDrawerMode || isCollapsedMode;
 
   return (
-    <div className="data-layout-container">
-      <div className="navigation transition-enabled">
-        <div className="grw-navigation-wrap">
-          <SidebarNav />
-          <div className="sidebar-contents-container">
-            <ResizableArea
-              width={resizableAreaWidth}
-              minWidth={sidebarMinWidth}
-              disabled={disableResizing}
-              onResize={resizeHandler}
-              onResizeDone={resizeDoneHandler}
-              onCollapsed={collapsedByResizableAreaHandler}
-            >
-              <SidebarContents />
-            </ResizableArea>
-          </div>
-        </div>
+    <div className="grw-navigation-wrap">
+      <SidebarNav />
+      <div className="sidebar-contents-container">
+        <ResizableArea
+          width={resizableAreaWidth}
+          minWidth={sidebarMinWidth}
+          disabled={disableResizing}
+          onResize={resizeHandler}
+          onResizeDone={resizeDoneHandler}
+          onCollapsed={collapsedByResizableAreaHandler}
+        >
+          <SidebarContents />
+        </ResizableArea>
       </div>
     </div>
   );