diff --git a/matrixgw_frontend/src/widgets/dashboard/BaseAuthenticatedPage.tsx b/matrixgw_frontend/src/widgets/dashboard/BaseAuthenticatedPage.tsx index 0cbee66..886b8dc 100644 --- a/matrixgw_frontend/src/widgets/dashboard/BaseAuthenticatedPage.tsx +++ b/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"; diff --git a/matrixgw_frontend/src/widgets/dashboard/DashboardSidebar.tsx b/matrixgw_frontend/src/widgets/dashboard/DashboardSidebar.tsx index 7e2ac26..562c496 100644 --- a/matrixgw_frontend/src/widgets/dashboard/DashboardSidebar.tsx +++ b/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 = - isOverSmViewport && (!disableCollapsibleSidebar || isOverMdViewport); + const hasDrawerTransitions = isOverSmViewport && 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({ } href="/" + mini={viewport === "desktop"} /> } href="/matrix_link" + mini={viewport === "desktop"} /> } href="/tokens" + mini={viewport === "desktop"} /> } href="/wsdebug" + mini={viewport === "desktop"} /> ), [ - mini, + expanded, hasDrawerTransitions, isFullyExpanded, user.info.matrix_account_connected, @@ -136,8 +135,14 @@ export default function DashboardSidebar({ ); const getDrawerSharedSx = React.useCallback( - (isTemporary: boolean) => { - const drawerWidth = mini ? MINI_DRAWER_WIDTH : DRAWER_WIDTH; + (isTemporary: boolean, desktop?: boolean) => { + 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 ( @@ -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")} diff --git a/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarContext.tsx b/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarContext.tsx index 751b63b..ef1e8ee 100644 --- a/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarContext.tsx +++ b/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); diff --git a/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarPageItem.tsx b/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarPageItem.tsx index 5d32561..ef83b58 100644 --- a/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarPageItem.tsx +++ b/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 { - onPageItemClick, - mini = false, - fullyExpanded = true, - } = sidebarContext; + const { onPageItemClick, fullyExpanded = true } = sidebarContext; const hasExternalHref = href ? href.startsWith("http://") || href.startsWith("https://")