mirror of
https://github.com/Sonny93/my-links.git
synced 2025-12-09 23:15:36 +00:00
feat: update default layout
This commit is contained in:
44
inertia/layouts/default_layout.tsx
Normal file
44
inertia/layouts/default_layout.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { Box, rem } from '@mantine/core';
|
||||
import { PropsWithChildren } from 'react';
|
||||
import { FloatingNavbar } from '~/components/common/floating_navbar/floating_navbar';
|
||||
import { Footer } from '~/components/common/footer/footer';
|
||||
import { BaseLayout } from './_base_layout';
|
||||
|
||||
const DefaultLayout = ({ children }: PropsWithChildren) => (
|
||||
<BaseLayout>
|
||||
<Layout>{children}</Layout>
|
||||
</BaseLayout>
|
||||
);
|
||||
|
||||
export default DefaultLayout;
|
||||
|
||||
const LAYOUT_WIDTH = '1500px';
|
||||
const Layout = ({ children }: PropsWithChildren) => (
|
||||
<>
|
||||
{/* Top navbar */}
|
||||
<FloatingNavbar width={LAYOUT_WIDTH} />
|
||||
|
||||
{/* Page content */}
|
||||
<Box
|
||||
style={{
|
||||
paddingInline: 'var(--mantine-spacing-lg)',
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
height: '100%',
|
||||
maxWidth: '100%',
|
||||
width: LAYOUT_WIDTH,
|
||||
marginInline: 'auto',
|
||||
marginBlock: rem(60),
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Footer */}
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
Reference in New Issue
Block a user