Improve sidebar

matrixgw_frontend/src/widgets/dashboard/DashboardSidebar.tsx

@@ -1,21 +1,19 @@
-import * as React from "react";
-import { useTheme } from "@mui/material/styles";
-import useMediaQuery from "@mui/material/useMediaQuery";
+import BarChartIcon from "@mui/icons-material/BarChart";
+import LayersIcon from "@mui/icons-material/Layers";
+import PersonIcon from "@mui/icons-material/Person";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
 import List from "@mui/material/List";
 import Toolbar from "@mui/material/Toolbar";
+import { useTheme } from "@mui/material/styles";
 import type {} from "@mui/material/themeCssVarsAugmentation";
-import PersonIcon from "@mui/icons-material/Person";
-import BarChartIcon from "@mui/icons-material/BarChart";
-import DescriptionIcon from "@mui/icons-material/Description";
-import LayersIcon from "@mui/icons-material/Layers";
-import { matchPath, useLocation } from "react-router";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import * as React from "react";
+import { useLocation } from "react-router";
 import DashboardSidebarContext from "./DashboardSidebarContext";
-import { DRAWER_WIDTH, MINI_DRAWER_WIDTH } from "./constants";
-import DashboardSidebarPageItem from "./DashboardSidebarPageItem";
-import DashboardSidebarHeaderItem from "./DashboardSidebarHeaderItem";
 import DashboardSidebarDividerItem from "./DashboardSidebarDividerItem";
+import DashboardSidebarPageItem from "./DashboardSidebarPageItem";
+import { DRAWER_WIDTH, MINI_DRAWER_WIDTH } from "./constants";
 import {
   getDrawerSxTransitionMixin,
   getDrawerWidthTransitionMixin,
@@ -36,10 +34,6 @@ export default function DashboardSidebar({
 }: DashboardSidebarProps) {
   const theme = useTheme();
 
-  const { pathname } = useLocation();
-
-  const [expandedItemIds, setExpandedItemIds] = React.useState<string[]>([]);
-
   const isOverSmViewport = useMediaQuery(theme.breakpoints.up("sm"));
   const isOverMdViewport = useMediaQuery(theme.breakpoints.up("md"));
 
@@ -83,22 +77,11 @@ export default function DashboardSidebar({
     [setExpanded]
   );
 
-  const handlePageItemClick = React.useCallback(
-    (itemId: string, hasNestedNavigation: boolean) => {
-      if (hasNestedNavigation && !mini) {
-        setExpandedItemIds((previousValue) =>
-          previousValue.includes(itemId)
-            ? previousValue.filter(
-                (previousValueItemId) => previousValueItemId !== itemId
-              )
-            : [...previousValue, itemId]
-        );
-      } else if (!isOverSmViewport && !hasNestedNavigation) {
-        setExpanded(false);
-      }
-    },
-    [mini, setExpanded, isOverSmViewport]
-  );
+  const handlePageItemClick = React.useCallback(() => {
+    if (!isOverSmViewport) {
+      setExpanded(false);
+    }
+  }, [mini, setExpanded, isOverSmViewport]);
 
   const hasDrawerTransitions =
     isOverSmViewport && (!disableCollapsibleSidebar || isOverMdViewport);
@@ -132,67 +115,30 @@ export default function DashboardSidebar({
               width: mini ? MINI_DRAWER_WIDTH : "auto",
             }}
           >
-            <DashboardSidebarHeaderItem>Main items</DashboardSidebarHeaderItem>
             <DashboardSidebarPageItem
               id="employees"
               title="Employees"
               icon={<PersonIcon />}
               href="/employees"
-              selected={
-                !!matchPath("/employees/*", pathname) || pathname === "/"
-              }
             />
             <DashboardSidebarDividerItem />
-            <DashboardSidebarHeaderItem>
-              Example items
-            </DashboardSidebarHeaderItem>
             <DashboardSidebarPageItem
               id="reports"
               title="Reports"
               icon={<BarChartIcon />}
               href="/reports"
-              selected={!!matchPath("/reports", pathname)}
-              defaultExpanded={!!matchPath("/reports", pathname)}
-              expanded={expandedItemIds.includes("reports")}
-              nestedNavigation={
-                <List
-                  dense
-                  sx={{
-                    padding: 0,
-                    my: 1,
-                    pl: mini ? 0 : 1,
-                    minWidth: 240,
-                  }}
-                >
-                  <DashboardSidebarPageItem
-                    id="sales"
-                    title="Sales"
-                    icon={<DescriptionIcon />}
-                    href="/reports/sales"
-                    selected={!!matchPath("/reports/sales", pathname)}
-                  />
-                  <DashboardSidebarPageItem
-                    id="traffic"
-                    title="Traffic"
-                    icon={<DescriptionIcon />}
-                    href="/reports/traffic"
-                    selected={!!matchPath("/reports/traffic", pathname)}
-                  />
-                </List>
-              }
             />
             <DashboardSidebarPageItem
               id="integrations"
               title="Integrations"
               icon={<LayersIcon />}
               href="/integrations"
-              selected={!!matchPath("/integrations", pathname)}
             />
           </List>
         </Box>
       </React.Fragment>
     ),
-    [mini, hasDrawerTransitions, isFullyExpanded, expandedItemIds, pathname]
+    [mini, hasDrawerTransitions, isFullyExpanded]
   );
 
   const getDrawerSharedSx = React.useCallback(