Improve sidebar

matrixgw_frontend/src/widgets/dashboard/DashboardSidebarPageItem.tsx

@@ -1,18 +1,13 @@
-import * as React from "react";
-import { type Theme, type SxProps } from "@mui/material/styles";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
-import Collapse from "@mui/material/Collapse";
-import Grow from "@mui/material/Grow";
 import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
-import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
 import type {} from "@mui/material/themeCssVarsAugmentation";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { Link } from "react-router";
+import * as React from "react";
+import { Link, matchPath, useLocation } from "react-router";
 import DashboardSidebarContext from "./DashboardSidebarContext";
 import { MINI_DRAWER_WIDTH } from "./constants";
 
@@ -22,11 +17,7 @@ export interface DashboardSidebarPageItemProps {
   icon?: React.ReactNode;
   href: string;
   action?: React.ReactNode;
-  defaultExpanded?: boolean;
-  expanded?: boolean;
-  selected?: boolean;
   disabled?: boolean;
-  nestedNavigation?: React.ReactNode;
 }
 
 export default function DashboardSidebarPageItem({
@@ -35,12 +26,10 @@ export default function DashboardSidebarPageItem({
   icon,
   href,
   action,
-  defaultExpanded = false,
-  expanded = defaultExpanded,
-  selected = false,
   disabled = false,
-  nestedNavigation,
 }: DashboardSidebarPageItemProps) {
+  const { pathname } = useLocation();
+
   const sidebarContext = React.useContext(DashboardSidebarContext);
   if (!sidebarContext) {
     throw new Error("Sidebar context was used without a provider.");
@@ -49,38 +38,13 @@ export default function DashboardSidebarPageItem({
     onPageItemClick,
     mini = false,
     fullyExpanded = true,
-    fullyCollapsed = false,
   } = sidebarContext;
 
-  const [isHovered, setIsHovered] = React.useState(false);
-
   const handleClick = React.useCallback(() => {
     if (onPageItemClick) {
-      onPageItemClick(id, !!nestedNavigation);
+      onPageItemClick();
     }
-  }, [onPageItemClick, id, nestedNavigation]);
-
-  let nestedNavigationCollapseSx: SxProps<Theme> = { display: "none" };
-  if (mini && fullyCollapsed) {
-    nestedNavigationCollapseSx = {
-      fontSize: 18,
-      position: "absolute",
-      top: "41.5%",
-      right: "2px",
-      transform: "translateY(-50%) rotate(-90deg)",
-    };
-  } else if (!mini && fullyExpanded) {
-    nestedNavigationCollapseSx = {
-      ml: 0.5,
-      fontSize: 20,
-      transform: `rotate(${expanded ? 0 : -90}deg)`,
-      transition: (theme: Theme) =>
-        theme.transitions.create("transform", {
-          easing: theme.transitions.easing.sharp,
-          duration: 100,
-        }),
-    };
-  }
+  }, [onPageItemClick, id]);
 
   const hasExternalHref = href
     ? href.startsWith("http://") || href.startsWith("https://")
@@ -88,61 +52,28 @@ export default function DashboardSidebarPageItem({
 
   const LinkComponent = hasExternalHref ? "a" : Link;
 
-  const miniNestedNavigationSidebarContextValue = React.useMemo(() => {
-    return {
-      onPageItemClick: onPageItemClick ?? (() => {}),
-      mini: false,
-      fullyExpanded: true,
-      fullyCollapsed: false,
-      hasDrawerTransitions: false,
-    };
-  }, [onPageItemClick]);
+  const selected = !!matchPath(href, pathname);
 
   return (
     <React.Fragment>
-      <ListItem
-        disablePadding
-        {...(nestedNavigation && mini
-          ? {
-              onMouseEnter: () => {
-                setIsHovered(true);
-              },
-              onMouseLeave: () => {
-                setIsHovered(false);
-              },
-            }
-          : {})}
-        sx={{
-          display: "block",
-          py: 0,
-          px: 1,
-          overflowX: "hidden",
-        }}
-      >
+      <ListItem disablePadding>
         <ListItemButton
           selected={selected}
           disabled={disabled}
           sx={{
             height: mini ? 50 : "auto",
           }}
-          {...(nestedNavigation && !mini
-            ? {
-                onClick: handleClick,
-              }
-            : {})}
-          {...(!nestedNavigation
-            ? {
-                LinkComponent,
-                ...(hasExternalHref
-                  ? {
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                    }
-                  : {}),
-                to: href,
-                onClick: handleClick,
-              }
-            : {})}
+          {...{
+            LinkComponent,
+            ...(hasExternalHref
+              ? {
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                }
+              : {}),
+            to: href,
+            onClick: handleClick,
+          }}
         >
           {icon || mini ? (
             <Box
@@ -212,42 +143,8 @@ export default function DashboardSidebarPageItem({
             />
           ) : null}
           {action && !mini && fullyExpanded ? action : null}
-          {nestedNavigation ? (
-            <ExpandMoreIcon sx={nestedNavigationCollapseSx} />
-          ) : null}
         </ListItemButton>
-        {nestedNavigation && mini ? (
-          <Grow in={isHovered}>
-            <Box
-              sx={{
-                position: "fixed",
-                left: MINI_DRAWER_WIDTH - 2,
-                pl: "6px",
-              }}
-            >
-              <Paper
-                elevation={8}
-                sx={{
-                  pt: 0.2,
-                  pb: 0.2,
-                  transform: "translateY(-50px)",
-                }}
-              >
-                <DashboardSidebarContext.Provider
-                  value={miniNestedNavigationSidebarContextValue}
-                >
-                  {nestedNavigation}
-                </DashboardSidebarContext.Provider>
-              </Paper>
-            </Box>
-          </Grow>
-        ) : null}
       </ListItem>
-      {nestedNavigation && !mini ? (
-        <Collapse in={expanded} timeout="auto" unmountOnExit>
-          {nestedNavigation}
-        </Collapse>
-      ) : null}
     </React.Fragment>
   );
 }