pipely/web/src/components/Layout.tsx

import { NavLink, useNavigate, Outlet } from "react-router-dom"
import {
  Drawer,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Toolbar,
  AppBar,
  Typography,
  Box,
  Divider,
} from "@mui/material"
import {
  Dashboard as DashboardIcon,
  Inventory,
  RocketLaunch,
  People,
  Logout,
} from "@mui/icons-material"

const drawerWidth = 240

export default function Layout() {
  const navigate = useNavigate()

  function handleLogout() {
    navigate("/")
  }

  const navItems = [
    { path: "/dashboard", label: "Dashboard", icon: <DashboardIcon /> },
    { path: "/artefacts", label: "Versions", icon: <Inventory /> },
    { path: "/deployments", label: "Deployments", icon: <RocketLaunch /> },
    { path: "/users", label: "Admin Users", icon: <People /> },
  ]

  return (
    <Box sx={{ display: "flex" }}>
      <AppBar
        position="fixed"
        sx={{
          width: `calc(100% - ${drawerWidth}px)`,
          ml: `${drawerWidth}px`,
        }}>
        <Toolbar>
          <Typography variant="h6" noWrap component="div">
            OTA Manager
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          "& .MuiDrawer-paper": {
            width: drawerWidth,
            boxSizing: "border-box",
          },
        }}
        variant="permanent"
        anchor="left">
        <Toolbar />
        <Divider />
        <List>
          {navItems.map((item) => (
            <ListItem key={item.path} disablePadding>
              <ListItemButton
                component={NavLink}
                to={item.path}
                sx={{
                  "&.active": {
                    bgcolor: "action.selected",
                  },
                }}>
                <ListItemIcon>{item.icon}</ListItemIcon>
                <ListItemText primary={item.label} />
              </ListItemButton>
            </ListItem>
          ))}
        </List>
        <Divider />
        <List>
          <ListItem disablePadding>
            <ListItemButton onClick={handleLogout}>
              <ListItemIcon>
                <Logout />
              </ListItemIcon>
              <ListItemText primary="Logout" />
            </ListItemButton>
          </ListItem>
        </List>
      </Drawer>
      <Box
        component="main"
        sx={{
          flexGrow: 1,
          p: 3,
          width: `calc(100% - ${drawerWidth}px)`,
          mt: 8,
        }}>
        <Outlet />
      </Box>
    </Box>
  )
}