fix-siderbar-scroll

Author: igorihimbazwe

src/components/DashHeader.tsx

@@ -39,7 +39,7 @@ export const TICKETS_NOTS_SUB = gql`
   }
 `;
 
-function DashHeader() {
+function DashHeader({minimize}: any) {
   /* istanbul ignore next */
   const { minimized, toggleMinMenu, showNav, toggleNav } =
     useContext(MenuContext);
@@ -144,7 +144,7 @@ function DashHeader() {
           </div>
           <div className="hidden lg:flex">
             <div
-              onClick={toggleMinMenu}
+              onClick={() => { minimize(!minimized); return toggleMinMenu() }}
               className="w-7"
               role="button"
               tabIndex={0}

src/components/Sidebar.tsx

@@ -39,7 +39,7 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
     <div
       className={`${
         showNav ? 'block' : 'hidden'
-      } lg:block lg:z-0  z-50 fixed top-12 bottom-0 lg:h-[calc(100vh-4rem)] w-[14rem]`}
+      } lg:block lg:z-0  z-50 fixed top-14 bottom-0 lg:h-[calc(100vh-3rem)] `}
     >
       <div
         className={`${style} overflow-auto flex-col h-[100%] px-3 py-8 bg-indigo-100 dark:bg-dark-bg shadow-lg lg:shadow-none dark:shadow-border-dark`}

src/containers/DashRoutes.tsx

@@ -83,18 +83,17 @@ const CoordinatorCards = React.lazy(
 const AdminSission = React.lazy(() => import('./admin-dashBoard/Sessions'));
 
 function DashRoutes() {
-  const { toggleNav } = useContext(MenuContext);
-
+  const {  toggleNav } = useContext(MenuContext);
+  const [minimized, setMinimized] = useState(false);
   const [nav, setNav] = useState(false);
   const handleClick = () => setNav(!nav);
-
   return (
     <PrivateRoute>
       <MenuProvider>
-        <DashHeader />
+        <DashHeader minimize={setMinimized} />
         <Sidebar toggle={toggleNav} style="" />
       </MenuProvider>
-      <main className=" px-4 md:px-8 py-4 md:py-8 lg:w-[calc(100%-14rem)] ml-auto mr-0 bg-light-bg overflow-hidden  dark:bg-dark-frame-bg">
+      <main className={`px-4 md:px-8 py-4 md:py-8 ${!minimized ? 'lg:w-[calc(100%-12rem)]' : 'lg:w-[calc(100%-5rem)]'} ml-auto mr-0 bg-light-bg overflow-hidden  dark:bg-dark-frame-bg`}>
         <Suspense>
           <Routes>
             <Route path="/dashboard" element={<Dashboard />} />

src/hook/menuProvider.tsx

@@ -14,7 +14,7 @@ export const MenuContext = createContext<any>({
 export function ThemeProvider({ children }: Props) {
   const [minimized, setMinimized] = useState(false);
   const [showNav, setShowNav] = useState(false);
-
+console.log(minimized)
   const toggleMinMenu = () => setMinimized((p) => !p);
 
   const toggleNav = () => setShowNav((p) => !p);