Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-10 15:35:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: make dashboard responsive again (instead of taking up all the space)

Browse Source
This commit is contained in:
Sonny
2024-11-04 19:07:21 +01:00
committed by Sonny
parent 7fba156168
commit 41f82a8070
4 changed files with 72 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
inertia/pages/mantine_dashboard.tsx
View File

@@ -39,52 +39,55 @@ export default function MantineDashboard(props: Readonly<DashboardPageProps>) {
return (
<MantineDashboardLayout>
<DashboardProviders {...props}>
<AppShell
layout="alt"
header={{ height: 50 }}
navbar={{
width: 300,
breakpoint: 'sm',
collapsed: { mobile: !openedNavbar },
}}
aside={{
width: 300,
breakpoint: 'md',
collapsed: { mobile: !openedAside },
}}
classNames={{
aside: classes.ml_bg_color,
footer: classes.ml_bg_color,
navbar: classes.ml_bg_color,
header: classes.ml_bg_color,
}}
>
<DashboardHeader
navbar={{ opened: openedNavbar, toggle: toggleNavbar }}
aside={{ opened: openedAside, toggle: toggleAside }}
/>
<DashboardNavbar isOpen={openedNavbar} toggle={toggleNavbar} />
<AppShell.Main>
{props.activeCollection.links.length > 0 ? (
<ScrollArea
h="calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))"
p="md"
>
<Stack gap="xs">
{props.activeCollection.links.map((link) => (
<LinkItem key={link.id} link={link} showUserControls />
))}
</Stack>
</ScrollArea>
) : (
<NoLink />
)}
</AppShell.Main>
<DashboardAside isOpen={openedAside} toggle={toggleAside} />
<AppShell.Footer pl="xs" pr="xs">
<MantineFooter />
</AppShell.Footer>
</AppShell>
<div className={classes.app_wrapper}>
<AppShell
layout="alt"
header={{ height: 50 }}
navbar={{
width: 300,
breakpoint: 'sm',
collapsed: { mobile: !openedNavbar },
}}
aside={{
width: 300,
breakpoint: 'md',
collapsed: { mobile: !openedAside },
}}
classNames={{
aside: classes.ml_custom_class,
footer: classes.ml_custom_class,
navbar: classes.ml_custom_class,
header: classes.ml_custom_class,
}}
className={classes.app_shell}
>
<DashboardHeader
navbar={{ opened: openedNavbar, toggle: toggleNavbar }}
aside={{ opened: openedAside, toggle: toggleAside }}
/>
<DashboardNavbar isOpen={openedNavbar} toggle={toggleNavbar} />
<AppShell.Main>
{props.activeCollection.links.length > 0 ? (
<ScrollArea
h="calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))"
p="md"
>
<Stack gap="xs">
{props.activeCollection.links.map((link) => (
<LinkItem key={link.id} link={link} showUserControls />
))}
</Stack>
</ScrollArea>
) : (
<NoLink key={props.activeCollection.id} />
)}
</AppShell.Main>
<DashboardAside isOpen={openedAside} toggle={toggleAside} />
<AppShell.Footer pl="xs" pr="xs">
<MantineFooter />
</AppShell.Footer>
</AppShell>
</div>
</DashboardProviders>
</MantineDashboardLayout>
);