40 lines
1.1 KiB
TypeScript
Executable File
40 lines
1.1 KiB
TypeScript
Executable File
// DEMO 7
|
|
// https://keenthemes.com/metronic/tailwind/react/demo7
|
|
|
|
import { Outlet } from 'react-router-dom';
|
|
import { useBodyClass } from '@crux-kit/hooks';
|
|
import { LayoutNames } from '#app/config/types';
|
|
import { AppFooter, Toolbar, ToolbarHeading, useLayoutChrome, useLayoutSettings } from '../shared';
|
|
import { Header } from './components/Header';
|
|
|
|
export const AdvancedMegaMenuLayout = () => {
|
|
useLayoutSettings(LayoutNames.ADVANCE_MEGA_MENU);
|
|
const { showToolbar, showFooter } = useLayoutChrome();
|
|
|
|
useBodyClass(`
|
|
[--header-height-default:95px]
|
|
data-[sticky-header=on]:[--header-height:60px]
|
|
[--header-height:var(--header-height-default)]
|
|
[--header-height-mobile:70px]
|
|
`);
|
|
|
|
return (
|
|
<>
|
|
<div className="flex grow flex-col in-data-[sticky-header=on]:pt-(--header-height-default)">
|
|
<Header />
|
|
|
|
<main className="grow" role="content">
|
|
{showToolbar && (
|
|
<Toolbar>
|
|
<ToolbarHeading />
|
|
</Toolbar>
|
|
)}
|
|
<Outlet />
|
|
</main>
|
|
|
|
{showFooter && <AppFooter />}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|