Closes sidebar when menu item is clicked

sfbrigade · Nov 21, 2024 · 8ec0e55 · 8ec0e55
1 parent 14b8ad5
commit 8ec0e55
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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>