apps/khata-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

header fixes

Browse Source
This commit is contained in:
Vishesh 'ironeagle' Bangotra
2026-04-04 13:56:20 +05:30
parent 3e3d7686f6
commit 47fa309342
1 changed files with 129 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
react-openapi/components/AdminLayout.tsx
View File

@@ -2,17 +2,12 @@ import * as React from 'react';
import { import {
Box, Box,
Drawer, Drawer,
AppBar,
Toolbar,
List, List,
Typography,
Divider, Divider,
ListItem, ListItem,
ListItemButton, ListItemButton,
ListItemIcon, ListItemIcon,
ListItemText, ListItemText,
CssBaseline,
Button,
IconButton, IconButton,
Tooltip, Tooltip,
useMediaQuery, useMediaQuery,
@@ -20,7 +15,6 @@ import {
} from '@mui/material'; } from '@mui/material';
import TableViewIcon from '@mui/icons-material/TableView'; import TableViewIcon from '@mui/icons-material/TableView';
import DashboardIcon from '@mui/icons-material/Dashboard'; import DashboardIcon from '@mui/icons-material/Dashboard';
import LogoutIcon from '@mui/icons-material/Logout';
import MenuIcon from '@mui/icons-material/Menu'; import MenuIcon from '@mui/icons-material/Menu';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import ChevronRightIcon from '@mui/icons-material/ChevronRight';
@@ -41,8 +35,6 @@ interface AdminLayoutProps {
export default function AdminLayout({ export default function AdminLayout({
children, children,
onSelectResource, onSelectResource,
onLogout,
username,
resources, resources,
}: AdminLayoutProps) { }: AdminLayoutProps) {
const theme = useTheme(); const theme = useTheme();
@@ -55,91 +47,139 @@ export default function AdminLayout({
const activeResourceName = location.pathname.split('/admin')[1] || null; const activeResourceName = location.pathname.split('/admin')[1] || null;
// AUTO-TOGGLE LOGIC // AUTO-TOGGLE LOGIC (unchanged)
React.useEffect(() => { React.useEffect(() => {
if (isMobile) { if (isMobile) {
setIsCollapsed(false); // Mobile drawer is never "mini" setIsCollapsed(false);
setMobileOpen(false); // Close on navigation setMobileOpen(false);
} else { } else {
if (location.pathname === '/admin' || location.pathname === '') { if (location.pathname === '/admin' || location.pathname === '') {
setIsCollapsed(false); setIsCollapsed(false);
} else { } else {
setIsCollapsed(true); setIsCollapsed(true);
} }
} }
}, [location.pathname, isMobile]); }, [location.pathname, isMobile]);
const currentWidth = isMobile ? drawerWidth : (isCollapsed ? collapsedWidth : drawerWidth); const currentWidth = isMobile
? drawerWidth
: isCollapsed
? collapsedWidth
: drawerWidth;
const handleDrawerToggle = () => { const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen); setMobileOpen((prev) => !prev);
}; };
const handleSidebarToggle = () => { const handleSidebarToggle = () => {
setIsCollapsed(!isCollapsed); setIsCollapsed((prev) => !prev);
}; };
const drawerContent = ( const drawerContent = (
<Box sx={{ overflow: 'hidden', display: 'flex', flexDirection: 'column', height: '100%' }}> <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
{!isMobile && ( {!isMobile && (
<> <>
<Box sx={{ display: 'flex', justifyContent: isCollapsed ? 'center' : 'flex-end', p: 1 }}> <Box
sx={{
display: 'flex',
justifyContent: isCollapsed ? 'center' : 'flex-end',
p: 1,
}}
>
<IconButton onClick={handleSidebarToggle}> <IconButton onClick={handleSidebarToggle}>
{isCollapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />} {isCollapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
</IconButton> </IconButton>
</Box> </Box>
<Divider /> <Divider />
</> </>
)} )}
{isMobile && <Toolbar />}
{/* Mobile spacing (replaces Toolbar) */}
{isMobile && (
<Box sx={{ height: (theme) => theme.spacing(7) }} />
)}
<List> <List>
<ListItem disablePadding> <ListItem disablePadding>
<Tooltip title={(isCollapsed && !isMobile) ? "Dashboard" : ""} placement="right"> <Tooltip
title={isCollapsed && !isMobile ? 'Dashboard' : ''}
placement="right"
>
<ListItemButton <ListItemButton
selected={location.pathname === '/admin'} selected={location.pathname === '/admin'}
onClick={() => navigate('/admin')} onClick={() => navigate('/admin')}
sx={{ sx={{
minHeight: 48, minHeight: 48,
justifyContent: (isCollapsed && !isMobile) ? 'center' : 'initial', justifyContent:
px: 2.5, isCollapsed && !isMobile ? 'center' : 'initial',
}} px: 2.5,
}}
> >
<ListItemIcon sx={{ <ListItemIcon
minWidth: 0, sx={{
mr: (isCollapsed && !isMobile) ? 0 : 3, minWidth: 0,
justifyContent: 'center', mr: isCollapsed && !isMobile ? 0 : 3,
}}> justifyContent: 'center',
<DashboardIcon color={location.pathname === '/admin' ? 'primary' : 'inherit'} /> }}
</ListItemIcon> >
{(!isCollapsed || isMobile) && <ListItemText primary="Dashboard" />} <DashboardIcon
color={
location.pathname === '/admin'
? 'primary'
: 'inherit'
}
/>
</ListItemIcon>
{(!isCollapsed || isMobile) && (
<ListItemText primary="Dashboard" />
)}
</ListItemButton> </ListItemButton>
</Tooltip> </Tooltip>
</ListItem> </ListItem>
</List> </List>
<Divider /> <Divider />
<List sx={{ flexGrow: 1 }}> <List sx={{ flexGrow: 1 }}>
{resources.map((res) => ( {resources.map((res) => (
<ListItem key={res.name} disablePadding> <ListItem key={res.name} disablePadding>
<Tooltip title={(isCollapsed && !isMobile) ? res.pluralLabel : ""} placement="right"> <Tooltip
<ListItemButton title={
isCollapsed && !isMobile ? res.pluralLabel : ''
}
placement="right"
>
<ListItemButton
selected={activeResourceName === res.name} selected={activeResourceName === res.name}
onClick={() => onSelectResource(res.name)} onClick={() => onSelectResource(res.name)}
sx={{ sx={{
minHeight: 48, minHeight: 48,
justifyContent: (isCollapsed && !isMobile) ? 'center' : 'initial', justifyContent:
px: 2.5, isCollapsed && !isMobile
? 'center'
: 'initial',
px: 2.5,
}} }}
> >
<ListItemIcon sx={{ <ListItemIcon
sx={{
minWidth: 0, minWidth: 0,
mr: (isCollapsed && !isMobile) ? 0 : 3, mr: isCollapsed && !isMobile ? 0 : 3,
justifyContent: 'center', justifyContent: 'center',
}}> }}
<TableViewIcon color={activeResourceName === res.name ? 'primary' : 'inherit'} /> >
<TableViewIcon
color={
activeResourceName === res.name
? 'primary'
: 'inherit'
}
/>
</ListItemIcon> </ListItemIcon>
{(!isCollapsed || isMobile) && <ListItemText primary={res.pluralLabel} />} {(!isCollapsed || isMobile) && (
</ListItemButton> <ListItemText primary={res.pluralLabel} />
)}
</ListItemButton>
</Tooltip> </Tooltip>
</ListItem> </ListItem>
))} ))}
@@ -149,51 +189,7 @@ export default function AdminLayout({
return ( return (
<Box sx={{ display: 'flex' }}> <Box sx={{ display: 'flex' }}>
<CssBaseline /> {/* NAV */}
<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('/admin/profile')}
sx={{ textTransform: 'none', fontWeight: 500 }}
>
{username}
</Button>
</Box>
<Tooltip title="Logout">
<IconButton color="inherit" onClick={onLogout}>
<LogoutIcon />
</IconButton>
</Tooltip>
</Toolbar>
</AppBar>
<Box <Box
component="nav" component="nav"
sx={{ width: { md: currentWidth }, flexShrink: { md: 0 } }} sx={{ width: { md: currentWidth }, flexShrink: { md: 0 } }}
@@ -206,7 +202,9 @@ export default function AdminLayout({
ModalProps={{ keepMounted: true }} ModalProps={{ keepMounted: true }}
sx={{ sx={{
display: { xs: 'block', md: 'none' }, display: { xs: 'block', md: 'none' },
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth }, '& .MuiDrawer-paper': {
width: drawerWidth,
},
}} }}
> >
{drawerContent} {drawerContent}
@@ -214,46 +212,52 @@ export default function AdminLayout({
) : ( ) : (
<Drawer <Drawer
variant="permanent" variant="permanent"
open
sx={{ sx={{
display: { xs: 'none', md: 'block' }, display: { xs: 'none', md: 'block' },
width: currentWidth, width: currentWidth,
flexShrink: 0, flexShrink: 0,
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
boxSizing: 'border-box',
transition: (theme) => theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
[`& .MuiDrawer-paper`]: { [`& .MuiDrawer-paper`]: {
width: currentWidth, width: currentWidth,
boxSizing: 'border-box',
overflowX: 'hidden', overflowX: 'hidden',
transition: (theme) => theme.transitions.create('width', { transition: theme.transitions.create('width'),
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
}, },
}} }}
open
> >
{drawerContent} {drawerContent}
</Drawer> </Drawer>
)} )}
</Box> </Box>
{/* MAIN */}
<Box <Box
component="main" component="main"
sx={{ sx={{
flexGrow: 1, flexGrow: 1,
p: { xs: 2, md: 3 }, p: { xs: 2, md: 3 },
width: { xs: '100%', md: `calc(100% - ${currentWidth}px)` }, width: {
transition: (theme) => theme.transitions.create(['margin', 'width'], { xs: '100%',
easing: theme.transitions.easing.sharp, md: `calc(100% - ${currentWidth}px)`,
duration: theme.transitions.duration.enteringScreen, },
}),
}} }}
> >
<Toolbar /> {/* Control row (replaces AppBar) */}
{isMobile && (
<Box
sx={{
display: 'flex',
alignItems: 'center',
mb: 2,
height: (theme) => theme.spacing(7),
}}
>
<IconButton onClick={handleDrawerToggle}>
<MenuIcon />
</IconButton>
</Box>
)}
{children} {children}
</Box> </Box>
</Box> </Box>