Layout, Pages, Dashboard, MUI

2024-06-20 16:59:59 +09:00
parent d53694a0b3
commit d6906503d1
27 changed files with 8076 additions and 142 deletions
--- a/frontend_reactjs/src/layouts/DashboardLayout.tsx
+++ b/frontend_reactjs/src/layouts/DashboardLayout.tsx
@ -0,0 +1,183 @@
+// Layout for dashboard with responsive drawer
+
+import { Outlet } from "react-router-dom"
+import * as React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import CssBaseline from '@mui/material/CssBaseline';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import IconButton from '@mui/material/IconButton';
+import List from '@mui/material/List';
+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 MenuIcon from '@mui/icons-material/Menu';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import { Api, ExitToApp, Home, People, Settings, Shield } from "@mui/icons-material";
+
+const drawerWidth = 240;
+
+export default function DashboardLayout() {
+    //const { window } = props;
+    const [mobileOpen, setMobileOpen] = React.useState(false);
+    const [isClosing, setIsClosing] = React.useState(false);
+
+    const handleDrawerClose = () => {
+        setIsClosing(true);
+        setMobileOpen(false);
+    };
+
+    const handleDrawerTransitionEnd = () => {
+        setIsClosing(false);
+    };
+
+    const handleDrawerToggle = () => {
+        if (!isClosing) {
+            setMobileOpen(!mobileOpen);
+        }
+    };
+
+    const pages = [
+        {
+            label: "Главная",
+            path: "/",
+            icon: <Home />
+        },
+        {
+            label: "Пользователи",
+            path: "/user",
+            icon: <People />
+        },
+        {
+            label: "Роли",
+            path: "/role",
+            icon: <Shield />
+        },
+        {
+            label: "API Test",
+            path: "/api-test",
+            icon: <Api />
+        },
+    ]
+
+    const misc = [
+        {
+            label: "Настройки",
+            path: "/settings",
+            icon: <Settings />
+        },
+        {
+            label: "Выход",
+            path: "/signOut",
+            icon: <ExitToApp />
+        }
+    ]
+
+    const drawer = (
+        <div>
+            <Toolbar />
+
+            <Divider />
+
+            <List>
+                {pages.map((item, index) => (
+                    <ListItem key={index} disablePadding>
+                        <ListItemButton href={item.path}>
+                            <ListItemIcon>
+                                {item.icon}
+                            </ListItemIcon>
+                            <ListItemText primary={item.label} />
+                        </ListItemButton>
+                    </ListItem>
+                ))}
+            </List>
+
+            <Divider />
+
+            <List>
+                {misc.map((item, index) => (
+                    <ListItem key={index} disablePadding>
+                        <ListItemButton href={item.path}>
+                            <ListItemIcon>
+                                {item.icon}
+                            </ListItemIcon>
+                            <ListItemText primary={item.label} />
+                        </ListItemButton>
+                    </ListItem>
+                ))}
+            </List>
+        </div>
+    );
+
+    return (
+        <Box sx={{ display: 'flex' }}>
+            <CssBaseline />
+            <AppBar
+                position="fixed"
+                sx={{
+                    width: { sm: `calc(100% - ${drawerWidth}px)` },
+                    ml: { sm: `${drawerWidth}px` },
+                }}
+            >
+                <Toolbar>
+                    <IconButton
+                        color="inherit"
+                        aria-label="open drawer"
+                        edge="start"
+                        onClick={handleDrawerToggle}
+                        sx={{ mr: 2, display: { sm: 'none' } }}
+                    >
+                        <MenuIcon />
+                    </IconButton>
+                    <Typography variant="h6" noWrap component="div">
+                        Dashboard
+                    </Typography>
+                </Toolbar>
+            </AppBar>
+
+            <Box
+                component="nav"
+                sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
+                aria-label="mailbox folders"
+            >
+                {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
+                <Drawer
+                    variant="temporary"
+                    open={mobileOpen}
+                    onTransitionEnd={handleDrawerTransitionEnd}
+                    onClose={handleDrawerClose}
+                    ModalProps={{
+                        keepMounted: true, // Better open performance on mobile.
+                    }}
+                    sx={{
+                        display: { xs: 'block', sm: 'none' },
+                        '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
+                    }}
+                >
+                    {drawer}
+                </Drawer>
+                <Drawer
+                    variant="permanent"
+                    sx={{
+                        display: { xs: 'none', sm: 'block' },
+                        '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
+                    }}
+                    open
+                >
+                    {drawer}
+                </Drawer>
+            </Box>
+
+            <Box
+                component="main"
+                sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
+            >
+                <Toolbar />
+                <Outlet />
+            </Box>
+        </Box>
+    );
+}
--- a/frontend_reactjs/src/layouts/MainLayout.tsx
+++ b/frontend_reactjs/src/layouts/MainLayout.tsx
@ -0,0 +1,11 @@
+// Layout for fullscreen pages
+
+import { Outlet } from "react-router-dom";
+
+export default function MainLayout() {
+    return (
+        <>
+            <Outlet/>
+        </>
+    )
+}