66 lines
2.8 KiB
TypeScript
66 lines
2.8 KiB
TypeScript
import { ReactNode } from 'react'
|
|
import { useNavigate, useLocation } from 'react-router-dom'
|
|
import Box from '@mui/material/Box'
|
|
import Drawer from '@mui/material/Drawer'
|
|
import List from '@mui/material/List'
|
|
import ListItemButton from '@mui/material/ListItemButton'
|
|
import ListItemIcon from '@mui/material/ListItemIcon'
|
|
import ListItemText from '@mui/material/ListItemText'
|
|
import Typography from '@mui/material/Typography'
|
|
import Divider from '@mui/material/Divider'
|
|
import IconButton from '@mui/material/IconButton'
|
|
import Tooltip from '@mui/material/Tooltip'
|
|
import DnsIcon from '@mui/icons-material/Dns'
|
|
import LogoutIcon from '@mui/icons-material/Logout'
|
|
import { useAuth } from '../store/auth'
|
|
|
|
const DRAWER_WIDTH = 240
|
|
|
|
interface Props { children: ReactNode; title: string }
|
|
|
|
export default function Layout({ children, title }: Props) {
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
const { user, logout } = useAuth()
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', minHeight: '100vh' }}>
|
|
<Drawer variant="permanent" sx={{ width: DRAWER_WIDTH, '& .MuiDrawer-paper': { width: DRAWER_WIDTH } }}>
|
|
<Box sx={{ px: 2, py: 3 }}>
|
|
<Typography variant="h6" sx={{ color: '#e2e8f0', fontWeight: 700, letterSpacing: 1 }}>
|
|
Shorefront
|
|
</Typography>
|
|
<Typography variant="caption" sx={{ color: '#94a3b8' }}>
|
|
Shorewall Manager
|
|
</Typography>
|
|
</Box>
|
|
<Divider sx={{ borderColor: '#2d3748' }} />
|
|
<List sx={{ flex: 1 }}>
|
|
<ListItemButton
|
|
selected={location.pathname.startsWith('/configs')}
|
|
onClick={() => navigate('/configs')}
|
|
sx={{ '&.Mui-selected': { backgroundColor: '#2d3748' }, '&:hover': { backgroundColor: '#2d3748' } }}
|
|
>
|
|
<ListItemIcon sx={{ color: '#94a3b8', minWidth: 36 }}><DnsIcon fontSize="small" /></ListItemIcon>
|
|
<ListItemText primary="Configurations" primaryTypographyProps={{ sx: { color: '#e2e8f0', fontSize: 14 } }} />
|
|
</ListItemButton>
|
|
</List>
|
|
<Divider sx={{ borderColor: '#2d3748' }} />
|
|
<Box sx={{ px: 2, py: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<Typography variant="caption" sx={{ color: '#94a3b8' }}>{user?.username}</Typography>
|
|
<Tooltip title="Logout">
|
|
<IconButton onClick={logout} size="small" sx={{ color: '#94a3b8' }}><LogoutIcon fontSize="small" /></IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
</Drawer>
|
|
|
|
<Box component="main" sx={{ flex: 1, bgcolor: 'background.default' }}>
|
|
<Box sx={{ px: 4, py: 3, bgcolor: 'white', borderBottom: '1px solid #e2e8f0' }}>
|
|
<Typography variant="h5" fontWeight={600}>{title}</Typography>
|
|
</Box>
|
|
<Box sx={{ p: 4 }}>{children}</Box>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|