mobile view

src_generic/components/AdminLayout.tsx

@@ -14,10 +14,13 @@ import {
   CssBaseline,
   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';
@@ -41,26 +44,108 @@ export default function AdminLayout({
   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 (location.pathname === '/' || location.pathname === '') {
-      setIsCollapsed(false);
+    if (isMobile) {
+        setIsCollapsed(false); // Mobile drawer is never "mini"
+        setMobileOpen(false); // Close on navigation
     } else {
-      setIsCollapsed(true);
+        if (location.pathname === '/' || location.pathname === '') {
+            setIsCollapsed(false);
+        } else {
+            setIsCollapsed(true);
+        }
     }
-  }, [location.pathname]);
+  }, [location.pathname, isMobile]);
 
-  const currentWidth = isCollapsed ? collapsedWidth : drawerWidth;
+  const currentWidth = isMobile ? drawerWidth : (isCollapsed ? collapsedWidth : drawerWidth);
 
-  const handleToggle = () => {
+  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 />
@@ -69,7 +154,7 @@ export default function AdminLayout({
         sx={{ 
             zIndex: (theme) => theme.zIndex.drawer + 1,
             backdropFilter: 'blur(8px)',
-            backgroundColor: 'rgba(255, 255, 255, 0.8)', // Adjust based on theme in real app
+            backgroundColor: 'rgba(255, 255, 255, 0.8)',
             color: 'text.primary',
             boxShadow: 'none',
             borderBottom: '1px solid',
@@ -77,10 +162,21 @@ export default function AdminLayout({
         }}
       >
         <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>
-          <Typography variant="body1" sx={{ mr: 2, fontWeight: 500 }}>
+          <Typography variant="body1" sx={{ mr: 2, fontWeight: 500, display: { xs: 'none', sm: 'block' } }}>
             {username}
           </Typography>
           <Tooltip title="Logout">
@@ -90,95 +186,60 @@ export default function AdminLayout({
           </Tooltip>
         </Toolbar>
       </AppBar>
-      <Drawer
-        variant="permanent"
-        sx={{
-          width: currentWidth,
-          flexShrink: 0,
-          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', {
+
+      <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,
-            }),
-          },
-        }}
-      >
-        <Toolbar />
-        <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>
-              <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 sx={{ flexGrow: 1 }}>
-            {resources.map((res) => (
-              <ListItem key={res.name} disablePadding>
-                <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>
-        </Box>
-      </Drawer>
+              }),
+              [`& .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: 3,
+            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,