Merge pull request #8 from DeexithParand2k2/navbar-bug-fix

Toggle buttons when clicked in Left Sidebar #2 fixed
anand-harsh · Oct 22, 2023 · ac787f9 · ac787f9
2 parents c25ff42 + 20900c3
commit ac787f9
Showing 1 changed file with 40 additions and 42 deletions.
diff --git a/src/components/Layout/Header/Header.jsx b/src/components/Layout/Header/Header.jsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import { ColorModeSwitcher } from '../../../ColorModeSwitcher';
 import { RiMenu5Fill, RiLogoutBoxLine, RiDashboardFill } from 'react-icons/ri';
 import {
   Drawer,
-  DrawerHeader,
   VStack,
   HStack,
   useDisclosure,
@@ -14,51 +12,61 @@ import {
 } from '@chakra-ui/react';
 import { Link } from 'react-router-dom';
 
+// other file imports
 import './header.css';
+import { ColorModeSwitcher } from '../../../ColorModeSwitcher';
+
+/**
+ * Reusable Component for LinkButton in the sidebar
+ * 
+ * @param {string} url (default value = "/") - The url link that renders corresponding component
+ * @param {string} title (default value = "Home") - Text to display on LinkButton
+ * @param {function} closingHandler - Handler function to close sidebar on click
+ */
+const LinkButton = ({ url = '/', title = 'Home', closingHandler }) => (
+  <Link to={url} onClick={closingHandler}>
+    <Button variant={'ghost'}>{title}</Button>
+  </Link>
+);
 
+
+/**
+ * Header with Drawer and DarkMode Component
+ * 
+ * @returns {JSX.Element} Renders the header component 
+ */
 const Header = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const isAuthenticated = true;
+  const isAuthenticated = true; // Change this based on user authentication status
   const user = {
-    role: 'admin',
-  };
-
-  const logoutHandler = () => {
-    console.log('logout');
-    onClose();
+    role: 'admin', // Change this based on the user's role
   };
+
   return (
     <>
+      {/* Color mode switcher */}
       <ColorModeSwitcher className="switch" />
+
+      {/* Button to open the sidebar */}
       <Button className="option" onClick={onOpen} colorScheme={'yellow'}>
         <RiMenu5Fill />
       </Button>
+
+      {/* Sidebar (Drawer) */}
       <Drawer placement="left" isOpen={isOpen} onClose={onClose}>
         <DrawerOverlay />
         <DrawerContent>
-          {/* <DrawerHeader
-            className="leftSlide"
-            height={'3rem'}
-            borderBottomWidth={'1px'}
-          >
-            COURSE BUNDLER
-          </DrawerHeader> */}
           <DrawerBody>
             <VStack spacing={'4'} alignItems="flex-start">
-              <LinkButton url="/" title="Home" onClose={onClose} />
-              <LinkButton
-                url="/courses"
-                title="Browse All Courses"
-                onClose={onClose}
-              />
-              <LinkButton
-                url="/request"
-                title="Request A Course"
-                onClick={onClose}
-              />
-              <LinkButton url="/contact" title="Contact" onClose={onClose} />
-              <LinkButton url="/about" title="About" onClose={onClose} />
+
+              {/* LinkButtons in the sidebar */}
+              <LinkButton url="/" title="Home" closingHandler={onClose} />
+              <LinkButton url="/courses" title="Browse All Courses" closingHandler={onClose} />
+              <LinkButton url="/request" title="Request A Course" closingHandler={onClose} />
+              <LinkButton url="/contact" title="Contact" closingHandler={onClose} />
+              <LinkButton url="/about" title="About" closingHandler={onClose} />
 
+              {/* Profile, Logout, and Dashboard Button in sidebar */}
               <HStack
                 justifyContent={'space-evenly'}
                 position="absolute"
@@ -73,18 +81,14 @@ const Header = () => {
                           <Button colorScheme={'yellow'}>Profile</Button>
                         </Link>
                         <p>OR</p>
-
-                        <Button colorScheme={'yellow'} onClick={logoutHandler}>
-                          {' '}
-                          <RiLogoutBoxLine />
-                          Logout
+                        <Button colorScheme={'yellow'} onClick={onClose}>
+                          <RiLogoutBoxLine /> Logout
                         </Button>
                       </HStack>
                       {user && user.role === 'admin' && (
                         <Link onClick={onClose} to="/admin/dashboard">
                           <Button>
-                            <RiDashboardFill />
-                            Dashboard
+                            <RiDashboardFill /> Dashboard
                           </Button>
                         </Link>
                       )}
@@ -111,9 +115,3 @@ const Header = () => {
 };
 
 export default Header;
-
-const LinkButton = ({ url = '/', title = 'Home' }) => (
-  <Link to={url}>
-    <Button variant={'ghost'}>{title}</Button>
-  </Link>
-);