From 3d4c0d1d39707f965fb8010530891e99d2ef21fb Mon Sep 17 00:00:00 2001
From: Igor IHIMBAZWE <iigore2061@gmail.com>
Date: Tue, 19 Nov 2024 10:06:48 +0200
Subject: [PATCH] fix-siderbar-scroll

---
 src/components/DashHeader.tsx                 |  6 +--
 src/components/Sidebar.tsx                    |  4 +-
 src/containers/DashRoutes.tsx                 |  9 ++--
 src/hook/menuProvider.tsx                     |  1 -
 src/index.css                                 |  8 +--
 .../AdminTraineeDashboard.test.tsx.snap       |  2 +-
 .../__snapshots__/DashHeader.test.tsx.snap    |  3 +-
 .../__snapshots__/Footer.test.tsx.snap        |  8 ++-
 .../__snapshots__/SideNavLink.test.tsx.snap   |  4 +-
 .../__snapshots__/MainRoutes.test.tsx.snap    | 16 +++++-
 .../__snapshots__/App.test.tsx.snap           |  8 ++-
 .../__snapshots__/Siderbar.test.tsx.snap      |  8 ++-
 tests/pages/TraineeAttendance.test.tsx        |  2 +-
 .../__snapshots__/AdminLogin.test.tsx.snap    | 26 ++++-----
 .../AdminTraineeDashboard.test.tsx.snap       |  2 +-
 tests/pages/__snapshots__/Home.test.tsx.snap  |  8 ++-
 .../__snapshots__/Settings.test.tsx.snap      | 54 +++++++------------
 .../SuperAdminDashboard.test.tsx.snap         |  4 +-
 .../__snapshots__/userRegister.test.tsx.snap  |  2 +-
 19 files changed, 96 insertions(+), 79 deletions(-)

diff --git a/src/components/DashHeader.tsx b/src/components/DashHeader.tsx
index e08ed7296..e648c213a 100644
--- a/src/components/DashHeader.tsx
+++ b/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}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index b4eda3ca8..fd013761b 100644
--- a/src/components/Sidebar.tsx
+++ b/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">
diff --git a/src/containers/DashRoutes.tsx b/src/containers/DashRoutes.tsx
index 423da373c..db57b4281 100644
--- a/src/containers/DashRoutes.tsx
+++ b/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 />} />
diff --git a/src/hook/menuProvider.tsx b/src/hook/menuProvider.tsx
index 44acd7212..c2019fdf5 100644
--- a/src/hook/menuProvider.tsx
+++ b/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);
diff --git a/src/index.css b/src/index.css
index dc015494c..abcc8d5ee 100644
--- a/src/index.css
+++ b/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;
   }
 
diff --git a/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap b/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap
index 6af0d7afa..8eb69ae1b 100644
--- a/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap
+++ b/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
diff --git a/tests/components/__snapshots__/DashHeader.test.tsx.snap b/tests/components/__snapshots__/DashHeader.test.tsx.snap
index b64c0be1f..5c6c7f32f 100644
--- a/tests/components/__snapshots__/DashHeader.test.tsx.snap
+++ b/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}
       >
diff --git a/tests/components/__snapshots__/Footer.test.tsx.snap b/tests/components/__snapshots__/Footer.test.tsx.snap
index afcaa31d8..a6934aeb1 100644
--- a/tests/components/__snapshots__/Footer.test.tsx.snap
+++ b/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"
diff --git a/tests/components/__snapshots__/SideNavLink.test.tsx.snap b/tests/components/__snapshots__/SideNavLink.test.tsx.snap
index 79d48d5b0..5bfc4a4cf 100644
--- a/tests/components/__snapshots__/SideNavLink.test.tsx.snap
+++ b/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"
diff --git a/tests/containers/__snapshots__/MainRoutes.test.tsx.snap b/tests/containers/__snapshots__/MainRoutes.test.tsx.snap
index 6ddb6e68f..fb3fc430c 100644
--- a/tests/containers/__snapshots__/MainRoutes.test.tsx.snap
+++ b/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"
diff --git a/tests/other-tests/__snapshots__/App.test.tsx.snap b/tests/other-tests/__snapshots__/App.test.tsx.snap
index fe12c0aba..27b4c25f8 100644
--- a/tests/other-tests/__snapshots__/App.test.tsx.snap
+++ b/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"
diff --git a/tests/other-tests/__snapshots__/Siderbar.test.tsx.snap b/tests/other-tests/__snapshots__/Siderbar.test.tsx.snap
index 536d31b54..570ae6948 100644
--- a/tests/other-tests/__snapshots__/Siderbar.test.tsx.snap
+++ b/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"
diff --git a/tests/pages/TraineeAttendance.test.tsx b/tests/pages/TraineeAttendance.test.tsx
index 922a58253..562c7c064 100644
--- a/tests/pages/TraineeAttendance.test.tsx
+++ b/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();
   });
 
