Change in hamburger icon and handling of left drawer (#1212)

* fix: left drawer of orgnization screen * fix: left drawer of superadmin screen * test coverage : adding unit tests for updated code in Organisation Screen * test coverage: adding unit tests for updated code on SuperAdminScreen * fix: overlapping with logout button
PalisadoesFoundation · Dec 21, 2023 · 0939510 · 0939510
1 parent 0d50c5d
commit 0939510
Show file tree

Hide file tree

Showing 10 changed files with 256 additions and 35 deletions.
diff --git a/src/components/LeftDrawer/LeftDrawer.module.css b/src/components/LeftDrawer/LeftDrawer.module.css
@@ -104,6 +104,10 @@
   text-transform: capitalize;
 }
 
+.logout {
+  margin-bottom: 50px;
+}
+
 @media (max-width: 1120px) {
   .leftDrawer {
     width: calc(250px + 2rem);
@@ -145,6 +149,10 @@
     z-index: 100;
     animation: openDrawer 0.6s ease-in-out;
   }
+
+  .logout {
+    margin-bottom: 1.5rem !important;
+  }
 }
 
 @keyframes goToLeftBigScreen {

diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -165,7 +165,7 @@ const leftDrawer = ({
 
           <Button
             variant="light"
-            className="mt-4 d-flex justify-content-start px-0 mb-2 w-100"
+            className={`mt-4 d-flex justify-content-start px-0 w-100 ${styles.logout}`}
             onClick={(): void => logout()}
             data-testid="logoutBtn"
           >

diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
@@ -148,6 +148,10 @@
   text-transform: capitalize;
 }
 
+.logout {
+  margin-bottom: 50px;
+}
+
 @media (max-width: 1120px) {
   .leftDrawer {
     width: calc(250px + 2rem);
@@ -189,6 +193,10 @@
     z-index: 100;
     animation: openDrawer 0.6s ease-in-out;
   }
+
+  .logout {
+    margin-bottom: 1.5rem;
+  }
 }
 
 @keyframes goToLeftBigScreen {

diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
@@ -212,7 +212,7 @@ const leftDrawerOrg = ({
           </button>
           <Button
             variant="light"
-            className="mt-4 d-flex justify-content-start px-0 mb-2 w-100"
+            className={`mt-4 d-flex justify-content-start px-0 w-100 ${styles.logout}`}
             onClick={(): void => logout()}
             data-testid="logoutBtn"
           >

diff --git a/src/components/OrganizationScreen/OrganizationScreen.module.css b/src/components/OrganizationScreen/OrganizationScreen.module.css
@@ -6,7 +6,7 @@
 }
 
 .expand {
-  padding-left: 1.5rem;
+  padding-left: 4rem;
   animation: moveLeft 0.5s ease-in-out;
 }
 
@@ -15,10 +15,47 @@
   animation: moveRight 0.5s ease-in-out;
 }
 
+.collapseSidebarButton {
+  position: fixed;
+  height: 40px;
+  bottom: 0;
+  z-index: 9999;
+  width: calc(300px + 2rem);
+  background-color: rgba(245, 245, 245, 0.7);
+  color: black;
+  border: none;
+  border-radius: 0px;
+}
+
+.collapseSidebarButton:hover,
+.opendrawer:hover {
+  opacity: 1;
+  color: black !important;
+}
+.opendrawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 100vh;
+  z-index: 9999;
+  background-color: rgba(245, 245, 245);
+  border: none;
+  border-radius: 0px;
+  margin-right: 20px;
+  color: black;
+}
+
+.mobileopenBtn {
+  display: none;
+}
 @media (max-width: 1120px) {
   .contract {
     padding-left: calc(250px + 2rem + 1.5rem);
   }
+  .collapseSidebarButton {
+    width: calc(250px + 2rem);
+  }
 }
 
 /* For tablets */
@@ -31,30 +68,21 @@
   .expand {
     animation: none;
   }
+
+  .collapseSidebarButton {
+    display: none;
+  }
 }
 
 @media (max-width: 820px) {
   .pageContainer {
     padding: 1rem;
   }
-}
-
-@keyframes moveLeft {
-  from {
-    padding-left: calc(300px + 2rem + 1.5rem);
+  .mobileopenBtn {
+    display: block;
   }
-
-  to {
-    padding-left: 1.5rem;
-  }
-}
-
-@keyframes moveRight {
-  from {
-    padding-left: 1.5rem;
-  }
-
-  to {
-    padding-left: calc(300px + 2rem + 1.5rem);
+  .opendrawer,
+  .collapseSidebarButton {
+    display: none;
   }
 }
diff --git a/src/components/OrganizationScreen/OrganizationScreen.test.tsx b/src/components/OrganizationScreen/OrganizationScreen.test.tsx
@@ -16,7 +16,22 @@ const props: InterfaceOrganizationScreenProps = {
   children: <div>Testing ...</div>,
 };
 
+type SetScreenSize = () => void;
+
 describe('Testing LeftDrawer in OrganizationScreen', () => {
+  const setTabletScreenSize: SetScreenSize = () => {
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 768, // Example: setting tablet width
+    });
+    Object.defineProperty(window, 'innerHeight', {
+      writable: true,
+      configurable: true,
+      value: 1024, // Example: setting tablet height
+    });
+    window.dispatchEvent(new Event('resize'));
+  };
   test('Testing LeftDrawer in page functionality', async () => {
     localStorage.setItem('UserType', 'SUPERADMIN');
 
@@ -34,6 +49,31 @@ describe('Testing LeftDrawer in OrganizationScreen', () => {
     // sets hideDrawer to true
     userEvent.click(screen.getByTestId('menuBtn'));
     // sets hideDrawer to false
-    userEvent.click(screen.getByTestId('menuBtn'));
+    userEvent.click(screen.getByTestId('openMenu'));
+  });
+
+  test('Testing expanding and closing on a tablet-sized screen', async () => {
+    localStorage.setItem('UserType', 'SUPERADMIN');
+
+    // Render the component with tablet-sized screen
+    render(
+      <MockedProvider addTypename={false}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationScreen {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    // Set the screen size to simulate a tablet
+    setTabletScreenSize();
+
+    // sets hideDrawer to true
+    userEvent.click(screen.getByTestId('menuBtnmobile'));
+    // sets hideDrawer to false
+    userEvent.click(screen.getByTestId('closeModalBtn'));
   });
 });
diff --git a/src/components/OrganizationScreen/OrganizationScreen.tsx b/src/components/OrganizationScreen/OrganizationScreen.tsx
@@ -24,15 +24,40 @@ const organizationScreen = ({
     configUrl: string;
   } = useSelector((state: RootState) => state.appRoutes);
   const { targets, configUrl } = appRoutes;
+
+  const toggleDrawerVisibility = (): void => {
+    setHideDrawer(!hideDrawer);
+  };
   return (
     <>
-      <LeftDrawerOrg
-        orgId={configUrl}
-        targets={targets}
-        screenName={screenName}
-        hideDrawer={hideDrawer}
-        setHideDrawer={setHideDrawer}
-      />
+      {hideDrawer ? (
+        <Button
+          className={styles.opendrawer}
+          onClick={toggleDrawerVisibility}
+          data-testid="openMenu"
+        >
+          <i className="fa fa-angle-double-right" aria-hidden="true"></i>
+        </Button>
+      ) : (
+        <Button
+          className={styles.collapseSidebarButton}
+          onClick={(): void => {
+            setHideDrawer(!hideDrawer);
+          }}
+          data-testid="menuBtn"
+        >
+          <i className="fa fa-angle-double-left" aria-hidden="true"></i>
+        </Button>
+      )}
+      <div className={styles.drawer}>
+        <LeftDrawerOrg
+          orgId={configUrl}
+          targets={targets}
+          screenName={screenName}
+          hideDrawer={hideDrawer}
+          setHideDrawer={setHideDrawer}
+        />
+      </div>
       <div
         className={`${styles.pageContainer} ${
           hideDrawer === null
@@ -48,11 +73,11 @@ const organizationScreen = ({
             <h2>{title}</h2>
           </div>
           <Button
-            className="ms-2"
+            className={styles.mobileopenBtn}
             onClick={(): void => {
               setHideDrawer(!hideDrawer);
             }}
-            data-testid="menuBtn"
+            data-testid="menuBtnmobile"
           >
             <MenuIcon fontSize="medium" />
           </Button>

diff --git a/src/components/SuperAdminScreen/SuperAdminScreen.module.css b/src/components/SuperAdminScreen/SuperAdminScreen.module.css
@@ -6,7 +6,7 @@
 }
 
 .expand {
-  padding-left: 1.5rem;
+  padding-left: 4rem;
   animation: moveLeft 0.5s ease-in-out;
 }
 
@@ -15,10 +15,48 @@
   animation: moveRight 0.5s ease-in-out;
 }
 
+.collapseSidebarButton {
+  position: fixed;
+  height: 40px;
+  bottom: 0;
+  z-index: 9999;
+  width: calc(300px + 2rem);
+  background-color: rgba(245, 245, 245, 0.7);
+  color: black;
+  border: none;
+  border-radius: 0px;
+}
+
+.collapseSidebarButton:hover,
+.opendrawer:hover {
+  opacity: 1;
+  color: black !important;
+}
+.opendrawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 100vh;
+  z-index: 9999;
+  background-color: rgba(245, 245, 245);
+  border: none;
+  border-radius: 0px;
+  margin-right: 20px;
+  color: black;
+}
+
+.mobileopenBtn {
+  display: none;
+}
+
 @media (max-width: 1120px) {
   .contract {
     padding-left: calc(250px + 2rem + 1.5rem);
   }
+  .collapseSidebarButton {
+    width: calc(250px + 2rem);
+  }
 }
 
 /* For tablets */
@@ -31,12 +69,24 @@
   .expand {
     animation: none;
   }
+
+  .collapseSidebarButton {
+    display: none;
+  }
 }
 
 @media (max-width: 820px) {
   .pageContainer {
     padding: 1rem;
   }
+
+  .mobileopenBtn {
+    display: block;
+  }
+  .opendrawer,
+  .collapseSidebarButton {
+    display: none;
+  }
 }
 
 @keyframes moveLeft {