Hide menu by default on desktop

matrixgw_frontend/src/widgets/dashboard/BaseAuthenticatedPage.tsx

@@ -1,7 +1,6 @@
-import { AppBar, Button } from "@mui/material";
+import { Button } from "@mui/material";
 import Box from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
-import Toolbar from "@mui/material/Toolbar";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import * as React from "react";
 import { Outlet, useNavigate } from "react-router";

matrixgw_frontend/src/widgets/dashboard/DashboardSidebar.tsx

@@ -3,7 +3,6 @@ import Icon from "@mdi/react";
 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 useMediaQuery from "@mui/material/useMediaQuery";
@@ -28,7 +27,6 @@ export interface DashboardSidebarProps {
 export default function DashboardSidebar({
   expanded = true,
   setExpanded,
-  disableCollapsibleSidebar = false,
   container,
 }: DashboardSidebarProps) {
   const theme = useTheme();
@@ -53,8 +51,6 @@ export default function DashboardSidebar({
     return () => {};
   }, [expanded, theme.transitions.duration.enteringScreen]);
 
-  const mini = !disableCollapsibleSidebar && !expanded;
-
   const handleSetSidebarExpanded = React.useCallback(
     (newExpanded: boolean) => () => {
       setExpanded(newExpanded);
@@ -66,10 +62,9 @@ export default function DashboardSidebar({
     if (!isOverSmViewport) {
       setExpanded(false);
     }
-  }, [mini, setExpanded, isOverSmViewport]);
+  }, [expanded, setExpanded, isOverSmViewport]);
 
-  const hasDrawerTransitions =
+  const hasDrawerTransitions = isOverSmViewport && isOverMdViewport;
-    isOverSmViewport && (!disableCollapsibleSidebar || isOverMdViewport);
 
   const getDrawerContent = React.useCallback(
     (viewport: "phone" | "tablet" | "desktop") => (
@@ -83,9 +78,9 @@ export default function DashboardSidebar({
             flexDirection: "column",
             justifyContent: "space-between",
             overflow: "auto",
-            scrollbarGutter: mini ? "stable" : "auto",
+            scrollbarGutter: !expanded ? "stable" : "auto",
             overflowX: "hidden",
-            pt: !mini ? 0 : 2,
+            pt: expanded ? 0 : 2,
             paddingTop: 0,
             ...(hasDrawerTransitions
               ? getDrawerSxTransitionMixin(isFullyExpanded, "padding")
@@ -95,9 +90,9 @@ export default function DashboardSidebar({
           <List
             dense
             sx={{
-              padding: mini ? 0 : 0.5,
+              padding: !expanded ? 0 : 0.5,
               mb: 4,
-              width: mini ? MINI_DRAWER_WIDTH : "auto",
+              width: !expanded ? MINI_DRAWER_WIDTH : "auto",
             }}
           >
             <DashboardSidebarPageItem
@@ -105,30 +100,34 @@ export default function DashboardSidebar({
               title="Messages"
               icon={<Icon path={mdiForum} size={"1.5em"} />}
               href="/"
+              mini={viewport === "desktop"}
             />
             <DashboardSidebarDividerItem />
             <DashboardSidebarPageItem
               title="Matrix link"
               icon={<Icon path={mdiLinkLock} size={"1.5em"} />}
               href="/matrix_link"
+              mini={viewport === "desktop"}
             />
             <DashboardSidebarPageItem
               title="API tokens"
               icon={<Icon path={mdiKeyVariant} size={"1.5em"} />}
               href="/tokens"
+              mini={viewport === "desktop"}
             />
             <DashboardSidebarPageItem
               disabled={!user.info.matrix_account_connected}
               title="WS Debug"
               icon={<Icon path={mdiBug} size={"1.5em"} />}
               href="/wsdebug"
+              mini={viewport === "desktop"}
             />
           </List>
         </Box>
       </React.Fragment>
     ),
     [
-      mini,
+      expanded,
       hasDrawerTransitions,
       isFullyExpanded,
       user.info.matrix_account_connected,
@@ -136,8 +135,14 @@ export default function DashboardSidebar({
   );
 
   const getDrawerSharedSx = React.useCallback(
-    (isTemporary: boolean) => {
+    (isTemporary: boolean, desktop?: boolean) => {
-      const drawerWidth = mini ? MINI_DRAWER_WIDTH : DRAWER_WIDTH;
+      const drawerWidth = desktop
+        ? expanded
+          ? MINI_DRAWER_WIDTH
+          : 0
+        : !expanded
+        ? MINI_DRAWER_WIDTH
+        : DRAWER_WIDTH;
 
       return {
         displayPrint: "none",
@@ -154,17 +159,16 @@ export default function DashboardSidebar({
         },
       };
     },
-    [expanded, mini]
+    [expanded, !expanded]
   );
 
   const sidebarContextValue = React.useMemo(() => {
     return {
       onPageItemClick: handlePageItemClick,
-      mini,
       fullyExpanded: isFullyExpanded,
       hasDrawerTransitions,
     };
-  }, [handlePageItemClick, mini, isFullyExpanded, hasDrawerTransitions]);
+  }, [handlePageItemClick, !expanded, isFullyExpanded, hasDrawerTransitions]);
 
   return (
     <DashboardSidebarContext.Provider value={sidebarContextValue}>
@@ -179,7 +183,7 @@ export default function DashboardSidebar({
         sx={{
           display: {
             xs: "block",
-            sm: disableCollapsibleSidebar ? "block" : "none",
+            sm: "none",
             md: "none",
           },
           ...getDrawerSharedSx(true),
@@ -192,7 +196,7 @@ export default function DashboardSidebar({
         sx={{
           display: {
             xs: "none",
-            sm: disableCollapsibleSidebar ? "none" : "block",
+            sm: "block",
             md: "none",
           },
           ...getDrawerSharedSx(false),
@@ -204,7 +208,7 @@ export default function DashboardSidebar({
         variant="permanent"
         sx={{
           display: { xs: "none", md: "block" },
-          ...getDrawerSharedSx(false),
+          ...getDrawerSharedSx(false, true),
         }}
       >
         {getDrawerContent("desktop")}

matrixgw_frontend/src/widgets/dashboard/DashboardSidebarContext.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 
 const DashboardSidebarContext = React.createContext<{
   onPageItemClick: () => void;
-  mini: boolean;
   fullyExpanded: boolean;
   hasDrawerTransitions: boolean;
 } | null>(null);

matrixgw_frontend/src/widgets/dashboard/DashboardSidebarPageItem.tsx

@@ -17,6 +17,7 @@ export interface DashboardSidebarPageItemProps {
   href: string;
   action?: React.ReactNode;
   disabled?: boolean;
+  mini?: boolean;
 }
 
 export default function DashboardSidebarPageItem({
@@ -25,6 +26,7 @@ export default function DashboardSidebarPageItem({
   href,
   action,
   disabled = false,
+  mini = false,
 }: DashboardSidebarPageItemProps) {
   const { pathname } = useLocation();
 
@@ -32,11 +34,7 @@ export default function DashboardSidebarPageItem({
   if (!sidebarContext) {
     throw new Error("Sidebar context was used without a provider.");
   }
-  const {
+  const { onPageItemClick, fullyExpanded = true } = sidebarContext;
-    onPageItemClick,
-    mini = false,
-    fullyExpanded = true,
-  } = sidebarContext;
 
   const hasExternalHref = href
     ? href.startsWith("http://") || href.startsWith("https://")