From bb34e8139e1d53607d29672560ea7d1e73793bf5 Mon Sep 17 00:00:00 2001
From: Kit Loong <kitloong1008@gmail.com>
Date: Mon, 24 Jun 2024 21:23:56 +0800
Subject: [PATCH] Simplify sidebar toggle

---
 .../Layout/Dashboard/Header/Header.tsx        |  2 +-
 .../Dashboard/Header/HeaderSidebarToggler.tsx | 31 ++++----------
 .../Layout/Dashboard/Sidebar/Sidebar.tsx      | 13 +-----
 .../Layout/Dashboard/SidebarProvider.tsx      |  9 +---
 src/styles/layout/_sidebar.scss               | 41 +++++++++++++------
 5 files changed, 39 insertions(+), 57 deletions(-)

diff --git a/src/components/Layout/Dashboard/Header/Header.tsx b/src/components/Layout/Dashboard/Header/Header.tsx
index d62156d..1dafda0 100644
--- a/src/components/Layout/Dashboard/Header/Header.tsx
+++ b/src/components/Layout/Dashboard/Header/Header.tsx
@@ -9,7 +9,7 @@ import Breadcrumb from '@/components/Layout/Dashboard/Breadcrumb/Breadcrumb'
 export default function Header() {
   return (
     <header className="header sticky-top mb-4 py-2 px-sm-2 border-bottom">
-      <Container fluid className="header-navbar d-flex align-items-center px-0 px-sm-3">
+      <Container fluid className="header-navbar d-flex align-items-center px-0">
         <HeaderSidebarToggler />
         <Link href="/" className="header-brand d-md-none">
           <svg width="80" height="46">
diff --git a/src/components/Layout/Dashboard/Header/HeaderSidebarToggler.tsx b/src/components/Layout/Dashboard/Header/HeaderSidebarToggler.tsx
index 9dbb893..1de5726 100644
--- a/src/components/Layout/Dashboard/Header/HeaderSidebarToggler.tsx
+++ b/src/components/Layout/Dashboard/Header/HeaderSidebarToggler.tsx
@@ -8,35 +8,20 @@ import { faBars } from '@fortawesome/free-solid-svg-icons'
 export default function HeaderSidebarToggler() {
   const {
     showSidebarState: [isShowSidebar, setIsShowSidebar],
-    showSidebarMdState: [isShowSidebarMd, setIsShowSidebarMd],
   } = useSidebar()
 
   const toggleSidebar = () => {
     setIsShowSidebar(!isShowSidebar)
   }
 
-  const toggleSidebarMd = () => {
-    setIsShowSidebarMd(!isShowSidebarMd)
-  }
-
   return (
-    <>
-      <Button
-        variant="link"
-        className="header-toggler d-md-none px-md-0 me-md-3 rounded-0 shadow-none"
-        type="button"
-        onClick={toggleSidebar}
-      >
-        <FontAwesomeIcon icon={faBars} />
-      </Button>
-      <Button
-        variant="link"
-        className="header-toggler d-none d-md-inline-block px-md-0 me-md-3 rounded-0 shadow-none"
-        type="button"
-        onClick={toggleSidebarMd}
-      >
-        <FontAwesomeIcon icon={faBars} />
-      </Button>
-    </>
+    <Button
+      variant="link"
+      className="header-toggler rounded-0 shadow-none"
+      type="button"
+      onClick={toggleSidebar}
+    >
+      <FontAwesomeIcon icon={faBars} />
+    </Button>
   )
 }
diff --git a/src/components/Layout/Dashboard/Sidebar/Sidebar.tsx b/src/components/Layout/Dashboard/Sidebar/Sidebar.tsx
index 598d8e8..7ec5540 100644
--- a/src/components/Layout/Dashboard/Sidebar/Sidebar.tsx
+++ b/src/components/Layout/Dashboard/Sidebar/Sidebar.tsx
@@ -10,10 +10,7 @@ import { useSidebar } from '@/components/Layout/Dashboard/SidebarProvider'
 export default function Sidebar({ children }: { children: React.ReactNode }) {
   const [isNarrow, setIsNarrow] = useState(false)
 
-  const {
-    showSidebarState: [isShowSidebar],
-    showSidebarMdState: [isShowSidebarMd, setIsShowSidebarMd],
-  } = useSidebar()
+  const { showSidebarState: [isShowSidebar] } = useSidebar()
 
   const toggleIsNarrow = () => {
     const newValue = !isNarrow
@@ -28,19 +25,11 @@ export default function Sidebar({ children }: { children: React.ReactNode }) {
     }
   }, [setIsNarrow])
 
-  // On first time load only
-  useEffect(() => {
-    if (localStorage.getItem('isShowSidebarMd')) {
-      setIsShowSidebarMd(localStorage.getItem('isShowSidebarMd') === 'true')
-    }
-  }, [setIsShowSidebarMd])
-
   return (
     <div
       className={classNames('sidebar d-flex flex-column position-fixed h-100 border-end', {
         'sidebar-narrow': isNarrow,
         show: isShowSidebar,
-        'md-hide': !isShowSidebarMd,
       })}
       id="sidebar"
     >
diff --git a/src/components/Layout/Dashboard/SidebarProvider.tsx b/src/components/Layout/Dashboard/SidebarProvider.tsx
index 22bd3a5..ecf1333 100644
--- a/src/components/Layout/Dashboard/SidebarProvider.tsx
+++ b/src/components/Layout/Dashboard/SidebarProvider.tsx
@@ -6,27 +6,20 @@ import {
 
 type SidebarContextType = {
   showSidebarState: [boolean, Dispatch<SetStateAction<boolean>>];
-  showSidebarMdState: [boolean, Dispatch<SetStateAction<boolean>>];
 }
 
 export const SidebarContext = createContext<SidebarContextType>({
   showSidebarState: [false, () => {}],
-  showSidebarMdState: [false, () => {}],
 })
 
 export default function SidebarProvider({ children }: {
   children: React.ReactNode;
 }) {
-  // Show status for xs screen
   const [isShowSidebar, setIsShowSidebar] = useState(false)
 
-  // Show status for md screen and above
-  const [isShowSidebarMd, setIsShowSidebarMd] = useState(true)
-
   const value: SidebarContextType = useMemo(() => ({
     showSidebarState: [isShowSidebar, setIsShowSidebar],
-    showSidebarMdState: [isShowSidebarMd, setIsShowSidebarMd],
-  }), [isShowSidebar, isShowSidebarMd])
+  }), [isShowSidebar])
 
   return <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>
 }
diff --git a/src/styles/layout/_sidebar.scss b/src/styles/layout/_sidebar.scss
index 663e4fb..c933155 100644
--- a/src/styles/layout/_sidebar.scss
+++ b/src/styles/layout/_sidebar.scss
@@ -43,7 +43,6 @@ $sidebar-overlay-z-index: 1025;
   z-index: $sidebar-z-index;
 
   & + .wrapper {
-    padding-left: var(--sidebar-width);
     transition: padding 0.15s;
   }
 
@@ -114,16 +113,40 @@ $sidebar-overlay-z-index: 1025;
     }
   }
 
