WIP: refactor Sidebar

apps/app/_obsolete/src/styles/theme/apply-colors.scss

@@ -206,24 +206,24 @@ ul.pagination {
   $bgcolor-resize-button: var(--bgcolor-resize-button,white);
   $color-resize-button-hover: var(--color-resize-button-hover,var(--color-reversal));
   $bgcolor-resize-button-hover: var(--bgcolor-resize-button-hover,#{hsl.lighten(var(--bgcolor-resize-button), 5%)});
-  .grw-navigation-resize-button {
-    .hexagon-container svg {
-      .background {
-        fill: var(--bgcolor-resize-button);
-      }
-      .icon {
-        fill: var(--color-resize-button);
-      }
-    }
-    &:hover .hexagon-container svg {
-      .background {
-        fill: var(--bgcolor-resize-button-hover);
-      }
-      .icon {
-        fill: var(--color-resize-button-hover);
-      }
-    }
-  }
+  // .grw-navigation-resize-button {
+  //   .hexagon-container svg {
+  //     .background {
+  //       fill: var(--bgcolor-resize-button);
+  //     }
+  //     .icon {
+  //       fill: var(--color-resize-button);
+  //     }
+  //   }
+  //   &:hover .hexagon-container svg {
+  //     .background {
+  //       fill: var(--bgcolor-resize-button-hover);
+  //     }
+  //     .icon {
+  //       fill: var(--color-resize-button-hover);
+  //     }
+  //   }
+  // }
   div.grw-contextual-navigation {
     > div {
       color: var(--color-sidebar-context);

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

@@ -37,11 +37,6 @@
           height: 100%;
           overflow-x: hidden;
         }
-
-        .grw-drawer-toggler {
-          display: none; // invisible in default
-        }
-
       }
 
       .simplebar-mask {
@@ -70,59 +65,6 @@
           background-color: rgb(76, 154, 255);
         }
       }
-      .grw-navigation-resize-button {
-        position: fixed;
-
-        $width: 27.691px;
-        $height: 23.999px;
-
-        @mixin hitarea($size-hitarea) {
-          top: ($width - $size-hitarea) / 2;
-          left: ($height - $size-hitarea) / 2;
-          width: $size-hitarea;
-          height: $size-hitarea;
-        }
-
-        // locate to the center of screen
-        top: calc(50vh - $height/2);
-
-        display: none;
-        padding: 0px;
-        background-color: transparent;
-        border: 0;
-        transform: translateX(-50%);
-
-        .hexagon-container {
-          // set transform
-          svg * {
-            transition: fill 100ms linear;
-          }
-          svg {
-            width: $width + 2px; // add 1px for drop-shadow
-            height: $height + 2px; // add 1px for drop-shadow
-            .background {
-              filter: drop-shadow(0px 1px 0px rgba(#999, 60%));
-            }
-          }
-        }
-        .hitarea {
-          position: absolute;
-          border-radius: bs.$border-radius-pill;
-
-          @include hitarea(30px);
-        }
-
-        // reverse and center icon at the time of collapsed
-        &.collapsed {
-          display: block;
-          .hexagon-container svg {
-            transform: rotate(180deg);
-          }
-          .hitarea {
-            @include hitarea(80px);
-          }
-        }
-      }
       &:hover {
         .grw-navigation-draggable-hitarea-child {
           display: block;
@@ -172,31 +114,11 @@
     div.navigation {
       transform: translateX(0);
     }
-
-    .grw-contextual-navigation-child {
-      .grw-drawer-toggler {
-        display: block;
-      }
-    }
   }
 
   .grw-navigation-resize-button {
     display: none !important;
   }
-
-  .grw-contextual-navigation-child {
-    .grw-drawer-toggler {
-      @include bs.media-breakpoint-down(sm) {
-        position: fixed;
-        right: -15px;
-        bottom: 15px;
-        width: 42px;
-        height: 42px;
-        font-size: 18px;
-        transform: translateX(100%);
-      }
-    }
-  }
 }
 
 .grw-sidebar {

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

@@ -14,7 +14,6 @@ import {
 
 import DrawerToggler from '../Navbar/DrawerToggler';
 
-import { NavigationResizeHexagon } from './NavigationResizeHexagon';
 import { SidebarNav } from './SidebarNav';
 
 import styles from './Sidebar.module.scss';
@@ -28,7 +27,7 @@ const sidebarMinimizeWidth = 20;
 const sidebarFixedWidthInDrawerMode = 320;
 
 
-export const Sidebar = memo((): JSX.Element => {
+export const SidebarSubstance = memo((): JSX.Element => {
 
   const { data: isDrawerMode } = useDrawerMode();
   const { data: isDrawerOpened } = useDrawerOpened();
@@ -105,12 +104,6 @@ export const Sidebar = memo((): JSX.Element => {
     setHoverOnResizableContainer(false);
   }, [isCollapsed, isDrawerMode, isDragging]);
 
-  const toggleNavigationBtnClickHandler = useCallback(() => {
-    const newValue = !isCollapsed;
-    mutateSidebarCollapsed(newValue, false);
-    scheduleToPut({ isSidebarCollapsed: newValue });
-  }, [isCollapsed, mutateSidebarCollapsed, scheduleToPut]);
-
   useEffect(() => {
     if (isCollapsed) {
       setContentWidth(sidebarMinimizeWidth);
@@ -223,65 +216,56 @@ export const Sidebar = memo((): JSX.Element => {
 
   const showContents = isDrawerMode || isHover || !isCollapsed;
 
-
-  // css styles
-  const grwSidebarClass = `grw-sidebar ${styles['grw-sidebar']}`;
-  const sidebarModeClass = `${isDrawerMode ? 'grw-sidebar-drawer' : 'grw-sidebar-dock'}`;
-  const isOpenClass = `${isDrawerOpened ? 'open' : ''}`;
   return (
-    <>
-      <div className={`${grwSidebarClass} ${sidebarModeClass} ${isOpenClass} d-print-none`} data-testid="grw-sidebar">
-        <div className="data-layout-container">
+    <div className="data-layout-container">
+      <div
+        className="navigation transition-enabled"
+        onMouseEnter={hoverOnHandler}
+        onMouseLeave={hoverOutHandler}
+      >
+        <div className="grw-navigation-wrap">
+          <SidebarNav />
           <div
-            className="navigation transition-enabled"
-            onMouseEnter={hoverOnHandler}
-            onMouseLeave={hoverOutHandler}
+            ref={resizableContainer}
+            className="grw-contextual-navigation"
+            onMouseEnter={hoverOnResizableContainerHandler}
+            onMouseLeave={hoverOutResizableContainerHandler}
+            style={{ width: isCollapsed ? sidebarMinimizeWidth : currentProductNavWidth }}
           >
-            <div className="grw-navigation-wrap">
-              <SidebarNav />
-              <div
-                ref={resizableContainer}
-                className="grw-contextual-navigation"
-                onMouseEnter={hoverOnResizableContainerHandler}
-                onMouseLeave={hoverOutResizableContainerHandler}
-                style={{ width: isCollapsed ? sidebarMinimizeWidth : currentProductNavWidth }}
-              >
-                <div className={`grw-contextual-navigation-child ${showContents ? '' : 'd-none'}`} data-testid="grw-contextual-navigation-child">
-                  <SidebarContents />
-                  <DrawerToggler iconClass="icon-arrow-left" />
-                </div>
-              </div>
-            </div>
-            <div className="grw-navigation-draggable">
-              { isResizableByDrag && (
-                <div
-                  className="grw-navigation-draggable-hitarea"
-                  onMouseDown={dragableAreaMouseDownHandler}
-                >
-                  <div className="grw-navigation-draggable-hitarea-child"></div>
-                </div>
-              ) }
-              <button
-                data-testid="grw-navigation-resize-button"
-                className={`grw-navigation-resize-button ${!isDrawerMode ? 'resizable' : ''} ${isCollapsed ? 'collapsed' : ''} `}
-                type="button"
-                aria-expanded="true"
-                aria-label="Toggle navigation"
-                disabled={isDrawerMode}
-                onClick={toggleNavigationBtnClickHandler}
-              >
-                <span className="hexagon-container" role="presentation">
-                  <NavigationResizeHexagon />
-                </span>
-                <span className="hitarea" role="presentation"></span>
-              </button>
+            <div className={`grw-contextual-navigation-child ${showContents ? '' : 'd-none'}`} data-testid="grw-contextual-navigation-child">
+              <SidebarContents />
             </div>
           </div>
         </div>
+        <div className="grw-navigation-draggable">
+          { isResizableByDrag && (
+            <div
+              className="grw-navigation-draggable-hitarea"
+              onMouseDown={dragableAreaMouseDownHandler}
+            >
+              <div className="grw-navigation-draggable-hitarea-child"></div>
+            </div>
+          ) }
+        </div>
       </div>
-
-    </>
+    </div>
   );
 
 });
-Sidebar.displayName = 'Sidebar';
+
+export const Sidebar = (): JSX.Element => {
+
+  const { data: isDrawerMode } = useDrawerMode();
+  const { data: isDrawerOpened } = useDrawerOpened();
+
+  // css styles
+  const grwSidebarClass = `grw-sidebar ${styles['grw-sidebar']}`;
+  const sidebarModeClass = `${isDrawerMode ? 'grw-sidebar-drawer' : 'grw-sidebar-dock'}`;
+  const isOpenClass = `${isDrawerOpened ? 'open' : ''}`;
+
+  return (
+    <div className={`${grwSidebarClass} ${sidebarModeClass} ${isOpenClass} d-print-none`} data-testid="grw-sidebar">
+      <SidebarSubstance />
+    </div>
+  );
+};

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

@@ -6,7 +6,6 @@ import Link from 'next/link';
 
 import { useIsDefaultLogo } from '~/stores/context';
 
-import DrawerToggler from '../../Navbar/DrawerToggler';
 import { SidebarBrandLogo } from '../SidebarBrandLogo';
 
 import { PrimaryItems } from './PrimaryItems';
@@ -27,7 +26,6 @@ export const SidebarNav: FC = memo(() => {
           <SidebarBrandLogo isDefaultLogo={isDefaultLogo} />
         </Link>
       </div>
-      <DrawerToggler />
 
       <div className="grw-sidebar-nav-primary-container" data-vrt-blackout-sidebar-nav>
         <PrimaryItems />