From 8ec0e5574e0fc7058406642d425d07e5633cf245 Mon Sep 17 00:00:00 2001
From: drler0 <jonathan.doctolero7@gmail.com>
Date: Thu, 21 Nov 2024 13:48:41 -0800
Subject: [PATCH 1/3] Closes sidebar when menu item is clicked

---
 client/src/components/Sidebar/Sidebar.jsx           | 13 +++++++++++--
 client/src/components/Sidebar/SidebarNavSection.jsx |  9 ++++++---
 client/src/stories/Header/Header.jsx                |  4 ++--
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Sidebar/Sidebar.jsx b/client/src/components/Sidebar/Sidebar.jsx
index 1f132be4..5456bc2a 100644
--- a/client/src/components/Sidebar/Sidebar.jsx
+++ b/client/src/components/Sidebar/Sidebar.jsx
@@ -11,6 +11,8 @@ import {
   IconSpeakerphone,
   IconSquareArrowRight,
 } from '@tabler/icons-react';
+import PropTypes from 'prop-types';
+
 
 import { SidebarNavSection, SidebarLink } from './SidebarNavSection';
 
@@ -61,10 +63,14 @@ const sections = [
   },
 ];
 
+const SidebarProps = {
+  toggleSidebar: PropTypes.func,
+};
+
 /**
  * Collapsible sidebar
  */
-export function Sidebar() {
+export function Sidebar({toggleSidebar}) {
   return (
     <nav className={classes.navbar}>
       <Group align="center" className={classes.title}>
@@ -84,9 +90,10 @@ export function Sidebar() {
                 {...item}
                 key={`section_${item.label}`}
                 initiallyOpened
+                toggleSidebar={toggleSidebar}
               />
             ) : (
-              <SidebarLink {...item} key={`header_${item.label}`} />
+              <SidebarLink toggleSidebar={toggleSidebar} {...item} key={`header_${item.label}`} />
             );
           })}
         </div>
@@ -96,6 +103,8 @@ export function Sidebar() {
   );
 }
 
+Sidebar.propTypes = SidebarProps;
+
 /**
  *
  */
diff --git a/client/src/components/Sidebar/SidebarNavSection.jsx b/client/src/components/Sidebar/SidebarNavSection.jsx
index 0c091377..9c14aaf1 100644
--- a/client/src/components/Sidebar/SidebarNavSection.jsx
+++ b/client/src/components/Sidebar/SidebarNavSection.jsx
@@ -16,6 +16,7 @@ const SidebarNavSectionProps = {
       label: PropTypes.string.isRequired,
     }),
   ),
+  toggleSidebar: PropTypes.func
 };
 /**
  * Sidebar section of sublinks with a collapsible accordion header
@@ -26,6 +27,7 @@ export function SidebarNavSection({
   label,
   initiallyOpened = false,
   links = [],
+  toggleSidebar
 }) {
   const [opened, setOpened] = useState(initiallyOpened);
 
@@ -48,7 +50,7 @@ export function SidebarNavSection({
       <Collapse in={opened} className={classes.section}>
         {links.map((link) => (
           <div className={classes.sublink} key={link.label}>
-            <SidebarLink {...link} />
+            <SidebarLink toggleSidebar={toggleSidebar} {...link}  />
           </div>
         ))}
       </Collapse>
@@ -63,17 +65,18 @@ const SidebarLinkProps = {
   href: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   target: PropTypes.string,
+  toggleSidebar: PropTypes.func
 };
 
 /**
  * Navigation link for sidebar
  * @param {PropTypes.InferProps<typeof SidebarLinkProps>} props
  */
