reorganize scss

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

@@ -0,0 +1,44 @@
+.grw-contextual-navigation :global {
+  position: relative;
+  will-change: width;
+
+  .grw-contextual-navigation-child {
+    overflow-x: hidden;
+  }
+}
+
+.grw-contextual-navigation:not(:global .dragging) {
+  transition: width 100ms cubic-bezier(0.2, 0, 0, 1) 0s;
+}
+
+
+.grw-navigation-draggable :global {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 100%;
+  z-index: 10; // greater than the value of SimpleBar
+  width: 0;
+
+  .grw-navigation-draggable-hitarea {
+    position: relative;
+    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:hover :global {
+  .grw-navigation-draggable-hitarea-child {
+    display: block;
+  }
+}

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

@@ -1,6 +1,9 @@
 import React, { memo, useCallback, useRef } from 'react';
 
 
+import styles from './ResizableArea.module.scss';
+
+
 const sidebarNavWidth = 48;
 
 
@@ -76,14 +79,14 @@ export const ResizableArea = memo((props: Props): JSX.Element => {
     <>
       <div
         ref={resizableContainer}
-        className="grw-contextual-navigation"
+        className={`grw-contextual-navigation ${styles['grw-contextual-navigation']} h-100`}
         style={{ width }}
       >
-        <div className={`grw-contextual-navigation-child ${width === 0 ? 'd-none' : ''}`} data-testid="grw-contextual-navigation-child">
+        <div className={`grw-contextual-navigation-child h-100 ${width === 0 ? 'd-none' : ''}`} data-testid="grw-contextual-navigation-child">
           {children}
         </div>
       </div>
-      <div className="grw-navigation-draggable">
+      <div className={styles['grw-navigation-draggable']}>
         { !disabled && (
           <div
             className="grw-navigation-draggable-hitarea"

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

@@ -23,49 +23,6 @@
       flex-direction: row;
       height: 100%;
       overflow: hidden;
-
-      .grw-contextual-navigation {
-        position: relative;
-        width: 240px;
-        height: 100%;
-        &:not(.dragging) {
-          transition: width 200ms cubic-bezier(0.2, 0, 0, 1) 0s;
-        }
-        will-change: width;
-
-        .grw-contextual-navigation-child {
-          height: 100%;
-          overflow-x: hidden;
-        }
-      }
-    }
-    .grw-navigation-draggable {
-      position: absolute;
-      top: 0px;
-      bottom: 0px;
-      left: 100%;
-      z-index: 10; // greater than the value of SimpleBar
-      width: 0;
-      .grw-navigation-draggable-hitarea {
-        position: relative;
-        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);
-        }
-      }
-      &:hover {
-        .grw-navigation-draggable-hitarea-child {
-          display: block;
-        }
-      }
     }
   }
 
@@ -128,7 +85,7 @@
 
 
 .grw-sidebar :global {
-  .grw-contextual-navigation {
+  .sidebar-contents-container {
     backdrop-filter: blur(20px);
   }
 }
@@ -136,7 +93,7 @@
   .grw-sidebar :global {
     --bs-border-color: var(--grw-highlight-200);
 
-    .grw-contextual-navigation {
+    .grw-navigation-wrap {
       background-color: rgba(var(--grw-highlight-100-rgb), .5);
     }
   }
@@ -147,7 +104,7 @@
     --bs-color: var(--bs-gray-400);
     --bs-border-color: var(--grw-highlight-800);
 
-    .grw-contextual-navigation {
+    .grw-navigation-wrap {
       background-color: rgba(var(--grw-highlight-800-rgb), .5);
     }
   }