close sidebar on click

client/src/components/design-elements/BasePage.tsx

@@ -10,14 +10,11 @@ interface BasePageProps extends StackProps {
   breadcrumbOverride?: string[];
 }
 
-export const BasePage: React.FC<BasePageProps> = ({
+export const BasePage = ({
   children,
   breadcrumbOverride,
   ...props
-}: {
-  children: React.ReactNode;
-  breadcrumbOverride?: string[];
-}) => {
+}: BasePageProps) => {
   const theme = useTheme();
   return (
     <Stack spacing={theme.spacing(10)} {...props}>
@@ -38,7 +35,7 @@ interface BasePageWithStatesProps extends StackProps {
   children: React.ReactNode;
 }
 
-export const BasePageWithStates: React.FC<BasePageWithStatesProps> = ({
+export const BasePageWithStates = ({
   loading,
   error,
   items,
@@ -94,9 +91,7 @@ const isEmpty = (items: any[]) => {
   return false;
 };
 
-export const MonitorBasePageWithStates: React.FC<
-  MonitorBasePageWithStatesProps
-> = ({
+export const MonitorBasePageWithStates = ({
   loading,
   error,
   items,

client/src/components/layouts/sidebar/index.tsx

@@ -53,8 +53,6 @@ export const SideBar = () => {
         backgroundColor: theme.palette.background.paper,
       }}
     >
-      {/* Sidebar collapse handled by Logo click */}
-
       <List
         component="nav"
         disablePadding
@@ -72,7 +70,12 @@ export const SideBar = () => {
               item={item}
               sidebarOpen={sideBarOpen}
               selected={selected}
-              onClick={() => navigate(`/${item.path}`)}
+              onClick={() => {
+                navigate(`/${item.path}`);
+                if (isSmall) {
+                  dispatch(setSidebarOpen(false));
+                }
+              }}
             />
           );
         })}
@@ -99,6 +102,9 @@ export const SideBar = () => {
                 } else {
                   navigate(`/${item.path}`);
                 }
+                if (isSmall) {
+                  dispatch(setSidebarOpen(false));
+                }
               }}
             />
           );