feat: chaged drawer view and navigation

src/renderer/app.tsx

@@ -1,26 +1,37 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import { Navigator } from './components/Navigator';
-import { drawerWidth } from './themes';
 import { Observers } from './pages/Observers';
 import { General } from './pages/General';
-import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import Drawer from './components/Drawer';
+import ApiIcon from '@mui/icons-material/Api';
+import SettingsIcon from '@mui/icons-material/Settings';
+
+const menuRoutes: any = [
+  {
+    name: 'Observers',
+    path: '/observers',
+    element: <Observers />,
+    icon: <ApiIcon />,
+  },
+  {
+    name: 'General',
+    path: '/general',
+    element: <General />,
+    icon: <SettingsIcon />,
+  },
+];
 
 export const App = () => {
   return (
-    <HashRouter>
-      <Box sx={{ display: 'flex', minHeight: '100vh' }}>
-        <Box component="nav" sx={{ width: drawerWidth }}>
-          <Navigator PaperProps={{ style: { width: drawerWidth } }} />
-        </Box>
-        <Box component="main" sx={{ flex: 1, py: 6, px: 4, bgcolor: '#f5eff7' }}>
-          <Routes>
-            <Route path="/observers" element={<Observers />} />
-            <Route path="/general" element={<General />} />
-            <Route path="*" element={<Navigate to="/observers" replace />} />
-          </Routes>
-        </Box>
-      </Box>
-    </HashRouter>
+    <>
+      <Drawer routes={menuRoutes}>
+        <Routes>
+          {menuRoutes.map((route: any) => (
+            <Route {...route} />
+          ))}
+          <Route path="*" element={<Navigate to="/observers" replace />} />
+        </Routes>
+      </Drawer>
+    </>
   );
 };

src/renderer/components/Drawer/index.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { styled, useTheme, Theme, CSSObject } from '@mui/material/styles';
+import MuiDrawer from '@mui/material/Drawer';
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
+import List from '@mui/material/List';
+import CssBaseline from '@mui/material/CssBaseline';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+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 { useNavigate } from 'react-router-dom';
+import { Container, Drawer } from '@mui/material';
+import { drawerWidth } from '../../../renderer/themes';
+
+export default function MiniDrawer({ children, routes }: any) {
+  const theme = useTheme();
+  const navigate = useNavigate();
+  return (
+    <Container disableGutters sx={{ display: 'flex' }}>
+      <CssBaseline />
+      <Drawer
+        sx={{
+          width: drawerWidth,
+          flexShrink: 0,
+          '& .MuiDrawer-paper': {
+            width: drawerWidth,
+            boxSizing: 'border-box',
+          },
+        }}
+        variant="permanent"
+        anchor="left"
+      >
+        <List>
+          {routes.map((route: any) => (
+            <ListItem key={route.name} disablePadding sx={{ display: 'block' }} onClick={() => navigate(route.path)}>
+              <ListItemButton
+                sx={{
+                  minHeight: 48,
+                  justifyContent: 'initial',
+                  px: 2.5,
+                }}
+              >
+                <ListItemIcon
+                  sx={{
+                    minWidth: 0,
+                    mr: 3,
+                    justifyContent: 'center',
+                  }}
+                >
+                  {route.icon}
+                </ListItemIcon>
+                <ListItemText primary={route.name} sx={{ opacity: 1 }} />
+              </ListItemButton>
+            </ListItem>
+          ))}
+        </List>
+        <List style={{ position: 'absolute', bottom: '0' }}></List>
+      </Drawer>
+      <Container component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}>
+        {children}
+      </Container>
+    </Container>
+  );
+}

src/renderer/index.tsx

@@ -5,12 +5,16 @@ import { createRoot } from 'react-dom/client';
 import theme from './themes';
 import { App } from './app';
 import './app.css';
+import { BrowserRouter, HashRouter } from 'react-router-dom';
 
 const container = document.getElementById('root');
 const root = createRoot(container!);
 root.render(
-  <ThemeProvider theme={theme}>
-    <CssBaseline />
-    <App />
-  </ThemeProvider>
+  <React.StrictMode>
+    <ThemeProvider theme={theme}>
+      <HashRouter>
+        <App />
+      </HashRouter>
+    </ThemeProvider>
+  </React.StrictMode>
 );