Fix: Inconsistent Use of Icons to Minimize Left Column Navbar (#1403)

- Implemented the same minimization method used in the main organization pages, ensuring a consistent user experience throughout the application. Signed-off-by: Akhilender <[email protected]>
PalisadoesFoundation · Jan 9, 2024 · 100ce7a · 100ce7a
1 parent 9e74d02
commit 100ce7a
Show file tree

Hide file tree

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

diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx
@@ -181,7 +181,7 @@ const leftDrawerEvent = ({
           </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/LeftDrawerEvent/LeftDrawerEventWrapper.module.css b/src/components/LeftDrawerEvent/LeftDrawerEventWrapper.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,30 +69,21 @@
   .expand {
     animation: none;
   }
+
+  .collapseSidebarButton {
+    display: none;
+  }
 }
 
 @media (max-width: 820px) {
   .pageContainer {
     padding: 1rem;
   }
-}
-
-@keyframes moveLeft {
-  from {
-    padding-left: calc(300px + 2rem + 1.5rem);
-  }
-
-  to {
-    padding-left: 1.5rem;
+  .mobileopenBtn {
+    display: block;
   }
-}
-
-@keyframes moveRight {
-  from {
-    padding-left: 1.5rem;
-  }
-
-  to {
-    padding-left: calc(300px + 2rem + 1.5rem);
+  .opendrawer,
+  .collapseSidebarButton {
+    display: none;
   }
 }
diff --git a/src/components/LeftDrawerEvent/LeftDrawerEventWrapper.test.tsx b/src/components/LeftDrawerEvent/LeftDrawerEventWrapper.test.tsx
@@ -96,5 +96,9 @@ describe('Testing Left Drawer Wrapper component for the Event Dashboard', () =>
     await waitFor(() =>
       expect(queryByText('Event Management')).toBeInTheDocument()
     );
+    // sets hideDrawer to true
+    fireEvent.click(getByTestId('menuBtn') as HTMLElement);
+    // sets hideDrawer to false
+    fireEvent.click(getByTestId('openMenu') as HTMLElement);
   });
 });
diff --git a/src/components/LeftDrawerEvent/LeftDrawerEventWrapper.tsx b/src/components/LeftDrawerEvent/LeftDrawerEventWrapper.tsx
@@ -21,15 +21,39 @@ export const LeftDrawerEventWrapper = (
   props: InterfacePropType
 ): JSX.Element => {
   const [hideDrawer, setHideDrawer] = useState<boolean | null>(null);
+  const toggleDrawerVisibility = (): void => {
+    setHideDrawer(!hideDrawer);
+  };
 
   return (
     <>
-      <LeftDrawerEvent
-        key={`${props.event?._id || 'loading'}EventWrapper`}
-        hideDrawer={hideDrawer}
-        setHideDrawer={setHideDrawer}
-        {...props}
-      />
+      {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}>
+        <LeftDrawerEvent
+          key={`${props.event?._id || 'loading'}EventWrapper`}
+          hideDrawer={hideDrawer}
+          setHideDrawer={setHideDrawer}
+          {...props}
+        />
+      </div>
 
       <div
         className={`${styles.pageContainer} ${
@@ -46,7 +70,7 @@ export const LeftDrawerEventWrapper = (
             <h2>Event Management</h2>
           </div>
           <Button
-            className="ms-2"
+            className={styles.mobileopenBtn}
             onClick={(): void => {
               setHideDrawer(!hideDrawer);
             }}