feat: update front layout

assets/components/DrawerBox.tsx

@@ -0,0 +1,107 @@
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import {Bookmark, ChevronLeft, Dns, Explore, LocalPolice, MenuBook, People} from "@mui/icons-material";
+import {Divider, List, ListItemButton, ListItemIcon, ListItemText, ListSubheader, styled} from "@mui/material";
+import React from "react";
+import MuiDrawer from "@mui/material/Drawer";
+
+
+const Drawer = styled(MuiDrawer, {shouldForwardProp: (prop) => prop !== 'open'})(
+    ({theme, open}) => ({
+        '& .MuiDrawer-paper': {
+            position: 'relative',
+            whiteSpace: 'nowrap',
+            width: 240,
+            transition: theme.transitions.create('width', {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.enteringScreen,
+            }),
+            boxSizing: 'border-box',
+            ...(!open && {
+                overflowX: 'hidden',
+                transition: theme.transitions.create('width', {
+                    easing: theme.transitions.easing.sharp,
+                    duration: theme.transitions.duration.leavingScreen,
+                }),
+                width: theme.spacing(7),
+                [theme.breakpoints.up('sm')]: {
+                    width: theme.spacing(9),
+                },
+            }),
+        },
+    }),
+)
+
+export default function DrawerBox() {
+    const [open, setOpen] = React.useState(true);
+    const toggleDrawer = () => {
+        setOpen(!open);
+    };
+    return <Drawer variant="permanent" open={open}>
+        <Toolbar
+            sx={{
+                mt: 5,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-end',
+                px: [1],
+            }}
+        >
+            <IconButton onClick={toggleDrawer}>
+                <ChevronLeft/>
+            </IconButton>
+        </Toolbar>
+        <Divider/>
+        <List component="nav">
+            <ListSubheader component="div" inset>
+                Domain names
+            </ListSubheader>
+            <ListItemButton>
+                <ListItemIcon>
+                    <Explore/>
+                </ListItemIcon>
+                <ListItemText primary="Domain finder"/>
+            </ListItemButton>
+            <ListItemButton>
+                <ListItemIcon>
+                    <LocalPolice/>
+                </ListItemIcon>
+                <ListItemText primary="Top Level Domain"/>
+            </ListItemButton>
+            <ListItemButton>
+                <ListItemIcon>
+                    <Dns/>
+                </ListItemIcon>
+                <ListItemText primary="Nameserver"/>
+            </ListItemButton>
+
+            <Divider sx={{my: 1}}/>
+            <ListSubheader component="div" inset>
+                Entities
+            </ListSubheader>
+            <ListItemButton>
+                <ListItemIcon>
+                    <People/>
+                </ListItemIcon>
+                <ListItemText primary="Entity finder"/>
+            </ListItemButton>
+            <ListItemButton>
+                <ListItemIcon>
+                    <MenuBook/>
+                </ListItemIcon>
+                <ListItemText primary="Reverse directory"/>
+            </ListItemButton>
+
+            <Divider sx={{my: 1}}/>
+            <ListSubheader component="div" inset>
+                Tracking
+            </ListSubheader>
+            <ListItemButton>
+                <ListItemIcon>
+                    <Bookmark/>
+                </ListItemIcon>
+                <ListItemText primary="My watchlists"/>
+            </ListItemButton>
+        </List>
+    </Drawer>
+}

assets/controllers.json

@@ -1,15 +1,15 @@
 {
-    "controllers": {
+  "controllers": {
-        "@symfony/ux-turbo": {
+    "@symfony/ux-turbo": {
-            "turbo-core": {
+      "turbo-core": {
-                "enabled": true,
+        "enabled": true,
-                "fetch": "eager"
+        "fetch": "eager"
-            },
+      },
-            "mercure-turbo-stream": {
+      "mercure-turbo-stream": {
-                "enabled": false,
+        "enabled": false,
-                "fetch": "eager"
+        "fetch": "eager"
-            }
+      }
-        }
+    }
-    },
+  },
-    "entrypoints": []
+  "entrypoints": []
 }

assets/index.tsx

@@ -11,6 +11,9 @@ import CssBaseline from "@mui/material/CssBaseline";
 import AppAppBar from "./components/AppAppBar";
 import DashboardPage from "./pages/DashboardPage";
 import {getUser} from "./utils/api";
+import Footer from "./components/Footer";
+import DrawerBox from "./components/DrawerBox";
+import Box from "@mui/material/Box";
 
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
@@ -31,18 +34,23 @@ function App() {
     return <React.StrictMode>
         <ThemeProvider theme={createTheme({palette: {mode: mode}})}>
             <HashRouter>
-                <CssBaseline/>
+                <Box sx={{display: 'flex'}}>
-                <AppAppBar mode={mode} toggleColorMode={toggleColorMode} isAuthenticated={isAuthenticated}/>
+                    <CssBaseline/>
-                <Routes>
+                    {isAuthenticated && <DrawerBox/>}
-                    {isAuthenticated ?
-                        <Route path="/" element={<DashboardPage/>}/>
-                        :
-                        <Route path="*" element={<LoginPage setIsAuthenticated={setIsAuthenticated}/>}/>
-                    }
-                    <Route path="/tos" element={<TextPage content={tosContent}/>}/>
-                    <Route path="/privacy" element={<TextPage content={privacyContent}/>}/>
 
-                </Routes>
+                    <AppAppBar mode={mode} toggleColorMode={toggleColorMode} isAuthenticated={isAuthenticated}/>
+                    <Routes>
+                        {isAuthenticated ?
+                            <Route path="/" element={<DashboardPage/>}/>
+                            :
+                            <Route path="*" element={<LoginPage setIsAuthenticated={setIsAuthenticated}/>}/>
+                        }
+                        <Route path="/tos" element={<TextPage content={tosContent}/>}/>
+                        <Route path="/privacy" element={<TextPage content={privacyContent}/>}/>
+
+                    </Routes>
+                </Box>
+                <Footer/>
             </HashRouter>
         </ThemeProvider>
     </React.StrictMode>

assets/pages/DashboardPage.tsx

@@ -1,10 +1,28 @@
 import React from 'react';
+import Container from "@mui/material/Container";
+import {Grid, Paper} from "@mui/material";
 
 
 export default function DashboardPage() {
+
+
     return (
         <>
-            <p>Dashboard</p>
+            <Container maxWidth="lg" sx={{mt: 4, mb: 4}}>
+                <Grid container spacing={3}>
+                    <Grid item xs={12} md={8} lg={9}>
+                        <Paper
+                            sx={{
+                                p: 2,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: 240,
+                            }}
+                        >
+                        </Paper>
+                    </Grid>
+                </Grid>
+            </Container>
         </>
     );
 };

assets/pages/LoginPage.tsx

@@ -6,12 +6,11 @@ import TextField from '@mui/material/TextField';
 import Box from '@mui/material/Box';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
-import Footer from "../components/Footer";
 import Link from "@mui/material/Link";
 import {login} from "../utils/api";
 import {useNavigate} from "react-router-dom";
 import {Alert} from "@mui/material";
+import Container from "@mui/material/Container";
 
 interface Props {
     setIsAuthenticated: (val: boolean) => void
@@ -103,7 +102,6 @@ export default function LoginPage({setIsAuthenticated}: Props) {
                         Single Sign-On
                     </Button>
                 </Link>
-                <Footer/>
             </Container>
         </>
     );