@etsoo/toolpad
Version:
Dashboard framework extention based on Toolpad Core
193 lines (192 loc) • 11 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import MuiAppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
import IconButton from "@mui/material/IconButton";
import Stack from "@mui/material/Stack";
import Toolbar from "@mui/material/Toolbar";
import Tooltip from "@mui/material/Tooltip";
import useMediaQuery from "@mui/material/useMediaQuery";
import MenuIcon from "@mui/icons-material/Menu";
import MenuOpenIcon from "@mui/icons-material/MenuOpen";
import { NavigationContext, WindowContext } from "../shared/context";
import { Account } from "../Account";
import { DashboardSidebarSubNavigation } from "./DashboardSidebarSubNavigation";
import { ToolbarActions } from "./ToolbarActions";
import { ThemeSwitcher } from "./ThemeSwitcher";
import { getDrawerSxTransitionMixin, getDrawerWidthTransitionMixin } from "./utils";
import { TitleBar } from "./TitleBar";
import { useLocaleText } from "../shared/locales/LocaleContext";
import { useTheme } from "@mui/material/styles";
/**
*
* Demos:
*
* - [Dashboard Layout](https://mui.com/toolpad/core/react-dashboard-layout/)
*
* API:
*
* - [DashboardLayout API](https://mui.com/toolpad/core/api/dashboard-layout)
*/
function DashboardLayout(props) {
const { children, disableCollapsibleSidebar = false, defaultSidebarCollapsed = false, hideNavigation = false, showThemeSwitcher = false, sidebarExpandedWidth = 320, slots, slotProps, sx } = props;
const theme = useTheme();
const navigation = React.useContext(NavigationContext);
const appWindow = React.useContext(WindowContext);
const localeText = useLocaleText();
const [isDesktopNavigationExpanded, setIsDesktopNavigationExpanded] = React.useState(!defaultSidebarCollapsed);
const [isMobileNavigationExpanded, setIsMobileNavigationExpanded] = React.useState(false);
const isUnderMdViewport = useMediaQuery(theme.breakpoints.down("md"), appWindow && {
matchMedia: appWindow.matchMedia
});
const isOverSmViewport = useMediaQuery(theme.breakpoints.up("sm"), appWindow && {
matchMedia: appWindow.matchMedia
});
const isNavigationExpanded = isUnderMdViewport
? isMobileNavigationExpanded
: isDesktopNavigationExpanded;
const setIsNavigationExpanded = React.useCallback((newExpanded) => {
if (isUnderMdViewport) {
setIsMobileNavigationExpanded(newExpanded);
}
else {
setIsDesktopNavigationExpanded(newExpanded);
}
}, [isUnderMdViewport]);
const [isNavigationFullyExpanded, setIsNavigationFullyExpanded] = React.useState(isNavigationExpanded);
React.useEffect(() => {
if (isNavigationExpanded) {
const drawerWidthTransitionTimeout = setTimeout(() => {
setIsNavigationFullyExpanded(true);
}, theme.transitions.duration.enteringScreen);
return () => clearTimeout(drawerWidthTransitionTimeout);
}
setIsNavigationFullyExpanded(false);
return () => { };
}, [isNavigationExpanded, theme]);
const selectedItemIdRef = React.useRef("");
const handleSetNavigationExpanded = React.useCallback((newExpanded) => () => {
setIsNavigationExpanded(newExpanded);
}, [setIsNavigationExpanded]);
const toggleNavigationExpanded = React.useCallback(() => {
setIsNavigationExpanded(!isNavigationExpanded);
}, [isNavigationExpanded, setIsNavigationExpanded]);
const handleNavigationLinkClick = React.useCallback(() => {
selectedItemIdRef.current = "";
setIsMobileNavigationExpanded(false);
}, [setIsMobileNavigationExpanded]);
// If useEffect was used, the reset would also happen on the client render after SSR which we don't need
React.useMemo(() => {
if (navigation) {
selectedItemIdRef.current = "";
}
}, [navigation]);
const isDesktopMini = !disableCollapsibleSidebar && !isDesktopNavigationExpanded;
const isMobileMini = !disableCollapsibleSidebar && !isMobileNavigationExpanded;
const getMenuIcon = React.useCallback((isExpanded) => {
return (_jsx(Tooltip, { title: isExpanded
? localeText.collapseMenuTitle
: localeText.expandMenuTitle, enterDelay: 1000, children: _jsx("div", { children: _jsx(IconButton, { "aria-label": isExpanded
? localeText.collapseNavMenuAriaLabel
: localeText.expandNavMenuAriaLabel, onClick: toggleNavigationExpanded, children: isExpanded ? _jsx(MenuOpenIcon, {}) : _jsx(MenuIcon, {}) }) }) }));
}, [toggleNavigationExpanded]);
const hasDrawerTransitions = isOverSmViewport && (disableCollapsibleSidebar || !isUnderMdViewport);
const TitlebarSlot = slots?.titlebar ?? TitleBar;
const ToolbarActionsSlot = slots?.toolbarActions ?? ToolbarActions;
const ToolbarAccountSlot = slots?.toolbarAccount ?? Account;
const SidebarFooterSlot = slots?.sidebarFooter ?? null;
const getDrawerContent = React.useCallback((isMini, viewport) => (_jsxs(React.Fragment, { children: [_jsx(Toolbar, {}), _jsxs(Box, { component: "nav", "aria-label": `${viewport.charAt(0).toUpperCase()}${viewport.slice(1)}`, sx: {
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
overflow: "auto",
pt: navigation[0]?.kind === "header" && !isMini ? 0 : 2,
...(hasDrawerTransitions
? getDrawerSxTransitionMixin(isNavigationFullyExpanded, "padding")
: {})
}, children: [_jsx(DashboardSidebarSubNavigation, { subNavigation: navigation, onLinkClick: handleNavigationLinkClick, isMini: isMini, isFullyExpanded: isNavigationFullyExpanded, hasDrawerTransitions: hasDrawerTransitions, selectedItemId: selectedItemIdRef.current }), SidebarFooterSlot ? (_jsx(SidebarFooterSlot, { mini: isMini, ...slotProps?.sidebarFooter })) : null] })] })), [
SidebarFooterSlot,
handleNavigationLinkClick,
hasDrawerTransitions,
isNavigationFullyExpanded,
navigation,
slotProps?.sidebarFooter
]);
const getDrawerSharedSx = React.useCallback((isMini, isTemporary) => {
const drawerWidth = isMini ? 64 : sidebarExpandedWidth;
return {
width: drawerWidth,
flexShrink: 0,
...getDrawerWidthTransitionMixin(isNavigationExpanded),
...(isTemporary ? { position: "absolute" } : {}),
[`& .MuiDrawer-paper`]: {
position: "absolute",
width: drawerWidth,
boxSizing: "border-box",
backgroundImage: "none",
...getDrawerWidthTransitionMixin(isNavigationExpanded)
}
};
}, [isNavigationExpanded, sidebarExpandedWidth]);
const layoutRef = React.useRef(null);
return (_jsxs(Box, { ref: layoutRef, sx: {
position: "relative",
display: "flex",
overflow: "hidden",
height: "100vh",
width: "100vw",
...sx
}, children: [_jsx(MuiAppBar, { color: "inherit", position: "absolute", sx: (theme) => ({
borderWidth: 0,
borderBottomWidth: 1,
borderStyle: "solid",
borderColor: theme.palette.divider,
boxShadow: "none",
zIndex: theme.zIndex.drawer + 1
}), children: _jsxs(Toolbar, { sx: { backgroundColor: "inherit", mx: { xs: -0.75, sm: -1.5 } }, children: [!hideNavigation ? (_jsxs(React.Fragment, { children: [_jsx(Box, { sx: {
mr: { sm: disableCollapsibleSidebar ? 0 : 1 },
display: { md: "none" }
}, children: getMenuIcon(isMobileNavigationExpanded) }), _jsx(Box, { sx: {
display: {
xs: "none",
md: disableCollapsibleSidebar ? "none" : "block"
},
mr: disableCollapsibleSidebar ? 0 : 1
}, children: getMenuIcon(isDesktopNavigationExpanded) })] })) : null, _jsx(Box, { sx: {
position: { xs: "absolute", md: "static" },
left: { xs: "50%", md: "auto" },
transform: { xs: "translateX(-50%)", md: "none" }
}, children: _jsx(TitlebarSlot, { ...slotProps?.titlebar }) }), _jsx(Box, { sx: { flexGrow: 1 } }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(ToolbarActionsSlot, { ...slotProps?.toolbarActions }), showThemeSwitcher && _jsx(ThemeSwitcher, {}), _jsx(ToolbarAccountSlot, { ...slotProps?.toolbarAccount })] })] }) }), !hideNavigation ? (_jsxs(React.Fragment, { children: [_jsx(Drawer, { container: layoutRef.current, variant: "temporary", open: isMobileNavigationExpanded, onClose: handleSetNavigationExpanded(false), ModalProps: {
keepMounted: true // Better open performance on mobile.
}, sx: {
display: {
xs: "block",
sm: disableCollapsibleSidebar ? "block" : "none",
md: "none"
},
...getDrawerSharedSx(false, true)
}, children: getDrawerContent(false, "phone") }), _jsx(Drawer, { variant: "permanent", sx: {
display: {
xs: "none",
sm: disableCollapsibleSidebar ? "none" : "block",
md: "none"
},
...getDrawerSharedSx(isMobileMini, false)
}, children: getDrawerContent(isMobileMini, "tablet") }), _jsx(Drawer, { variant: "permanent", sx: {
display: { xs: "none", md: "block" },
...getDrawerSharedSx(isDesktopMini, false)
}, children: getDrawerContent(isDesktopMini, "desktop") })] })) : null, _jsxs(Box, { sx: {
display: "flex",
flexDirection: "column",
flex: 1
}, children: [_jsx(Toolbar, {}), _jsx(Box, { component: "main", sx: {
display: "flex",
flexDirection: "column",
flex: 1,
overflow: "auto"
}, children: children })] })] }));
}
export { DashboardLayout };