Simplify dashboard code

matrixgw_frontend/src/widgets/dashboard/BaseAuthenticatedPage.tsx

@@ -11,7 +11,7 @@ export default function BaseAuthenticatedPage(): React.ReactElement {
   const theme = useTheme();
 
   const [isDesktopNavigationExpanded, setIsDesktopNavigationExpanded] =
-    React.useState(true);
+    React.useState(false);
   const [isMobileNavigationExpanded, setIsMobileNavigationExpanded] =
     React.useState(false);
 

matrixgw_frontend/src/widgets/dashboard/DashboardSidebar.tsx

@@ -1,6 +1,5 @@
-import BarChartIcon from "@mui/icons-material/BarChart";
+import { mdiBug, mdiForum, mdiKeyVariant, mdiLinkLock } from "@mdi/js";
-import LayersIcon from "@mui/icons-material/Layers";
+import Icon from "@mdi/react";
-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";
@@ -9,7 +8,6 @@ import { useTheme } from "@mui/material/styles";
 import type {} from "@mui/material/themeCssVarsAugmentation";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import * as React from "react";
-import { useLocation } from "react-router";
 import DashboardSidebarContext from "./DashboardSidebarContext";
 import DashboardSidebarDividerItem from "./DashboardSidebarDividerItem";
 import DashboardSidebarPageItem from "./DashboardSidebarPageItem";
@@ -38,7 +36,6 @@ export default function DashboardSidebar({
   const isOverMdViewport = useMediaQuery(theme.breakpoints.up("md"));
 
   const [isFullyExpanded, setIsFullyExpanded] = React.useState(expanded);
-  const [isFullyCollapsed, setIsFullyCollapsed] = React.useState(!expanded);
 
   React.useEffect(() => {
     if (expanded) {
@@ -54,20 +51,6 @@ export default function DashboardSidebar({
     return () => {};
   }, [expanded, theme.transitions.duration.enteringScreen]);
 
-  React.useEffect(() => {
-    if (!expanded) {
-      const drawerWidthTransitionTimeout = setTimeout(() => {
-        setIsFullyCollapsed(true);
-      }, theme.transitions.duration.leavingScreen);
-
-      return () => clearTimeout(drawerWidthTransitionTimeout);
-    }
-
-    setIsFullyCollapsed(false);
-
-    return () => {};
-  }, [expanded, theme.transitions.duration.leavingScreen]);
-
   const mini = !disableCollapsibleSidebar && !expanded;
 
   const handleSetSidebarExpanded = React.useCallback(
@@ -116,23 +99,25 @@ export default function DashboardSidebar({
             }}
           >
             <DashboardSidebarPageItem
-              id="employees"
+              title="Messages"
-              title="Employees"
+              icon={<Icon path={mdiForum} size={"1.5em"} />}
-              icon={<PersonIcon />}
+              href="/"
-              href="/employees"
             />
             <DashboardSidebarDividerItem />
             <DashboardSidebarPageItem
-              id="reports"
+              title="Matrix link"
-              title="Reports"
+              icon={<Icon path={mdiLinkLock} size={"1.5em"} />}
-              icon={<BarChartIcon />}
+              href="/matrixlink"
-              href="/reports"
             />
             <DashboardSidebarPageItem
-              id="integrations"
+              title="API tokens"
-              title="Integrations"
+              icon={<Icon path={mdiKeyVariant} size={"1.5em"} />}
-              icon={<LayersIcon />}
+              href="/tokens"
-              href="/integrations"
+            />
+            <DashboardSidebarPageItem
+              title="WS Debug"
+              icon={<Icon path={mdiBug} size={"1.5em"} />}
+              href="/wsdebug"
             />
           </List>
         </Box>
@@ -168,16 +153,9 @@ export default function DashboardSidebar({
       onPageItemClick: handlePageItemClick,
       mini,
       fullyExpanded: isFullyExpanded,
-      fullyCollapsed: isFullyCollapsed,
       hasDrawerTransitions,
     };
-  }, [
+  }, [handlePageItemClick, mini, isFullyExpanded, hasDrawerTransitions]);
-    handlePageItemClick,
-    mini,
-    isFullyExpanded,
-    isFullyCollapsed,
-    hasDrawerTransitions,
-  ]);
 
   return (
     <DashboardSidebarContext.Provider value={sidebarContextValue}>

matrixgw_frontend/src/widgets/dashboard/DashboardSidebarContext.tsx

@@ -4,7 +4,6 @@ const DashboardSidebarContext = React.createContext<{
   onPageItemClick: () => void;
   mini: boolean;
   fullyExpanded: boolean;
-  fullyCollapsed: boolean;
   hasDrawerTransitions: boolean;
 } | null>(null);
 

matrixgw_frontend/src/widgets/dashboard/DashboardSidebarPageItem.tsx

@@ -12,7 +12,6 @@ import DashboardSidebarContext from "./DashboardSidebarContext";
 import { MINI_DRAWER_WIDTH } from "./constants";
 
 export interface DashboardSidebarPageItemProps {
-  id: string;
   title: string;
   icon?: React.ReactNode;
   href: string;
@@ -21,7 +20,6 @@ export interface DashboardSidebarPageItemProps {
 }
 
 export default function DashboardSidebarPageItem({
-  id,
   title,
   icon,
   href,
@@ -40,12 +38,6 @@ export default function DashboardSidebarPageItem({
     fullyExpanded = true,
   } = sidebarContext;
 
-  const handleClick = React.useCallback(() => {
-    if (onPageItemClick) {
-      onPageItemClick();
-    }
-  }, [onPageItemClick, id]);
-
   const hasExternalHref = href
     ? href.startsWith("http://") || href.startsWith("https://")
     : false;
@@ -56,7 +48,7 @@ export default function DashboardSidebarPageItem({
 
   return (
     <React.Fragment>
-      <ListItem disablePadding>
+      <ListItem disablePadding style={{ padding: "5px" }}>
         <ListItemButton
           selected={selected}
           disabled={disabled}
@@ -72,7 +64,7 @@ export default function DashboardSidebarPageItem({
                 }
               : {}),
             to: href,
-            onClick: handleClick,
+            onClick: onPageItemClick,
           }}
         >
           {icon || mini ? (