⚡️ improve: Navigation bar optimization

web/src/layout/MinimalLayout/Header/index.js

@@ -1,11 +1,30 @@
 // material-ui
+import { useState } from 'react';
 import { useTheme } from '@mui/material/styles';
-import { Box, Button, Stack } from '@mui/material';
+import {
+  Box,
+  Button,
+  Stack,
+  Popper,
+  IconButton,
+  List,
+  ListItemButton,
+  Paper,
+  ListItemText,
+  Typography,
+  Divider,
+  ClickAwayListener
+} from '@mui/material';
 import LogoSection from 'layout/MainLayout/LogoSection';
 import { Link } from 'react-router-dom';
 import { useLocation } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import ThemeButton from 'ui-component/ThemeButton';
+import ProfileSection from 'layout/MainLayout/Header/ProfileSection';
+import { IconMenu2 } from '@tabler/icons-react';
+import Transitions from 'ui-component/extended/Transitions';
+import MainCard from 'ui-component/cards/MainCard';
+import { useMediaQuery } from '@mui/material';
 
 // ==============================|| MAIN NAVBAR / HEADER ||============================== //
 
@@ -13,6 +32,16 @@ const Header = () => {
   const theme = useTheme();
   const { pathname } = useLocation();
   const account = useSelector((state) => state.account);
+  const [open, setOpen] = useState(null);
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const handleOpenMenu = (event) => {
+    setOpen(open ? null : event.currentTarget);
+  };
+
+  const handleCloseMenu = () => {
+    setOpen(null);
+  };
 
   return (
     <>
@@ -32,24 +61,94 @@ const Header = () => {
 
       <Box sx={{ flexGrow: 1 }} />
       <Box sx={{ flexGrow: 1 }} />
-      <Stack spacing={2} direction="row">
-        <Button component={Link} variant="text" to="/" color={pathname === '/' ? 'primary' : 'inherit'}>
-          首页
-        </Button>
-        <Button component={Link} variant="text" to="/about" color={pathname === '/about' ? 'primary' : 'inherit'}>
-          关于
-        </Button>
-        <ThemeButton />
-        {account.user ? (
-          <Button component={Link} variant="contained" to="/panel" color="primary">
-            控制台
-          </Button>
+      <Stack spacing={2} direction="row" justifyContent="center" alignItems="center">
+        {isMobile ? (
+          <>
+            <ThemeButton />
+            <IconButton onClick={handleOpenMenu}>
+              <IconMenu2 />
+            </IconButton>
+          </>
         ) : (
-          <Button component={Link} variant="contained" to="/login" color="primary">
-            登录
-          </Button>
+          <>
+            <Button component={Link} variant="text" to="/" color={pathname === '/' ? 'primary' : 'inherit'}>
+              首页
+            </Button>
+            <Button component={Link} variant="text" to="/about" color={pathname === '/about' ? 'primary' : 'inherit'}>
+              关于
+            </Button>
+            <ThemeButton />
+            {account.user ? (
+              <ProfileSection />
+            ) : (
+              <Button component={Link} variant="contained" to="/login" color="primary">
+                登录
+              </Button>
+            )}
+          </>
         )}
       </Stack>
+
+      <Popper
+        open={!!open}
+        anchorEl={open}
+        transition
+        disablePortal
+        popperOptions={{
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 14]
+              }
+            }
+          ]
+        }}
+        style={{ width: '100vw' }}
+      >
+        {({ TransitionProps }) => (
+          <Transitions in={open} {...TransitionProps}>
+            <ClickAwayListener onClickAway={handleCloseMenu}>
+              <Paper style={{ width: '100%' }}>
+                <MainCard border={false} elevation={16} content={false} boxShadow shadow={theme.shadows[16]}>
+                  <List
+                    component="nav"
+                    sx={{
+                      width: '100%',
+                      maxWidth: '100%',
+                      minWidth: '100%',
+                      backgroundColor: theme.palette.background.paper,
+
+                      '& .MuiListItemButton-root': {
+                        mt: 0.5
+                      }
+                    }}
+                    onClick={handleCloseMenu}
+                  >
+                    <ListItemButton component={Link} variant="text" to="/">
+                      <ListItemText primary={<Typography variant="body2">首页</Typography>} />
+                    </ListItemButton>
+
+                    <ListItemButton component={Link} variant="text" to="/about">
+                      <ListItemText primary={<Typography variant="body2">关于</Typography>} />
+                    </ListItemButton>
+                    <Divider />
+                    {account.user ? (
+                      <ListItemButton component={Link} variant="contained" to="/panel" color="primary">
+                        控制台
+                      </ListItemButton>
+                    ) : (
+                      <ListItemButton component={Link} variant="contained" to="/login" color="primary">
+                        登录
+                      </ListItemButton>
+                    )}
+                  </List>
+                </MainCard>
+              </Paper>
+            </ClickAwayListener>
+          </Transitions>
+        )}
+      </Popper>
     </>
   );
 };

web/src/layout/MinimalLayout/index.js

@@ -1,6 +1,6 @@
 import { Outlet } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
-import { AppBar, Box, CssBaseline, Toolbar } from '@mui/material';
+import { AppBar, Box, CssBaseline, Toolbar, Container } from '@mui/material';
 import Header from './Header';
 import Footer from 'ui-component/Footer';
 
@@ -22,9 +22,11 @@ const MinimalLayout = () => {
           flex: 'none'
         }}
       >
-        <Toolbar>
-          <Header />
-        </Toolbar>
+        <Container>
+          <Toolbar>
+            <Header />
+          </Toolbar>
+        </Container>
       </AppBar>
       <Box sx={{ flex: '1 1 auto', overflow: 'auto' }} marginTop={'80px'}>
         <Outlet />

web/src/views/Authentication/AuthWrapper.js

@@ -8,7 +8,7 @@ import { UserContext } from 'contexts/UserContext';
 // ==============================|| AUTHENTICATION 1 WRAPPER ||============================== //
 
 const AuthStyle = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.primary.light
+  backgroundColor: theme.palette.background.default
 }));
 
 // eslint-disable-next-line