blog/src_generic/components/AdminLayout.tsx

import * as React from 'react';
import {
  Box,
  Drawer,
  AppBar,
  Toolbar,
  List,
  Typography,
  Divider,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  CssBaseline,
  Button,
  IconButton,
  Tooltip,
  useMediaQuery,
  useTheme,
} 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 MenuIcon from '@mui/icons-material/Menu';
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;
  onSelectResource: (resourceName: string | null) => void;
  onLogout: () => void;
  username?: string;
  resources: ResourceConfig[];
}

export default function AdminLayout({
  children,
  onSelectResource,
  onLogout,
  username,
  resources,
}: AdminLayoutProps) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
  const location = useLocation();
  const navigate = useNavigate();
  
  const [isCollapsed, setIsCollapsed] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const activeResourceName = location.pathname.split('/')[1] || null;

  // AUTO-TOGGLE LOGIC
  React.useEffect(() => {
    if (isMobile) {
        setIsCollapsed(false); // Mobile drawer is never "mini"
        setMobileOpen(false); // Close on navigation
    } else {
        if (location.pathname === '/' || location.pathname === '') {
            setIsCollapsed(false);
        } else {
            setIsCollapsed(true);
        }
    }
  }, [location.pathname, isMobile]);

  const currentWidth = isMobile ? drawerWidth : (isCollapsed ? collapsedWidth : drawerWidth);

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  const handleSidebarToggle = () => {
    setIsCollapsed(!isCollapsed);
  };

  const drawerContent = (
    <Box sx={{ overflow: 'hidden', display: 'flex', flexDirection: 'column', height: '100%' }}>
      {!isMobile && (
        <>
          <Box sx={{ display: 'flex', justifyContent: isCollapsed ? 'center' : 'flex-end', p: 1 }}>
            <IconButton onClick={handleSidebarToggle}>
                {isCollapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
            </IconButton>
          </Box>
          <Divider />
        </>
      )}
      {isMobile && <Toolbar />}
      
      <List>
        <ListItem disablePadding>
          <Tooltip title={(isCollapsed && !isMobile) ? "Dashboard" : ""} placement="right">
            <ListItemButton 
                selected={location.pathname === '/'}
                onClick={() => navigate('/')}
                sx={{
                    minHeight: 48,
                    justifyContent: (isCollapsed && !isMobile) ? 'center' : 'initial',
                    px: 2.5,
                }}
            >
                <ListItemIcon sx={{
                    minWidth: 0,
                    mr: (isCollapsed && !isMobile) ? 0 : 3,
                    justifyContent: 'center',
                }}>
                <DashboardIcon color={location.pathname === '/' ? 'primary' : 'inherit'} />
                </ListItemIcon>
                {(!isCollapsed || isMobile) && <ListItemText primary="Dashboard" />}
            </ListItemButton>
          </Tooltip>
        </ListItem>
      </List>
      <Divider />
      <List sx={{ flexGrow: 1 }}>
        {resources.map((res) => (
          <ListItem key={res.name} disablePadding>
            <Tooltip title={(isCollapsed && !isMobile) ? res.pluralLabel : ""} placement="right">
                <ListItemButton 
                selected={activeResourceName === res.name}
                onClick={() => onSelectResource(res.name)}
                sx={{
                    minHeight: 48,
                    justifyContent: (isCollapsed && !isMobile) ? 'center' : 'initial',
                    px: 2.5,
                }}
                >
                <ListItemIcon sx={{
                    minWidth: 0,
                    mr: (isCollapsed && !isMobile) ? 0 : 3,
                    justifyContent: 'center',
                }}>
                    <TableViewIcon color={activeResourceName === res.name ? 'primary' : 'inherit'} />
                </ListItemIcon>
                {(!isCollapsed || isMobile) && <ListItemText primary={res.pluralLabel} />}
                </ListItemButton>
            </Tooltip>
          </ListItem>
        ))}
      </List>
    </Box>
  );

  return (
    <Box sx={{ display: 'flex' }}>
      <CssBaseline />
      <AppBar 
        position="fixed" 
        sx={{ 
            zIndex: (theme) => theme.zIndex.drawer + 1,
            backdropFilter: 'blur(8px)',
            backgroundColor: 'rgba(255, 255, 255, 0.8)',
            color: 'text.primary',
            boxShadow: 'none',
            borderBottom: '1px solid',
            borderColor: 'divider',
        }}
      >
        <Toolbar>
          {isMobile && (
            <IconButton
              color="inherit"
              aria-label="open drawer"
              edge="start"
              onClick={handleDrawerToggle}
              sx={{ mr: 2 }}
            >
              <MenuIcon />
            </IconButton>
          )}
          <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1, fontWeight: 'bold' }}>
            Admin Panel
          </Typography>
          <Box sx={{ display: { xs: 'none', sm: 'flex' }, alignItems: 'center', mr: 2 }}>
            <Button 
                color="inherit" 
                onClick={() => navigate('/profile')}
                sx={{ textTransform: 'none', fontWeight: 500 }}
            >
                {username}
            </Button>
          </Box>
          <Tooltip title="Logout">
            <IconButton color="inherit" onClick={onLogout}>
                <LogoutIcon />
            </IconButton>
          </Tooltip>
        </Toolbar>
      </AppBar>

      <Box
        component="nav"
        sx={{ width: { md: currentWidth }, flexShrink: { md: 0 } }}
      >
        {isMobile ? (
          <Drawer
            variant="temporary"
            open={mobileOpen}
            onClose={handleDrawerToggle}
            ModalProps={{ keepMounted: true }} 
            sx={{
              display: { xs: 'block', md: 'none' },
              '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
            }}
          >
            {drawerContent}
          </Drawer>
        ) : (
          <Drawer
            variant="permanent"
            sx={{
              display: { xs: 'none', md: 'block' },
              width: currentWidth,
              flexShrink: 0,
              whiteSpace: 'nowrap',
              boxSizing: 'border-box',
              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,
                }),
              },
            }}
            open
          >
            {drawerContent}
          </Drawer>
        )}
      </Box>

      <Box 
        component="main" 
        sx={{ 
            flexGrow: 1, 
            p: { xs: 2, md: 3 },
            width: { xs: '100%', md: `calc(100% - ${currentWidth}px)` },
            transition: (theme) => theme.transitions.create(['margin', 'width'], {
                easing: theme.transitions.easing.sharp,
                duration: theme.transitions.duration.enteringScreen,
            }),
        }}
      >
        <Toolbar />
        {children}
      </Box>
    </Box>
  );
}