refactor sidebar structure

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

@@ -1,13 +1,9 @@
-.grw-contextual-navigation :global {
+.grw-resizable-area :global {
   position: relative;
   will-change: width;
-
-  .grw-contextual-navigation-child {
-    overflow-x: hidden;
-  }
 }
 
-.grw-contextual-navigation:not(:global .dragging) {
+.grw-resizable-area:not(:global .dragging) {
   transition: width 100ms cubic-bezier(0.2, 0, 0, 1) 0s;
 }
 

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

@@ -4,9 +4,6 @@ import React, { memo, useCallback, useRef } from 'react';
 import styles from './ResizableArea.module.scss';
 
 
-const sidebarNavWidth = 48;
-
-
 type Props = {
   width?: number,
   minWidth?: number,
@@ -29,7 +26,7 @@ export const ResizableArea = memo((props: Props): JSX.Element => {
   const draggableAreaMoveHandler = useCallback((event: MouseEvent) => {
     event.preventDefault();
 
-    const widthByMousePos = event.pageX - sidebarNavWidth;
+    const widthByMousePos = event.pageX;
 
     const newWidth = Math.max(widthByMousePos, minWidth);
     onResize?.(newWidth);
@@ -41,7 +38,7 @@ export const ResizableArea = memo((props: Props): JSX.Element => {
       return;
     }
 
-    const widthByMousePos = event.pageX - sidebarNavWidth;
+    const widthByMousePos = event.pageX;
 
     if (widthByMousePos < minWidth / 2) {
       // force collapsed
@@ -79,12 +76,10 @@ export const ResizableArea = memo((props: Props): JSX.Element => {
     <>
       <div
         ref={resizableContainer}
-        className={`grw-contextual-navigation ${styles['grw-contextual-navigation']} h-100`}
+        className={`${styles['grw-resizable-area']} h-100 overflow-hidden`}
         style={{ width }}
       >
-        <div className={`grw-contextual-navigation-child h-100 ${width === 0 ? 'd-none' : ''}`} data-testid="grw-contextual-navigation-child">
-          {children}
-        </div>
+        {children}
       </div>
       <div className={styles['grw-navigation-draggable']}>
         { !disabled && (

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

@@ -22,8 +22,8 @@ import styles from './Sidebar.module.scss';
 const SidebarContents = dynamic(() => import('./SidebarContents').then(mod => mod.SidebarContents), { ssr: false });
 
 
-const resizableAreaMinWidth = 300;
-const resizableAreaCollapsedWidth = 0;
+const resizableAreaMinWidth = 348;
+const resizableAreaCollapsedWidth = 48;
 
 
 export const SidebarSubstance = memo((): JSX.Element => {
@@ -66,9 +66,8 @@ export const SidebarSubstance = memo((): JSX.Element => {
   const collapsedByResizableAreaHandler = useCallback(() => {
     mutateCollapsedMode(true);
     mutateCollapsedContentsOpened(false);
-    mutateProductNavWidth(sidebarMinWidth, false);
-    scheduleToPut({ preferCollapsedModeByUser: true, currentProductNavWidth: sidebarMinWidth });
-  }, [mutateCollapsedContentsOpened, mutateCollapsedMode, mutateProductNavWidth]);
+    scheduleToPut({ preferCollapsedModeByUser: true });
+  }, [mutateCollapsedContentsOpened, mutateCollapsedMode]);
 
   useEffect(() => {
     toggleDrawerMode(isDrawerMode);
@@ -91,21 +90,22 @@ export const SidebarSubstance = memo((): JSX.Element => {
   const disableResizing = isResizeDisabled || isDrawerMode || isCollapsedMode;
 
   return (
-    <div className="grw-sidebar-inner d-flex flex-row h-100">
-      <SidebarNav />
-      <div className="sidebar-contents-container flex-grow-1">
-        <ResizableArea
-          width={resizableAreaWidth}
-          minWidth={resizableAreaMinWidth}
-          disabled={disableResizing}
-          onResize={resizeHandler}
-          onResizeDone={resizeDoneHandler}
-          onCollapsed={collapsedByResizableAreaHandler}
-        >
+    <ResizableArea
+      width={resizableAreaWidth}
+      minWidth={resizableAreaMinWidth}
+      disabled={disableResizing}
+      onResize={resizeHandler}
+      onResizeDone={resizeDoneHandler}
+      onCollapsed={collapsedByResizableAreaHandler}
+    >
+      <SidebarHead />
+      <div className="grw-sidebar-inner d-flex flex-row h-100">
+        <SidebarNav />
+        <div className="sidebar-contents-container flex-grow-1 overflow-y-auto">
           <SidebarContents />
-        </ResizableArea>
+        </div>
       </div>
-    </div>
+    </ResizableArea>
   );
 
 });
@@ -122,7 +122,6 @@ export const Sidebar = (): JSX.Element => {
 
   return (
     <div className={`${grwSidebarClass} ${sidebarModeClass} ${isOpenClass} vh-100`} data-testid="grw-sidebar">
-      <SidebarHead />
       <SidebarSubstance />
     </div>
   );