36 lines
1.0 KiB
JavaScript
36 lines
1.0 KiB
JavaScript
import { useState } from 'react';
|
|
import { Outlet } from 'react-router-dom';
|
|
import { AppShell } from '@astryxdesign/core/AppShell';
|
|
|
|
import Header from './Header';
|
|
import Sidebar from './Sidebar';
|
|
|
|
export default function MainLayout() {
|
|
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(true);
|
|
|
|
return (
|
|
<AppShell
|
|
variant="section"
|
|
height="fill"
|
|
contentPadding={0}
|
|
topNav={<Header isSidebarCollapsed={isSidebarCollapsed} />}
|
|
sideNav={<Sidebar isCollapsed={isSidebarCollapsed} onCollapsedChange={setIsSidebarCollapsed} />}
|
|
mobileNav={{ breakpoint: 'lg' }}
|
|
>
|
|
<div className="main-content-area" style={{ minHeight: '100%', display: 'flex', flexDirection: 'column', boxSizing: 'border-box' }}>
|
|
<Outlet />
|
|
</div>
|
|
<style>{`
|
|
.main-content-area {
|
|
padding: 24px;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.main-content-area {
|
|
padding: 16px;
|
|
}
|
|
}
|
|
`}</style>
|
|
</AppShell>
|
|
);
|
|
}
|