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);
@@ -126,7 +126,7 @@ function DashHeader() {
           handleShowProfileDropdown={handleShowProfileDropdown}
         />
       )}
-      <div className="font-serif  transform:sc w-full py-4 z-20 bg-indigo-100 dark:bg-dark-bg page-header">
+      <div className="font-serif h-16 transform:sc w-full py-4 z-20 bg-indigo-100 dark:bg-dark-bg page-header">
         <div className="px-3 flex items-center w-full font-serif">
           <div className="flex px-5 lg:hidden">
             <div
@@ -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,10 +39,10 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
     <div
       className={`${
         showNav ? 'block' : 'hidden'
-      } lg:block page-sideNav fixed lg:static top-16 bottom-0 font-serif`}
+      } 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%] pt-2 bg-indigo-100 dark:bg-dark-bg shadow-lg lg:shadow-none dark:shadow-border-dark`}
+        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`}
       >
         <div className="list-none">
           <SideNavLink onClick={toggle} name="Dashboard" to="/dashboard">

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 w-[100%] 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,6 @@ export const MenuContext = createContext<any>({
 export function ThemeProvider({ children }: Props) {
   const [minimized, setMinimized] = useState(false);
   const [showNav, setShowNav] = useState(false);
-
   const toggleMinMenu = () => setMinimized((p) => !p);
 
   const toggleNav = () => setShowNav((p) => !p);

src/index.css

@@ -484,10 +484,10 @@ th {
   .page-layout {
     display: grid;
     grid-template-areas:
-      'header header'
-      'side_nav main'
-      'footer footer';
-    grid-template-columns: auto 1fr;
+      'header'
+      'main'
+      'footer';
+    grid-template-columns: auto;
     grid-template-rows: auto 1fr auto;
   }
 

tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap

@@ -463,7 +463,7 @@ Array [
               name="date"
               readOnly={true}
               type="text"
-              value="2024-11-14"
+              value="2024-11-19"
             />
           </div>
           <div

tests/components/__snapshots__/DashHeader.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`DashHeader test  Should render DashHeader 1`] = `
 <div
-  className="font-serif  transform:sc w-full py-4 z-20 bg-indigo-100 dark:bg-dark-bg page-header"
+  className="font-serif h-16 transform:sc w-full py-4 z-20 bg-indigo-100 dark:bg-dark-bg page-header"
 >
   <div
     className="px-3 flex items-center w-full font-serif"
@@ -36,6 +36,7 @@ exports[`DashHeader test  Should render DashHeader 1`] = `
     >
       <div
         className="w-7"
+        onClick={[Function]}
         role="button"
         tabIndex={0}
       >

tests/components/__snapshots__/Footer.test.tsx.snap

@@ -216,7 +216,13 @@ exports[`<Footer/> Renders Header 1`] = `
             <li
               className="mb-1"
             >
-              Community
+              <a
+                href="/community"
+                onClick={[Function]}
+              >
+                Community
+                 
+              </a>
             </li>
             <li
               className="mb-1"

tests/components/__snapshots__/SideNavLink.test.tsx.snap

@@ -21,10 +21,10 @@ exports[`DashHeader test  Should render navlink witthout active indicator 1`] =
 
 exports[`DashHeader test  Should render the sidebar with setings as active 1`] = `
 <div
-  className="block lg:block page-sideNav fixed lg:static top-16 bottom-0 font-serif"
+  className="block lg:block lg:z-0  z-50 fixed top-14 bottom-0 lg:h-[calc(100vh-3rem)] "
 >
   <div
-    className=" overflow-auto flex-col h-[100%] pt-2 bg-indigo-100 dark:bg-dark-bg shadow-lg lg:shadow-none dark:shadow-border-dark"
+    className=" 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"
   >
     <div
       className="list-none"

tests/containers/__snapshots__/MainRoutes.test.tsx.snap

@@ -1224,7 +1224,13 @@ exports[`Main Routes Should render 1`] = `
                   <li
                     className="mb-1"
                   >
-                    Community
+                    <a
+                      href="/community"
+                      onClick={[Function]}
+                    >
+                      Community
+                       
+                    </a>
                   </li>
                   <li
                     className="mb-1"
@@ -1509,7 +1515,13 @@ exports[`Main Routes Should render 1`] = `
               <li
                 className="mb-1"
               >
-                Community
+                <a
+                  href="/community"
+                  onClick={[Function]}
+                >
+                  Community
+                   
+                </a>
               </li>
               <li
                 className="mb-1"

tests/other-tests/__snapshots__/App.test.tsx.snap

@@ -949,7 +949,13 @@ exports[`App test  Should render app 1`] = `
                 <li
                   className="mb-1"
                 >
-                  Community
+                  <a
+                    href="/community"
+                    onClick={[Function]}
+                  >
+                    Community
+                     
+                  </a>
                 </li>
                 <li
                   className="mb-1"

tests/other-tests/__snapshots__/Siderbar.test.tsx.snap

@@ -946,7 +946,13 @@ exports[`<Home /> Renders Home 1`] = `
               <li
                 className="mb-1"
               >
-                Community
+                <a
+                  href="/community"
+                  onClick={[Function]}
+                >
+                  Community
+                   
+                </a>
               </li>
               <li
                 className="mb-1"

tests/pages/TraineeAttendance.test.tsx

@@ -174,4 +174,4 @@ describe('Renders the TraineeAttendance Page', () => {
     expect(await screen.findByText("You don't have an attendance record in the system at the moment.")).toBeInTheDocument();
   });
 
-});
+});

