66 lines
1.9 KiB
React
66 lines
1.9 KiB
React
import { Outlet, useNavigate, useLocation } from '@tanstack/react-router'
|
|
import { Box, Paper, Tabs, Tab, useTheme } from '@mui/material'
|
|
import { useState } from 'react'
|
|
import TopBar from './TopBar'
|
|
import Sidebar from './Sidebar'
|
|
|
|
export default function AppShell() {
|
|
const theme = useTheme()
|
|
const [collapsed, setCollapsed] = useState(false)
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', minHeight: '100vh' }}>
|
|
<TopBar
|
|
onCollapseClick={() => setCollapsed((p) => !p)}
|
|
collapsed={collapsed}
|
|
/>
|
|
<Sidebar collapsed={collapsed} />
|
|
<Box
|
|
component="main"
|
|
sx={{
|
|
flexGrow: 1,
|
|
p: { xs: 2, md: 3 },
|
|
mt: '64px',
|
|
minWidth: 0,
|
|
width: {
|
|
md: `calc(100% - ${collapsed ? 72 : 240}px)`,
|
|
},
|
|
transition: theme.transitions.create('width', {
|
|
easing: theme.transitions.easing.sharp,
|
|
duration: theme.transitions.duration.enteringScreen,
|
|
}),
|
|
}}
|
|
>
|
|
<Paper
|
|
elevation={0}
|
|
sx={{
|
|
display: { md: 'none' },
|
|
mb: 2,
|
|
borderRadius: 3,
|
|
border: '1px solid',
|
|
borderColor: 'divider',
|
|
bgcolor: 'background.paper',
|
|
}}
|
|
>
|
|
<Tabs
|
|
value={location.pathname}
|
|
onChange={(_e, path) => navigate({ to: path })}
|
|
variant="scrollable"
|
|
scrollButtons="auto"
|
|
textColor="primary"
|
|
indicatorColor="primary"
|
|
>
|
|
<Tab label="Campañas" value="/campaigns" />
|
|
<Tab label="Sesiones" value="/sessions" />
|
|
<Tab label="Archivos" value="/media" />
|
|
<Tab label="Instancias" value="/instances" />
|
|
</Tabs>
|
|
</Paper>
|
|
<Outlet />
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|