Closes sidebar when menu item is clicked

client/src/components/Sidebar/Sidebar.jsx

@@ -11,6 +11,7 @@ import {
   IconSpeakerphone,
   IconSquareArrowRight,
 } from '@tabler/icons-react';
+import PropTypes from 'prop-types';
 
 import { SidebarNavSection, SidebarLink } from './SidebarNavSection';
 
@@ -61,10 +62,15 @@ const sections = [
   },
 ];
 
+const SidebarProps = {
+  toggleSidebar: PropTypes.func,
+};
+
 /**
  * Collapsible sidebar
+ * @param {PropTypes.InferProps<typeof SidebarProps>} props
  */
-export function Sidebar() {
+export function Sidebar({ toggleSidebar }) {
   return (
     <nav className={classes.navbar}>
       <Group align="center" className={classes.title}>
@@ -84,9 +90,14 @@ 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 +107,8 @@ export function Sidebar() {
   );
 }
 
+Sidebar.propTypes = SidebarProps;
+
 /**
  *
  */

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,30 @@ 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>

client/src/stories/Header/Header.jsx

@@ -59,7 +59,7 @@ export function Header({ user = null }) {
           mx="-md"
           scrollbars="y"
         >
-          <Sidebar />
+          <Sidebar toggleSidebar={toggleDrawer} />
         </ScrollArea>
       </Drawer>
     </Box>