Initial commit - cleaned repository

console/frontend/src/components/Layout.tsx

@@ -0,0 +1,102 @@
+import { useState } from 'react'
+import { Outlet, Link as RouterLink } from 'react-router-dom'
+import {
+  AppBar,
+  Box,
+  Drawer,
+  IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Toolbar,
+  Typography,
+} from '@mui/material'
+import {
+  Menu as MenuIcon,
+  Dashboard as DashboardIcon,
+  Cloud as CloudIcon,
+  People as PeopleIcon,
+} from '@mui/icons-material'
+
+const drawerWidth = 240
+
+const menuItems = [
+  { text: 'Dashboard', icon: <DashboardIcon />, path: '/' },
+  { text: 'Services', icon: <CloudIcon />, path: '/services' },
+  { text: 'Users', icon: <PeopleIcon />, path: '/users' },
+]
+
+function Layout() {
+  const [open, setOpen] = useState(true)
+
+  const handleDrawerToggle = () => {
+    setOpen(!open)
+  }
+
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <AppBar
+        position="fixed"
+        sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
+      >
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            edge="start"
+            onClick={handleDrawerToggle}
+            sx={{ mr: 2 }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" noWrap component="div">
+            Microservices Console
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Drawer
+        variant="persistent"
+        anchor="left"
+        open={open}
+        sx={{
+          width: drawerWidth,
+          flexShrink: 0,
+          '& .MuiDrawer-paper': {
+            width: drawerWidth,
+            boxSizing: 'border-box',
+          },
+        }}
+      >
+        <Toolbar />
+        <Box sx={{ overflow: 'auto' }}>
+          <List>
+            {menuItems.map((item) => (
+              <ListItem key={item.text} disablePadding>
+                <ListItemButton component={RouterLink} to={item.path}>
+                  <ListItemIcon>{item.icon}</ListItemIcon>
+                  <ListItemText primary={item.text} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+      </Drawer>
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          p: 3,
+          marginLeft: open ? `${drawerWidth}px` : 0,
+          transition: 'margin 0.3s',
+        }}
+      >
+        <Toolbar />
+        <Outlet />
+      </Box>
+    </Box>
+  )
+}
+
+export default Layout