Improve sidebar

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}
         >
           <div>
             <IconButton
@@ -92,26 +88,25 @@ export default function DashboardHeader({
           }}
         >
           <Stack direction="row" alignItems="center">
-            <Box sx={{ mr: 1 }}>{getMenuIcon(menuOpen)}</Box>
-            <Link to="/" style={{ textDecoration: "none" }}>
+            <Box sx={{ mr: 3 }}>{getMenuIcon(menuOpen)}</Box>
+            <RouterLink to="/">
               <Stack direction="row" alignItems="center">
-                {logo ? <LogoContainer>{logo}</LogoContainer> : null}
-                {title ? (
-                  <Typography
-                    variant="h6"
-                    sx={{
-                      color: (theme.vars ?? theme).palette.primary.main,
-                      fontWeight: "700",
-                      ml: 1,
-                      whiteSpace: "nowrap",
-                      lineHeight: 1,
-                    }}
-                  >
-                    {title}
-                  </Typography>
-                ) : null}
+                <LogoContainer>
+                  <Icon path={mdiMessageTextFast} size="2em" />
+                </LogoContainer>
+                <Typography
+                  variant="h6"
+                  sx={{
+                    fontWeight: "700",
+                    ml: 1,
+                    whiteSpace: "nowrap",
+                    lineHeight: 1,
+                  }}
+                >
+                  MatrixGW
+                </Typography>
               </Stack>
-            </Link>
+            </RouterLink>
           </Stack>
           <Stack
             direction="row"