-});
+});
\ No newline at end of file
diff --git a/tests/pages/__snapshots__/AdminLogin.test.tsx.snap b/tests/pages/__snapshots__/AdminLogin.test.tsx.snap
index 00ec8efe2..957b0f652 100644
--- a/tests/pages/__snapshots__/AdminLogin.test.tsx.snap
+++ b/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 "
diff --git a/tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap b/tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap
index d167b0c8e..9034f8cdd 100644
--- a/tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap
+++ b/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
diff --git a/tests/pages/__snapshots__/Home.test.tsx.snap b/tests/pages/__snapshots__/Home.test.tsx.snap
index cc9b67cac..6c4dd70a1 100644
--- a/tests/pages/__snapshots__/Home.test.tsx.snap
+++ b/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"
diff --git a/tests/pages/__snapshots__/Settings.test.tsx.snap b/tests/pages/__snapshots__/Settings.test.tsx.snap
index 4949917dc..29c8a2390 100644
--- a/tests/pages/__snapshots__/Settings.test.tsx.snap
+++ b/tests/pages/__snapshots__/Settings.test.tsx.snap
@@ -198,50 +198,32 @@ exports[`Settings page tests changes value after selecting another theme 1`] = `
             <h1
               className="font-bold dark:text-dark-text-fill"
             >
-              Privacy and Security
+              Two-factor authentication
             </h1>
             <p
               className="text-sm text-gray-600 dark:text-dark-text-fill"
             >
-              Privacy and Security
+              Get extra security by receiving a code on your email
             </p>
           </div>
-          <a
-            className="ml-auto mt-2 text-xs md:text-base text-gray-600 dark:text-dark-text-fill"
-            href="/dashboard/settings#link"
-            onClick={[Function]}
-          >
-            <h4>
-              Change
-            </h4>
-          </a>
-        </li>
-        <li
-          className="flex items-center pt-2 pb-1"
-        >
-          <div
-            className="w-[33vw]"
-          >
-            <h1
-              className="font-bold dark:text-dark-text-fill"
-            >
-              Login Activity
-            </h1>
-            <p
-              className="text-sm text-gray-600 dark:text-dark-text-fill"
-            >
-              History of your login sessions
-            </p>
-          </div>
-          <a
-            className="ml-auto mt-2 text-xs md:text-base text-gray-600 dark:text-dark-text-fill"
-            href="/dashboard/settings#link"
+          <button
+            aria-checked={false}
+            className="ml-auto border  relative inline-flex h-6 w-12 items-center rounded-full"
+            data-headlessui-state=""
+            data-testid="2faChange"
+            disabled={false}
+            id="headlessui-switch-:r2:"
             onClick={[Function]}
+            onKeyPress={[Function]}
+            onKeyUp={[Function]}
+            role="switch"
+            tabIndex={0}
+            type="button"
           >
-            <h4>
-              View
-            </h4>
-          </a>
+            <span
+              className="bg-gray-300 translate-x-1 inline-block h-4 w-4 transform rounded-full"
+            />
+          </button>
         </li>
       </div>
     </div>
diff --git a/tests/pages/__snapshots__/SuperAdminDashboard.test.tsx.snap b/tests/pages/__snapshots__/SuperAdminDashboard.test.tsx.snap
index 261bcc9e3..d0e95db82 100644
--- a/tests/pages/__snapshots__/SuperAdminDashboard.test.tsx.snap
+++ b/tests/pages/__snapshots__/SuperAdminDashboard.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Super Admin Dashboard test  Should render SuperAdminDashboard 1`] = `
   className="flex flex-col gap-5 lg:gap-8 text-[.92rem] xmd:text-[.95rem]"
 >
   <div
-    className="flex flex-wrap justify-center gap-7 items-center xl:justify-between bg-tertiary dark:bg-dark-bg rounded-md px-9 py-10"
+    className="flex flex-wrap justify-center gap-7 items-center  bg-tertiary dark:bg-dark-bg rounded-md px-9 py-10"
   >
     <div
       className="h-[7rem] xmd:h-[7.6rem] w-[15rem] md:w-[17rem] lg:w-[18rem] flex flex-col items-center gap-2 bg-tertiary dark:bg-[#262627] py-4 xmd:py-4 px-6 shadow-[1px_4px_8px_-1px_rgba(0,0,0,0.4)] rounded-sm"
@@ -514,7 +514,7 @@ exports[`Super Admin Dashboard test  Should render SuperAdminDashboard 1`] = `
         </h2>
       </div>
       <div
-        className="flex flex-col gap-y-3"
+        className="flex flex-col gap-y-4"
       />
     </div>
     <div
diff --git a/tests/pages/__snapshots__/userRegister.test.tsx.snap b/tests/pages/__snapshots__/userRegister.test.tsx.snap
index e57b03b53..4f2b5f7ce 100644
--- a/tests/pages/__snapshots__/userRegister.test.tsx.snap
+++ b/tests/pages/__snapshots__/userRegister.test.tsx.snap
@@ -72,7 +72,7 @@ exports[`TraineeRatingDashboard Tests Renders TraineeRatingDashboard 1`] = `
                 className="text-gray-400 border border-primary py-2 dark:bg-dark-bg rounded outline-none px-5 font-sans text-xs w-full h-[38px] "
                 data-placeholder="Date of birth"
                 id="date-placeholder"
-                max="2024-11-14"
+                max="2024-11-19"
                 name="dateOfBirth"
                 onBlur={[Function]}
                 onChange={[Function]}