-export function SidebarLink({ icon, href, label, target = '_self' }) {
+export function SidebarLink({ icon, href, label, target = '_self', toggleSidebar }) {
   return (
     <div className={classes.sublink}>
       <div>{icon}</div>
-      <Text component={Link} className={classes.link} to={href} target={target}>
+      <Text onClick={toggleSidebar} component={Link} className={classes.link} to={href} target={target}>
         {label}
       </Text>
     </div>
diff --git a/client/src/stories/Header/Header.jsx b/client/src/stories/Header/Header.jsx
index 8d7a8b1b..935daaa7 100644
--- a/client/src/stories/Header/Header.jsx
+++ b/client/src/stories/Header/Header.jsx
@@ -9,7 +9,7 @@ import {
   Drawer,
   rem,
 } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDidUpdate, useDisclosure } from '@mantine/hooks';
 
 import classes from './header.module.css';
 import { Sidebar } from '../../components/Sidebar/Sidebar';
@@ -59,7 +59,7 @@ export function Header({ user = null }) {
           mx="-md"
           scrollbars="y"
         >
-          <Sidebar />
+          <Sidebar toggleSidebar={toggleDrawer}/>
         </ScrollArea>
       </Drawer>
     </Box>

From 1f3428184515460de1fdad2a9abb8e08fc3e1b9c Mon Sep 17 00:00:00 2001
From: drler0 <jonathan.doctolero7@gmail.com>
Date: Thu, 21 Nov 2024 17:34:20 -0800
Subject: [PATCH 2/3] Ran Prettier Formatting

---
 client/src/components/Sidebar/Sidebar.jsx     |  9 ++++---
 .../components/Sidebar/SidebarNavSection.jsx  | 24 ++++++++++++++-----
 client/src/stories/Header/Header.jsx          |  2 +-
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Sidebar/Sidebar.jsx b/client/src/components/Sidebar/Sidebar.jsx
index 5456bc2a..07a004a9 100644
--- a/client/src/components/Sidebar/Sidebar.jsx
+++ b/client/src/components/Sidebar/Sidebar.jsx
@@ -13,7 +13,6 @@ import {
 } from '@tabler/icons-react';
 import PropTypes from 'prop-types';
 
-
 import { SidebarNavSection, SidebarLink } from './SidebarNavSection';
 
 import classes from './sidebar.module.css';
@@ -70,7 +69,7 @@ const SidebarProps = {
 /**
  * Collapsible sidebar
  */
-export function Sidebar({toggleSidebar}) {
+export function Sidebar({ toggleSidebar }) {
   return (
     <nav className={classes.navbar}>
       <Group align="center" className={classes.title}>
@@ -93,7 +92,11 @@ export function Sidebar({toggleSidebar}) {
                 toggleSidebar={toggleSidebar}
               />
             ) : (
-              <SidebarLink toggleSidebar={toggleSidebar} {...item} key={`header_${item.label}`} />
+              <SidebarLink
+                toggleSidebar={toggleSidebar}
+                {...item}
+                key={`header_${item.label}`}
+              />
             );
           })}
         </div>
diff --git a/client/src/components/Sidebar/SidebarNavSection.jsx b/client/src/components/Sidebar/SidebarNavSection.jsx
index 9c14aaf1..2d36138f 100644
--- a/client/src/components/Sidebar/SidebarNavSection.jsx
+++ b/client/src/components/Sidebar/SidebarNavSection.jsx
@@ -16,7 +16,7 @@ const SidebarNavSectionProps = {
       label: PropTypes.string.isRequired,
     }),
   ),
-  toggleSidebar: PropTypes.func
+  toggleSidebar: PropTypes.func,
 };
 /**
  * Sidebar section of sublinks with a collapsible accordion header
@@ -27,7 +27,7 @@ export function SidebarNavSection({
   label,
   initiallyOpened = false,
   links = [],
-  toggleSidebar
+  toggleSidebar,
 }) {
   const [opened, setOpened] = useState(initiallyOpened);
 
@@ -50,7 +50,7 @@ export function SidebarNavSection({
       <Collapse in={opened} className={classes.section}>
         {links.map((link) => (
           <div className={classes.sublink} key={link.label}>
-            <SidebarLink toggleSidebar={toggleSidebar} {...link}  />
+            <SidebarLink toggleSidebar={toggleSidebar} {...link} />
           </div>
         ))}
       </Collapse>
@@ -65,18 +65,30 @@ const SidebarLinkProps = {
   href: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   target: PropTypes.string,
-  toggleSidebar: PropTypes.func
+  toggleSidebar: PropTypes.func,
 };
 
 /**
  * Navigation link for sidebar
  * @param {PropTypes.InferProps<typeof SidebarLinkProps>} props
  */
-export function SidebarLink({ icon, href, label, target = '_self', toggleSidebar }) {
+export function SidebarLink({
+  icon,
+  href,
+  label,
+  target = '_self',
+  toggleSidebar,
+}) {
   return (
     <div className={classes.sublink}>
       <div>{icon}</div>
-      <Text onClick={toggleSidebar} component={Link} className={classes.link} to={href} target={target}>
+      <Text
+        onClick={toggleSidebar}
+        component={Link}
+        className={classes.link}
+        to={href}
+        target={target}
+      >
         {label}
       </Text>
     </div>
diff --git a/client/src/stories/Header/Header.jsx b/client/src/stories/Header/Header.jsx
index 935daaa7..717c1ca2 100644
--- a/client/src/stories/Header/Header.jsx
+++ b/client/src/stories/Header/Header.jsx
@@ -59,7 +59,7 @@ export function Header({ user = null }) {
           mx="-md"
           scrollbars="y"
         >
-          <Sidebar toggleSidebar={toggleDrawer}/>
+          <Sidebar toggleSidebar={toggleDrawer} />
         </ScrollArea>
       </Drawer>
     </Box>

From 6ae238b606eb5550c72053bb58b7756996518c96 Mon Sep 17 00:00:00 2001
From: drler0 <jonathan.doctolero7@gmail.com>
Date: Thu, 21 Nov 2024 17:43:21 -0800
Subject: [PATCH 3/3] Fix format and lint errors

---
 client/src/components/Sidebar/Sidebar.jsx | 1 +
 client/src/stories/Header/Header.jsx      | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Sidebar/Sidebar.jsx b/client/src/components/Sidebar/Sidebar.jsx
index 07a004a9..30f25e1c 100644
--- a/client/src/components/Sidebar/Sidebar.jsx
+++ b/client/src/components/Sidebar/Sidebar.jsx
@@ -68,6 +68,7 @@ const SidebarProps = {
 
 /**
  * Collapsible sidebar
+ * @param {PropTypes.InferProps<typeof SidebarProps>} props
  */
 export function Sidebar({ toggleSidebar }) {
   return (
diff --git a/client/src/stories/Header/Header.jsx b/client/src/stories/Header/Header.jsx
index 717c1ca2..45eaed40 100644
--- a/client/src/stories/Header/Header.jsx
+++ b/client/src/stories/Header/Header.jsx
@@ -9,7 +9,7 @@ import {
   Drawer,
   rem,
 } from '@mantine/core';
-import { useDidUpdate, useDisclosure } from '@mantine/hooks';
+import { useDisclosure } from '@mantine/hooks';
 
 import classes from './header.module.css';
 import { Sidebar } from '../../components/Sidebar/Sidebar';