MVP with new UX
This commit is contained in:
Eric Gullickson
@@ -1,130 +1,244 @@
|
||||
/**
|
||||
* @ai-summary Main layout component with navigation
|
||||
* @ai-summary Main layout component with navigation (desktop/mobile adaptive)
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useAuth0 } from '@auth0/auth0-react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { Container, Paper, Typography, Box, IconButton, Avatar } from '@mui/material';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
|
||||
import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
|
||||
import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
|
||||
import PlaceRoundedIcon from '@mui/icons-material/PlaceRounded';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import { useAppStore } from '../core/store';
|
||||
import { Button } from '../shared-minimal/components/Button';
|
||||
import { clsx } from 'clsx';
|
||||
|
||||
interface LayoutProps {
|
||||
children: React.ReactNode;
|
||||
mobileMode?: boolean;
|
||||
}
|
||||
|
||||
export const Layout: React.FC<LayoutProps> = ({ children }) => {
|
||||
export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false }) => {
|
||||
const { user, logout } = useAuth0();
|
||||
const { sidebarOpen, toggleSidebar } = useAppStore();
|
||||
const location = useLocation();
|
||||
const theme = useTheme();
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Vehicles', href: '/vehicles', icon: '🚗' },
|
||||
{ name: 'Fuel Logs', href: '/fuel-logs', icon: '⛽' },
|
||||
{ name: 'Maintenance', href: '/maintenance', icon: '🔧' },
|
||||
{ name: 'Gas Stations', href: '/stations', icon: '🏪' },
|
||||
{ name: 'Vehicles', href: '/vehicles', icon: <DirectionsCarRoundedIcon sx={{ fontSize: 20 }} /> },
|
||||
{ name: 'Fuel Logs', href: '/fuel-logs', icon: <LocalGasStationRoundedIcon sx={{ fontSize: 20 }} /> },
|
||||
{ name: 'Maintenance', href: '/maintenance', icon: <BuildRoundedIcon sx={{ fontSize: 20 }} /> },
|
||||
{ name: 'Gas Stations', href: '/stations', icon: <PlaceRoundedIcon sx={{ fontSize: 20 }} /> },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Sidebar */}
|
||||
<div className={clsx(
|
||||
'fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-200 ease-in-out',
|
||||
sidebarOpen ? 'translate-x-0' : '-translate-x-full'
|
||||
)}>
|
||||
<div className="flex items-center justify-between h-16 px-6 border-b border-gray-200">
|
||||
<h1 className="text-xl font-bold text-gray-900">MotoVaultPro</h1>
|
||||
<button
|
||||
onClick={toggleSidebar}
|
||||
className="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"
|
||||
>
|
||||
<span className="sr-only">Close sidebar</span>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
// Mobile layout
|
||||
if (mobileMode) {
|
||||
return (
|
||||
<div className="w-full min-h-screen bg-background-default">
|
||||
<Container
|
||||
maxWidth={false}
|
||||
sx={{
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: 0,
|
||||
p: 0,
|
||||
boxShadow: 0,
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
maxWidth: '100% !important'
|
||||
}}
|
||||
>
|
||||
{/* App header */}
|
||||
<div className="px-5 pt-5 pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-lg font-semibold tracking-tight">MotoVaultPro</div>
|
||||
<div className="text-xs text-slate-500">v0.1</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Content area */}
|
||||
<div className="flex-1 px-5 pb-20 space-y-5 overflow-y-auto">
|
||||
<div className="min-h-[560px]">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<nav className="mt-6">
|
||||
<div className="px-3">
|
||||
{navigation.map((item) => (
|
||||
// Desktop layout
|
||||
return (
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default' }}>
|
||||
{/* Sidebar */}
|
||||
<Paper
|
||||
elevation={2}
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
height: '100vh',
|
||||
width: 256,
|
||||
zIndex: 1000,
|
||||
transform: sidebarOpen ? 'translateX(0)' : 'translateX(-100%)',
|
||||
transition: 'transform 0.2s ease-in-out',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
height: 64,
|
||||
px: 3,
|
||||
borderBottom: 1,
|
||||
borderColor: 'divider'
|
||||
}}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: 'primary.main' }}>
|
||||
MotoVaultPro
|
||||
</Typography>
|
||||
<IconButton
|
||||
onClick={toggleSidebar}
|
||||
size="small"
|
||||
sx={{ color: 'text.secondary' }}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 3, px: 2, flex: 1 }}>
|
||||
{navigation.map((item) => {
|
||||
const isActive = location.pathname.startsWith(item.href);
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
className={clsx(
|
||||
'group flex items-center px-3 py-2 text-sm font-medium rounded-md mb-1 transition-colors',
|
||||
location.pathname.startsWith(item.href)
|
||||
? 'bg-primary-50 text-primary-700'
|
||||
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
|
||||
)}
|
||||
style={{ textDecoration: 'none' }}
|
||||
>
|
||||
<span className="mr-3 text-lg">{item.icon}</span>
|
||||
{item.name}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
px: 2,
|
||||
py: 1.5,
|
||||
mb: 0.5,
|
||||
borderRadius: 2,
|
||||
transition: 'all 0.2s',
|
||||
backgroundColor: isActive
|
||||
? theme.palette.primary.main + '12'
|
||||
: 'transparent',
|
||||
color: isActive
|
||||
? 'primary.main'
|
||||
: 'text.primary',
|
||||
'&:hover': {
|
||||
backgroundColor: isActive
|
||||
? theme.palette.primary.main + '18'
|
||||
: 'action.hover',
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>
|
||||
{item.icon}
|
||||
</Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500 }}>
|
||||
{item.name}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-primary-600 font-medium text-sm">
|
||||
{user?.name?.charAt(0) || user?.email?.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-3 flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
<Box sx={{ p: 2, borderTop: 1, borderColor: 'divider', mt: 'auto' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||||
<Avatar
|
||||
sx={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
bgcolor: 'primary.main',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 600
|
||||
}}
|
||||
>
|
||||
{user?.name?.charAt(0) || user?.email?.charAt(0)}
|
||||
</Avatar>
|
||||
<Box sx={{ ml: 1.5, flex: 1, minWidth: 0 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500 }} noWrap>
|
||||
{user?.name || user?.email}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="w-full mt-3"
|
||||
className="w-full"
|
||||
onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}
|
||||
>
|
||||
Sign Out
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Main content */}
|
||||
<div className={clsx(
|
||||
'transition-all duration-200 ease-in-out',
|
||||
sidebarOpen ? 'ml-64' : 'ml-0'
|
||||
)}>
|
||||
<Box
|
||||
sx={{
|
||||
ml: sidebarOpen ? '256px' : '0',
|
||||
transition: 'margin-left 0.2s ease-in-out',
|
||||
}}
|
||||
>
|
||||
{/* Top bar */}
|
||||
<header className="bg-white shadow-sm border-b border-gray-200">
|
||||
<div className="flex items-center justify-between h-16 px-6">
|
||||
<button
|
||||
<Paper
|
||||
elevation={1}
|
||||
sx={{
|
||||
borderRadius: 0,
|
||||
borderBottom: 1,
|
||||
borderColor: 'divider'
|
||||
}}
|
||||
>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
height: 64,
|
||||
px: 3
|
||||
}}>
|
||||
<IconButton
|
||||
onClick={toggleSidebar}
|
||||
className="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"
|
||||
sx={{ color: 'text.secondary' }}
|
||||
>
|
||||
<span className="sr-only">Open sidebar</span>
|
||||
☰
|
||||
</button>
|
||||
<div className="text-sm text-gray-500">
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Welcome back, {user?.name || user?.email}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</Typography>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Page content */}
|
||||
<main className="p-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<Box component="main" sx={{ p: 3 }}>
|
||||
<Container maxWidth="xl">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Backdrop */}
|
||||
{sidebarOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-gray-600 bg-opacity-75 lg:hidden"
|
||||
<Box
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
zIndex: 999,
|
||||
bgcolor: 'rgba(0,0,0,0.5)',
|
||||
display: { lg: 'none' }
|
||||
}}
|
||||
onClick={toggleSidebar}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user