diff --git a/matrixgw_frontend/src/widgets/dashboard/BaseAuthenticatedPage.tsx b/matrixgw_frontend/src/widgets/dashboard/BaseAuthenticatedPage.tsx index 7973152..ff3ee64 100644 --- a/matrixgw_frontend/src/widgets/dashboard/BaseAuthenticatedPage.tsx +++ b/matrixgw_frontend/src/widgets/dashboard/BaseAuthenticatedPage.tsx @@ -1,5 +1,3 @@ -import { mdiMessageTextFast } from "@mdi/js"; -import Icon from "@mdi/react"; import Box from "@mui/material/Box"; import { useTheme } from "@mui/material/styles"; import Toolbar from "@mui/material/Toolbar"; @@ -59,8 +57,6 @@ export default function BaseAuthenticatedPage(): React.ReactElement { }} > } - title="" menuOpen={isNavigationExpanded} onToggleMenu={handleToggleHeaderMenu} /> diff --git a/matrixgw_frontend/src/widgets/dashboard/DashboardHeader.tsx b/matrixgw_frontend/src/widgets/dashboard/DashboardHeader.tsx index 5c98db7..cf669b9 100644 --- a/matrixgw_frontend/src/widgets/dashboard/DashboardHeader.tsx +++ b/matrixgw_frontend/src/widgets/dashboard/DashboardHeader.tsx @@ -1,15 +1,17 @@ -import * as React from "react"; -import { styled, useTheme } from "@mui/material/styles"; -import Box from "@mui/material/Box"; +import { mdiMessageTextFast } from "@mdi/js"; +import Icon from "@mdi/react"; +import MenuIcon from "@mui/icons-material/Menu"; +import MenuOpenIcon from "@mui/icons-material/MenuOpen"; import MuiAppBar from "@mui/material/AppBar"; +import Box from "@mui/material/Box"; import IconButton from "@mui/material/IconButton"; +import Stack from "@mui/material/Stack"; +import { styled } from "@mui/material/styles"; import Toolbar from "@mui/material/Toolbar"; import Tooltip from "@mui/material/Tooltip"; import Typography from "@mui/material/Typography"; -import MenuIcon from "@mui/icons-material/Menu"; -import MenuOpenIcon from "@mui/icons-material/MenuOpen"; -import Stack from "@mui/material/Stack"; -import { Link } from "react-router"; +import * as React from "react"; +import { RouterLink } from "../RouterLink"; import ThemeSwitcher from "./ThemeSwitcher"; const AppBar = styled(MuiAppBar)(({ theme }) => ({ @@ -32,20 +34,14 @@ const LogoContainer = styled("div")({ }); export interface DashboardHeaderProps { - logo?: React.ReactNode; - title?: string; menuOpen: boolean; onToggleMenu: (open: boolean) => void; } export default function DashboardHeader({ - logo, - title, menuOpen, onToggleMenu, }: DashboardHeaderProps) { - const theme = useTheme(); - const handleMenuOpen = React.useCallback(() => { onToggleMenu(!menuOpen); }, [menuOpen, onToggleMenu]); @@ -60,7 +56,7 @@ export default function DashboardHeader({ title={`${ isExpanded ? collapseMenuActionText : expandMenuActionText } menu`} - enterDelay={1000} + enterDelay={200} >
- {getMenuIcon(menuOpen)} - + {getMenuIcon(menuOpen)} + - {logo ? {logo} : null} - {title ? ( - - {title} - - ) : null} + + + + + MatrixGW + - + ([]); - const isOverSmViewport = useMediaQuery(theme.breakpoints.up("sm")); const isOverMdViewport = useMediaQuery(theme.breakpoints.up("md")); @@ -83,22 +77,11 @@ export default function DashboardSidebar({ [setExpanded] ); - const handlePageItemClick = React.useCallback( - (itemId: string, hasNestedNavigation: boolean) => { - if (hasNestedNavigation && !mini) { - setExpandedItemIds((previousValue) => - previousValue.includes(itemId) - ? previousValue.filter( - (previousValueItemId) => previousValueItemId !== itemId - ) - : [...previousValue, itemId] - ); - } else if (!isOverSmViewport && !hasNestedNavigation) { - setExpanded(false); - } - }, - [mini, setExpanded, isOverSmViewport] - ); + const handlePageItemClick = React.useCallback(() => { + if (!isOverSmViewport) { + setExpanded(false); + } + }, [mini, setExpanded, isOverSmViewport]); const hasDrawerTransitions = isOverSmViewport && (!disableCollapsibleSidebar || isOverMdViewport); @@ -132,67 +115,30 @@ export default function DashboardSidebar({ width: mini ? MINI_DRAWER_WIDTH : "auto", }} > - Main items } href="/employees" - selected={ - !!matchPath("/employees/*", pathname) || pathname === "/" - } /> - - Example items - } href="/reports" - selected={!!matchPath("/reports", pathname)} - defaultExpanded={!!matchPath("/reports", pathname)} - expanded={expandedItemIds.includes("reports")} - nestedNavigation={ - - } - href="/reports/sales" - selected={!!matchPath("/reports/sales", pathname)} - /> - } - href="/reports/traffic" - selected={!!matchPath("/reports/traffic", pathname)} - /> - - } /> } href="/integrations" - selected={!!matchPath("/integrations", pathname)} /> ), - [mini, hasDrawerTransitions, isFullyExpanded, expandedItemIds, pathname] + [mini, hasDrawerTransitions, isFullyExpanded] ); const getDrawerSharedSx = React.useCallback( diff --git a/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarContext.tsx b/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarContext.tsx index 56efe06..eb0dafd 100644 --- a/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarContext.tsx +++ b/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarContext.tsx @@ -1,5 +1,11 @@ import * as React from "react"; -const DashboardSidebarContext = React.createContext(null); +const DashboardSidebarContext = React.createContext<{ + onPageItemClick: () => void; + mini: boolean; + fullyExpanded: boolean; + fullyCollapsed: boolean; + hasDrawerTransitions: boolean; +} | null>(null); export default DashboardSidebarContext; diff --git a/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarHeaderItem.tsx b/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarHeaderItem.tsx deleted file mode 100644 index d4dc3ce..0000000 --- a/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarHeaderItem.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from "react"; -import ListSubheader from "@mui/material/ListSubheader"; -import type {} from "@mui/material/themeCssVarsAugmentation"; -import DashboardSidebarContext from "./DashboardSidebarContext"; -import { DRAWER_WIDTH } from "./constants"; -import { getDrawerSxTransitionMixin } from "./mixins"; - -export interface DashboardSidebarHeaderItemProps { - children?: React.ReactNode; -} - -export default function DashboardSidebarHeaderItem({ - children, -}: DashboardSidebarHeaderItemProps) { - const sidebarContext = React.useContext(DashboardSidebarContext); - if (!sidebarContext) { - throw new Error("Sidebar context was used without a provider."); - } - const { - mini = false, - fullyExpanded = true, - hasDrawerTransitions, - } = sidebarContext; - - return ( - - {children} - - ); -} diff --git a/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarPageItem.tsx b/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarPageItem.tsx index 637db5b..75eb1b4 100644 --- a/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarPageItem.tsx +++ b/matrixgw_frontend/src/widgets/dashboard/DashboardSidebarPageItem.tsx @@ -1,18 +1,13 @@ -import * as React from "react"; -import { type Theme, type SxProps } from "@mui/material/styles"; import Avatar from "@mui/material/Avatar"; import Box from "@mui/material/Box"; -import Collapse from "@mui/material/Collapse"; -import Grow from "@mui/material/Grow"; import ListItem from "@mui/material/ListItem"; import ListItemButton from "@mui/material/ListItemButton"; import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemText from "@mui/material/ListItemText"; -import Paper from "@mui/material/Paper"; import Typography from "@mui/material/Typography"; import type {} from "@mui/material/themeCssVarsAugmentation"; -import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; -import { Link } from "react-router"; +import * as React from "react"; +import { Link, matchPath, useLocation } from "react-router"; import DashboardSidebarContext from "./DashboardSidebarContext"; import { MINI_DRAWER_WIDTH } from "./constants"; @@ -22,11 +17,7 @@ export interface DashboardSidebarPageItemProps { icon?: React.ReactNode; href: string; action?: React.ReactNode; - defaultExpanded?: boolean; - expanded?: boolean; - selected?: boolean; disabled?: boolean; - nestedNavigation?: React.ReactNode; } export default function DashboardSidebarPageItem({ @@ -35,12 +26,10 @@ export default function DashboardSidebarPageItem({ icon, href, action, - defaultExpanded = false, - expanded = defaultExpanded, - selected = false, disabled = false, - nestedNavigation, }: DashboardSidebarPageItemProps) { + const { pathname } = useLocation(); + const sidebarContext = React.useContext(DashboardSidebarContext); if (!sidebarContext) { throw new Error("Sidebar context was used without a provider."); @@ -49,38 +38,13 @@ export default function DashboardSidebarPageItem({ onPageItemClick, mini = false, fullyExpanded = true, - fullyCollapsed = false, } = sidebarContext; - const [isHovered, setIsHovered] = React.useState(false); - const handleClick = React.useCallback(() => { if (onPageItemClick) { - onPageItemClick(id, !!nestedNavigation); + onPageItemClick(); } - }, [onPageItemClick, id, nestedNavigation]); - - let nestedNavigationCollapseSx: SxProps = { display: "none" }; - if (mini && fullyCollapsed) { - nestedNavigationCollapseSx = { - fontSize: 18, - position: "absolute", - top: "41.5%", - right: "2px", - transform: "translateY(-50%) rotate(-90deg)", - }; - } else if (!mini && fullyExpanded) { - nestedNavigationCollapseSx = { - ml: 0.5, - fontSize: 20, - transform: `rotate(${expanded ? 0 : -90}deg)`, - transition: (theme: Theme) => - theme.transitions.create("transform", { - easing: theme.transitions.easing.sharp, - duration: 100, - }), - }; - } + }, [onPageItemClick, id]); const hasExternalHref = href ? href.startsWith("http://") || href.startsWith("https://") @@ -88,61 +52,28 @@ export default function DashboardSidebarPageItem({ const LinkComponent = hasExternalHref ? "a" : Link; - const miniNestedNavigationSidebarContextValue = React.useMemo(() => { - return { - onPageItemClick: onPageItemClick ?? (() => {}), - mini: false, - fullyExpanded: true, - fullyCollapsed: false, - hasDrawerTransitions: false, - }; - }, [onPageItemClick]); + const selected = !!matchPath(href, pathname); return ( - { - setIsHovered(true); - }, - onMouseLeave: () => { - setIsHovered(false); - }, - } - : {})} - sx={{ - display: "block", - py: 0, - px: 1, - overflowX: "hidden", - }} - > + {icon || mini ? ( ) : null} {action && !mini && fullyExpanded ? action : null} - {nestedNavigation ? ( - - ) : null} - {nestedNavigation && mini ? ( - - - - - {nestedNavigation} - - - - - ) : null} - {nestedNavigation && !mini ? ( - - {nestedNavigation} - - ) : null} ); }