tests/pages/__snapshots__/AdminLogin.test.tsx.snap

@@ -3,13 +3,13 @@
 exports[`Admin Login Should render 1`] = `
 Array [
   <div
-    className="grow  dark:bg-dark-frame-bg bg-indigo-50 flex flex-row font-serif"
+    className="flex flex-row font-serif grow dark:bg-dark-frame-bg bg-indigo-50"
   >
     <div
       className="hidden lg:flex w-[50%] h-full  flex-col justify-center items-center mt-10 "
     >
       <div
-        className=" flex flex-col justify-center items-center "
+        className="flex flex-col items-center justify-center "
       >
         <div
           className="relative flex flex-row justify-center"
@@ -40,13 +40,13 @@ Array [
       className=" w-full  lg:w-[50%] lg:p-5 flex flex-row items-end p-5"
     >
       <div
-        className="max-w-lg w-full mx-auto my-28 bg-indigo-100 dark:bg-dark-bg  p-5 sm:p-5 md:shadow-xl sm:shadow-none md:rounded-xl sm:rounded-none"
+        className="w-full max-w-lg p-5 mx-auto bg-indigo-100 my-28 dark:bg-dark-bg sm:p-5 md:shadow-xl sm:shadow-none md:rounded-xl sm:rounded-none"
       >
         <div
           className=""
         >
           <div
-            className="flex flex-col justify-center items-center"
+            className="flex flex-col items-center justify-center"
           >
             <h2
               className="text-2xl font-bold text-primary dark:text-dark-text-fill "
@@ -59,7 +59,7 @@ Array [
             />
           </div>
           <div
-            className=" text-sm text-center dark:text-dark-text-fill"
+            className="text-sm text-center dark:text-dark-text-fill"
           >
             <a
               className="mx-1 text-primary"
@@ -104,7 +104,7 @@ Array [
                   />
                 </svg>
                 <input
-                  className="bg-gray-100 outline-none text-sm flex-1 px-2 dark:border-white dark:bg-dark-bg dark:text-white "
+                  className="flex-1 px-2 text-sm bg-gray-100 outline-none dark:border-white dark:bg-dark-bg dark:text-white "
                   data-testid="email"
                   name="email"
                   onBlur={[Function]}
@@ -114,13 +114,13 @@ Array [
                 />
               </div>
               <div
-                className="text-left mb-1 pl-4"
+                className="pl-4 mb-1 text-left"
               />
               <div
-                className="md:w-full border border-gray rounded-md bg-gray-100 p-2 my-4 flex items-center  mb-2 dark:border-white dark:bg-dark-bg"
+                className="flex items-center p-2 my-4 mb-2 bg-gray-100 border rounded-md md:w-full border-gray dark:border-white dark:bg-dark-bg"
               >
                 <svg
-                  className="text-gray-400 mr-2 "
+                  className="mr-2 text-gray-400 "
                   fill="currentColor"
                   height="1em"
                   stroke="currentColor"
@@ -143,7 +143,7 @@ Array [
                   />
                 </svg>
                 <input
-                  className="bg-gray-100 outline-none text-sm flex-1 dark:border-white dark:bg-dark-bg dark:text-white"
+                  className="flex-1 text-sm bg-gray-100 outline-none dark:border-white dark:bg-dark-bg dark:text-white"
                   data-testid="password"
                   name="password"
                   onBlur={[Function]}
@@ -187,7 +187,7 @@ Array [
                 className="pl-4 mb-1 text-left"
               />
               <div
-                className="flex w-full flex-col sm:flex-row justify-between  items-center rounded mb-5 mt-5"
+                className="flex flex-col items-center justify-between w-full mt-5 mb-5 rounded sm:flex-row"
               >
                 <div
                   className="w-50%"
@@ -197,7 +197,7 @@ Array [
                     htmlFor="checkbox"
                   >
                     <input
-                      className="mr-1  dark:text-dark-text-fill dark:border-white dark:bg-dark-frame-bg"
+                      className="mr-1 dark:text-dark-text-fill dark:border-white dark:bg-dark-frame-bg"
                       name="remember"
                       type="checkbox"
                     />
@@ -217,7 +217,7 @@ Array [
                 </div>
               </div>
               <div
-                className="w-full justify-center"
+                className="justify-center w-full"
               >
                 <button
                   className="btn transparentbtn md  w-full bg-primary m-0 inline-block rounded-md lg:px-12 lg:py-2 sm:px-4 sm:py-1 md:font-semibold sm:mt-2 sm:font-medium text-white font-serif "

tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap

@@ -463,7 +463,7 @@ Array [
               name="date"
               readOnly={true}
               type="text"
-              value="2024-11-14"
+              value="2024-11-19"
             />
           </div>
           <div

tests/pages/__snapshots__/Home.test.tsx.snap

@@ -946,7 +946,13 @@ exports[`Home page renders the landing page 1`] = `
               <li
                 className="mb-1"
               >
-                Community
+                <a
+                  href="/community"
+                  onClick={[Function]}
+                >
+                  Community
+                   
+                </a>
               </li>
               <li
                 className="mb-1"