apps/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

smooth sidebar

Browse Source
This commit is contained in:
Vishesh 'ironeagle' Bangotra
2026-04-02 21:16:49 +05:30
parent 08a84ea63f
commit 4b0d9ca425
1 changed files with 116 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src_generic/components/AdminLayout.tsx
View File

@@ -12,15 +12,19 @@ import {
ListItemIcon,
ListItemText,
CssBaseline,
IconButton
IconButton,
Tooltip,
} from '@mui/material';
import TableViewIcon from '@mui/icons-material/TableView';
import DashboardIcon from '@mui/icons-material/Dashboard';
import LogoutIcon from '@mui/icons-material/Logout';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { ResourceConfig } from '../types/config';
import { useLocation, useNavigate } from 'react-router-dom';
const drawerWidth = 240;
const collapsedWidth = 64;
interface AdminLayoutProps {
children: React.ReactNode;
@@ -39,67 +43,148 @@ export default function AdminLayout({
}: AdminLayoutProps) {
const location = useLocation();
const navigate = useNavigate();
const [isCollapsed, setIsCollapsed] = React.useState(false);
const activeResourceName = location.pathname.split('/')[1] || null;
// AUTO-TOGGLE LOGIC
React.useEffect(() => {
if (location.pathname === '/' || location.pathname === '') {
setIsCollapsed(false);
} else {
setIsCollapsed(true);
}
}, [location.pathname]);
const currentWidth = isCollapsed ? collapsedWidth : drawerWidth;
const handleToggle = () => {
setIsCollapsed(!isCollapsed);
};
return (
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
<AppBar
position="fixed"
sx={{
zIndex: (theme) => theme.zIndex.drawer + 1,
backdropFilter: 'blur(8px)',
backgroundColor: 'rgba(255, 255, 255, 0.8)', // Adjust based on theme in real app
color: 'text.primary',
boxShadow: 'none',
borderBottom: '1px solid',
borderColor: 'divider',
}}
>
<Toolbar>
<Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
<Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1, fontWeight: 'bold' }}>
Admin Panel
</Typography>
<Typography variant="body1" sx={{ mr: 2 }}>
<Typography variant="body1" sx={{ mr: 2, fontWeight: 500 }}>
{username}
</Typography>
<IconButton color="inherit" onClick={onLogout}>
<LogoutIcon />
</IconButton>
<Tooltip title="Logout">
<IconButton color="inherit" onClick={onLogout}>
<LogoutIcon />
</IconButton>
</Tooltip>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
sx={{
width: drawerWidth,
width: currentWidth,
flexShrink: 0,
[`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' },
whiteSpace: 'nowrap',
boxSizing: 'border-box',
// TRANSITION
transition: (theme) => theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
[`& .MuiDrawer-paper`]: {
width: currentWidth,
boxSizing: 'border-box',
overflowX: 'hidden',
transition: (theme) => theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
}}
>
<Toolbar />
<Box sx={{ overflow: 'auto' }}>
<Box sx={{ overflow: 'hidden', display: 'flex', flexDirection: 'column', height: '100%' }}>
<Box sx={{ display: 'flex', justifyContent: isCollapsed ? 'center' : 'flex-end', p: 1 }}>
<IconButton onClick={handleToggle}>
{isCollapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
</IconButton>
</Box>
<Divider />
<List>
<ListItem disablePadding>
<ListItemButton
selected={location.pathname === '/'}
onClick={() => navigate('/')}
>
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary="Dashboard" />
</ListItemButton>
<Tooltip title={isCollapsed ? "Dashboard" : ""} placement="right">
<ListItemButton
selected={location.pathname === '/'}
onClick={() => navigate('/')}
sx={{
minHeight: 48,
justifyContent: isCollapsed ? 'center' : 'initial',
px: 2.5,
}}
>
<ListItemIcon sx={{
minWidth: 0,
mr: isCollapsed ? 0 : 3,
justifyContent: 'center',
}}>
<DashboardIcon color={location.pathname === '/' ? 'primary' : 'inherit'} />
</ListItemIcon>
{!isCollapsed && <ListItemText primary="Dashboard" />}
</ListItemButton>
</Tooltip>
</ListItem>
</List>
<Divider />
<List>
<List sx={{ flexGrow: 1 }}>
{resources.map((res) => (
<ListItem key={res.name} disablePadding>
<ListItemButton
selected={activeResourceName === res.name}
onClick={() => onSelectResource(res.name)}
>
<ListItemIcon>
<TableViewIcon />
</ListItemIcon>
<ListItemText primary={res.pluralLabel} />
</ListItemButton>
<Tooltip title={isCollapsed ? res.pluralLabel : ""} placement="right">
<ListItemButton
selected={activeResourceName === res.name}
onClick={() => onSelectResource(res.name)}
sx={{
minHeight: 48,
justifyContent: isCollapsed ? 'center' : 'initial',
px: 2.5,
}}
>
<ListItemIcon sx={{
minWidth: 0,
mr: isCollapsed ? 0 : 3,
justifyContent: 'center',
}}>
<TableViewIcon color={activeResourceName === res.name ? 'primary' : 'inherit'} />
</ListItemIcon>
{!isCollapsed && <ListItemText primary={res.pluralLabel} />}
</ListItemButton>
</Tooltip>
</ListItem>
))}
</List>
<Divider />
</Box>
</Drawer>
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<Box
component="main"
sx={{
flexGrow: 1,
p: 3,
transition: (theme) => theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
}}
>
<Toolbar />
{children}
</Box>