87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
import '@mantine/core/styles.css';
|
|
import 'mantine-datatable/styles.layer.css';
|
|
import '@mantine/notifications/styles.css';
|
|
import '@mantine/dates/styles.css';
|
|
|
|
import type { AppProps } from 'next/app';
|
|
import Head from 'next/head';
|
|
import { AppShell, Box, Flex, MantineProvider, rem } from '@mantine/core';
|
|
import { useDisclosure } from '@mantine/hooks';
|
|
import Header from '@/components/Layout/Header/Header';
|
|
import { Navbar } from '@/components/Layout/Navbar/Navbar';
|
|
import { client } from '@/lib/client/client.gen';
|
|
import { ReactQueryProvider } from '@/providers/ReactQueryProvider';
|
|
import { theme } from '@/theme';
|
|
|
|
client.setConfig({
|
|
baseURL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000/api',
|
|
});
|
|
export default function App({ Component, pageProps }: AppProps) {
|
|
const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
|
|
const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
|
|
|
|
return (
|
|
<ReactQueryProvider>
|
|
<MantineProvider theme={theme}>
|
|
<Head>
|
|
<title>Mantine Template</title>
|
|
<meta
|
|
name="viewport"
|
|
content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
|
|
/>
|
|
<link rel="shortcut icon" href="/favicon.svg" />
|
|
</Head>
|
|
<AppShell
|
|
padding="md"
|
|
header={{ height: '60px' }}
|
|
navbar={{
|
|
width: 250,
|
|
breakpoint: 'sm',
|
|
collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
|
|
}}
|
|
>
|
|
<AppShell.Header>
|
|
<Header
|
|
desktopOpened={desktopOpened}
|
|
mobileOpened={mobileOpened}
|
|
toggleDesktop={toggleDesktop}
|
|
toggleMobile={toggleMobile}
|
|
/>
|
|
</AppShell.Header>
|
|
<AppShell.Navbar>
|
|
<Navbar />
|
|
</AppShell.Navbar>
|
|
<AppShell.Main
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
height: '100dvh',
|
|
minHeight: 0,
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<Box
|
|
style={{
|
|
flex: 1,
|
|
minHeight: 0,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
<Box
|
|
style={{
|
|
flex: 1,
|
|
minHeight: 0,
|
|
display: 'flex',
|
|
}}
|
|
>
|
|
<Component {...pageProps} />
|
|
</Box>
|
|
</Box>
|
|
</AppShell.Main>
|
|
</AppShell>
|
|
</MantineProvider>
|
|
</ReactQueryProvider>
|
|
);
|
|
}
|