60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
import { Suspense } from 'react';
|
|
import { Outlet } from 'react-router';
|
|
|
|
import { ModalLoader } from '@/components/modal1';
|
|
import { useAppLayoutStore, useMainHeight, useViewportHeight } from '@/stores/app-layout';
|
|
import { useDialogsStore } from '@/stores/dialogs';
|
|
|
|
import { NavigationState } from './navigation1/navigation-context';
|
|
import { Footer } from './footer1';
|
|
import { GlobalDialogs } from './global-dialogs';
|
|
import { GlobalLoader } from './global-Loader';
|
|
import { ToasterThemed } from './global-toaster';
|
|
import { GlobalTooltips } from './global-tooltips';
|
|
import { MutationErrors } from './mutation-errors';
|
|
import { Navigation } from './navigation1';
|
|
|
|
export function ApplicationLayout() {
|
|
const mainHeight = useMainHeight();
|
|
const viewportHeight = useViewportHeight();
|
|
const showScroll = useAppLayoutStore(state => !state.noScroll);
|
|
const noNavigationAnimation = useAppLayoutStore(state => state.noNavigationAnimation);
|
|
const noNavigation = useAppLayoutStore(state => state.noNavigation);
|
|
const noFooter = useAppLayoutStore(state => state.noFooter);
|
|
const activeDialog = useDialogsStore(state => state.active);
|
|
|
|
return (
|
|
<NavigationState>
|
|
<div className='min-w-80 antialiased h-full max-w-480 mx-auto'>
|
|
<ToasterThemed
|
|
className='text-[14px]'
|
|
style={{ marginTop: noNavigationAnimation ? '1.5rem' : '3.5rem' }}
|
|
autoClose={3000}
|
|
draggable={false}
|
|
pauseOnFocusLoss={false}
|
|
/>
|
|
|
|
<Suspense fallback={<ModalLoader />}>
|
|
<GlobalDialogs />
|
|
</Suspense>
|
|
<GlobalTooltips />
|
|
|
|
<Navigation />
|
|
|
|
<div
|
|
className='overflow-x-auto max-w-[100vw]'
|
|
style={{ maxHeight: viewportHeight }}
|
|
inert={activeDialog !== null}
|
|
>
|
|
<main className='cc-scroll-y' style={{ overflowY: showScroll ? 'scroll' : 'auto', minHeight: mainHeight }}>
|
|
<GlobalLoader />
|
|
<MutationErrors />
|
|
<Outlet />
|
|
</main>
|
|
{!noNavigation && !noFooter ? <Footer /> : null}
|
|
</div>
|
|
</div>
|
|
</NavigationState>
|
|
);
|
|
}
|