-  @include media-breakpoint-down(md) {
-    &:not(.show) {
-      margin-left: calc(-1 * var(--sidebar-width));
+  & {
+    margin-left: calc(-1 * var(--sidebar-width));
+  }
+
+  &.show {
+    margin-left: 0;
+  }
+
+  & + .wrapper {
+    padding-left: calc(-1 * var(--sidebar-width));
+  }
+
+  // Push content to the right only for md and up
+  @include media-breakpoint-up(md) {
+    & {
+      margin-left: 0;
     }
 
     & + .wrapper {
-      padding-left: calc(-1 * var(--sidebar-width));
+      padding-left: var(--sidebar-width);
+    }
+
+    // .show is the opposite meaning for md and up
+    // it means the sidebar is collapsed
+    &.show {
+      margin-left: calc(-1 * var(--sidebar-width));
+
+        & + .wrapper {
+          padding-left: calc(-1 * var(--sidebar-width));
+        }
     }
   }
 
+  // Sidebar narrow styling, only for md and up
   @include media-breakpoint-up(md) {
     &.sidebar-narrow {
       .sidebar-toggler {
@@ -158,14 +181,6 @@ $sidebar-overlay-z-index: 1025;
         }
       }
     }
-
-    &.md-hide {
-      margin-left: calc(-1 * var(--sidebar-width));
-
-      & + .wrapper {
-        padding-left: calc(-1 * var(--sidebar-width));
-      }
-    }
   }
 }