chore: Make the main container dynamic based on the with of the menudrawer
This commit is contained in:
Rodolfo Ruiz
parent
2eeb0b42d8
commit
2116e134a9
93
src/App.jsx
93
src/App.jsx
@ -1,65 +1,84 @@
|
||||
import { useState } from 'react'
|
||||
import './App.css'
|
||||
import { useState } from 'react';
|
||||
import { Box, useMediaQuery } from '@mui/material';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import AppHeader from './components/AppHeader';
|
||||
import MenuDrawerPrivate, { OPEN_WIDTH, MINI_WIDTH } from './components/MenuDrawerPrivate';
|
||||
import Footer from './components/Footer';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
import Clients from './private/clients/Clients';
|
||||
import Dashboard from './private/dashboard/Dashboard';
|
||||
import UserManagement from './private/users/UserManagement';
|
||||
|
||||
import LoginPage from './private/LoginPage';
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||
|
||||
import { useAuth } from './context/AuthContext';
|
||||
|
||||
const DRAWER_EXPANDED = OPEN_WIDTH;
|
||||
const DRAWER_COLLAPSED = MINI_WIDTH;
|
||||
const APPBAR_HEIGHT = 64;
|
||||
|
||||
function PrivateRoute({ children }) {
|
||||
const { user } = useAuth();
|
||||
return user ? children : <Navigate to="/login" replace />;
|
||||
}
|
||||
|
||||
function App() {
|
||||
export default function App() {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery('(max-width:900px)');
|
||||
const [zone, setZone] = useState('public'); // public | restricted | private
|
||||
|
||||
const [drawerExpanded, setDrawerExpanded] = useState(true);
|
||||
const [currentView, setCurrentView] = useState('Dashboard');
|
||||
|
||||
const mainLeft = isMobile ? 0 : (drawerExpanded ? DRAWER_EXPANDED : DRAWER_COLLAPSED);
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppHeader
|
||||
zone="private"
|
||||
onSelectMenuItem={setCurrentView}
|
||||
drawerExpanded={drawerExpanded}
|
||||
/>
|
||||
|
||||
<MenuDrawerPrivate
|
||||
onSelect={(value) => {
|
||||
setCurrentView(value === '/users/UserManagement' ? 'UserManagement' : value);
|
||||
}}
|
||||
onExpandedChange={(expanded) => setDrawerExpanded(expanded)}
|
||||
/>
|
||||
|
||||
<Box
|
||||
component="main"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
minHeight: '100vh', // full height of the viewport
|
||||
ml: { xs: 0, md: `${mainLeft}px` },
|
||||
mt: `${APPBAR_HEIGHT}px`,
|
||||
p: 2,
|
||||
transition: theme.transitions.create('margin-left', {
|
||||
duration: theme.transitions.duration.standard,
|
||||
easing: theme.transitions.easing.sharp,
|
||||
}),
|
||||
}}
|
||||
>
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
|
||||
<AppHeader zone={zone} onSelectMenuItem={(view) => setCurrentView(view)} />
|
||||
<Box sx={{ height: 64 }} />
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
{zone === 'private' && <Clients />}
|
||||
{zone === 'restricted' && <Clients />}
|
||||
|
||||
<Box component="main" sx={{ flex: 1, p: 2 }}>
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
{zone === 'public' && currentView === 'Dashboard' && <Dashboard />}
|
||||
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
{zone === 'private' && <Clients />}
|
||||
{zone === 'restricted' && <Clients />}
|
||||
|
||||
{zone === 'public' && currentView === 'Dashboard' && <Dashboard />}
|
||||
|
||||
{zone === 'public' && currentView === 'UserManagement' && <UserManagement />}
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ height: 64 }} />
|
||||
<Footer zone={zone} />
|
||||
{zone === 'public' && currentView === 'UserManagement' && <UserManagement />}
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
</Box>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
<Box sx={{ height: 64 }} />
|
||||
<Footer zone={zone} />
|
||||
|
||||
export default App
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,64 +1,45 @@
|
||||
import { useState } from 'react';
|
||||
import { AppBar, Toolbar, Typography, IconButton, Box, Avatar } from '@mui/material';
|
||||
|
||||
import MenuDrawer from './MenuDrawer';
|
||||
import MenuDrawerPrivate from './MenuDrawerPrivate';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { AppBar, Toolbar, Typography, IconButton, Box, Avatar, useMediaQuery } from '@mui/material';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { OPEN_WIDTH, MINI_WIDTH } from './MenuDrawerPrivate';
|
||||
|
||||
export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
|
||||
|
||||
const bgColor = {
|
||||
public: 'white',
|
||||
restricted: 'white',
|
||||
private: 'white',
|
||||
};
|
||||
|
||||
const [drawerExpanded, setDrawerExpanded] = useState(true);
|
||||
const [currentPage, setCurrentPage] = useState('Dashboard');
|
||||
export default function AppHeader({ drawerExpanded = true, currentPage = 'Dashboard' }) {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery('(max-width:900px)');
|
||||
const { user } = useAuth();
|
||||
|
||||
const isPrivate = zone === 'private';
|
||||
const isRestricted = zone === 'restricted';
|
||||
const isPublic = zone === 'public';
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleMenuSelect = (page) => {
|
||||
setCurrentPage(page);
|
||||
onSelectMenuItem?.(page);
|
||||
};
|
||||
const leftOffset = isMobile ? 0 : (drawerExpanded ? OPEN_WIDTH : MINI_WIDTH);
|
||||
|
||||
return (
|
||||
<AppBar position="fixed"
|
||||
<AppBar
|
||||
position="fixed"
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
backgroundColor: bgColor[zone],
|
||||
fontSize: { xs: '0.75rem', md: '1rem' },
|
||||
background: 'white',
|
||||
color: '#40120E',
|
||||
boxShadow: '0px 2px 4px rgba(0,0,0,0.1)',
|
||||
border: 'none',
|
||||
width: '100%',
|
||||
left: 0,
|
||||
right: 0,
|
||||
}} >
|
||||
<Toolbar disableGutters sx={{ justifyContent: 'flex-start', alignItems: 'center', flexWrap: 'nowrap', pl: 0, pr: 0, minHeight: 64, width: '100%', '&.MuiToolbar-gutters': { pl: 0, pr: 0 }, position: 'relative', }}>
|
||||
}}
|
||||
>
|
||||
<Toolbar sx={{ minHeight: 64 }}>
|
||||
<Box
|
||||
sx={{
|
||||
ml: `${leftOffset}px`,
|
||||
transition: theme.transitions.create('margin-left', {
|
||||
duration: theme.transitions.duration.standard,
|
||||
easing: theme.transitions.easing.sharp,
|
||||
}),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
ml: `${drawerExpanded ? '300px' : '72px'}`,
|
||||
flexGrow: 1,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
sx={{ color: '#40120EFF', fontWeight: 'light', fontSize: '30px' }}
|
||||
>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
||||
{currentPage}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: 20,
|
||||
@ -87,12 +68,6 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<MenuDrawerPrivate
|
||||
zone="private"
|
||||
onSelect={handleMenuSelect}
|
||||
onExpandedChange={(expanded) => setDrawerExpanded(expanded)}
|
||||
/>
|
||||
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
);
|
||||
|
||||
@ -14,8 +14,8 @@ import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import ExpandLess from '@mui/icons-material/ExpandLess';
|
||||
import ExpandMore from '@mui/icons-material/ExpandMore';
|
||||
|
||||
const OPEN_WIDTH = 400;
|
||||
const MINI_WIDTH = 72;
|
||||
export const OPEN_WIDTH = 450;
|
||||
export const MINI_WIDTH = 72;
|
||||
|
||||
const menuData = [
|
||||
{
|
||||
@ -37,13 +37,15 @@ const menuData = [
|
||||
{
|
||||
title: 'Category Dictionary',
|
||||
children: [
|
||||
{ title: 'Categories' },
|
||||
{ title: 'Products' },
|
||||
{ title: 'All Assets Library' },
|
||||
{ title: 'Media Management' },
|
||||
{ title: 'Product Collections' },
|
||||
{ title: 'Categories' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{ title: 'Products',
|
||||
children: [
|
||||
{ title: 'AR Assets Library Management' },
|
||||
{ title: 'Media Management' },
|
||||
] },
|
||||
{ title: 'Product Collections' },
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -52,13 +54,17 @@ const menuData = [
|
||||
title: 'Customers',
|
||||
icon: <PeopleAltIcon />,
|
||||
children: [
|
||||
{ title: 'CRM' },
|
||||
{ title: 'Customer List' },
|
||||
{
|
||||
title: 'Projects',
|
||||
{ title: 'CRM',
|
||||
children: [
|
||||
{ title: 'Customer List' },
|
||||
{ title: 'Projects' },
|
||||
{ title: 'Customer Collections' },
|
||||
{ title: 'Sales' },
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Sales',
|
||||
children: [
|
||||
{ title: 'Quotes' },
|
||||
{ title: 'Orders' },
|
||||
]
|
||||
@ -80,9 +86,12 @@ const menuData = [
|
||||
icon: <AdminPanelSettingsIcon />,
|
||||
children: [
|
||||
{ title: 'Users Management' },
|
||||
{ title: 'Access Control' },
|
||||
{ title: 'Roles' },
|
||||
{ title: 'Permissions' },
|
||||
{ title: 'Access Control',
|
||||
children: [
|
||||
{ title: 'Roles' },
|
||||
{ title: 'Permissions' },
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@ -13,7 +13,7 @@ export default function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Box display="flex" justifyContent="center" alignItems="center" Height="100vh">
|
||||
<Box display="flex" justifyContent="center" alignItems="center" height="100vh">
|
||||
<Paper sx={{ p: 4, borderRadius: 2, boxShadow: 3, textAlign: 'center' }}>
|
||||
<Typography variant="h5" mb={2}>Login to Dream Views</Typography>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user