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://")