77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import { AppShell, Container } from "@mantine/core";
|
|
import React from "react";
|
|
import { useLocation } from "react-router-dom";
|
|
import SettingsSidebar from "@/components/settings/settings-sidebar.tsx";
|
|
import { useAtom } from "jotai";
|
|
import {
|
|
asideStateAtom,
|
|
desktopSidebarAtom,
|
|
mobileSidebarAtom,
|
|
} from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
|
|
import { SpaceSidebar } from "@/features/space/components/sidebar/space-sidebar.tsx";
|
|
import { AppHeader } from "@/components/layouts/global/app-header.tsx";
|
|
import Aside from "@/components/layouts/global/aside.tsx";
|
|
import classes from "./app-shell.module.css";
|
|
|
|
export default function GlobalAppShell({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const [mobileOpened] = useAtom(mobileSidebarAtom);
|
|
const [desktopOpened] = useAtom(desktopSidebarAtom);
|
|
const [{ isAsideOpen }] = useAtom(asideStateAtom);
|
|
|
|
const location = useLocation();
|
|
const isSettingsRoute = location.pathname.startsWith("/settings");
|
|
const isSpaceRoute = location.pathname.startsWith("/s/");
|
|
const isHomeRoute = location.pathname.startsWith("/home");
|
|
const isPageRoute = location.pathname.includes("/p/");
|
|
|
|
return (
|
|
<AppShell
|
|
header={{ height: 45 }}
|
|
navbar={
|
|
!isHomeRoute && {
|
|
width: 300,
|
|
breakpoint: "sm",
|
|
collapsed: {
|
|
mobile: !mobileOpened,
|
|
desktop: !desktopOpened,
|
|
},
|
|
}
|
|
}
|
|
aside={
|
|
isPageRoute && {
|
|
width: 350,
|
|
breakpoint: "sm",
|
|
collapsed: { mobile: !isAsideOpen, desktop: !isAsideOpen },
|
|
}
|
|
}
|
|
padding="md"
|
|
>
|
|
<AppShell.Header px="md" className={classes.header}>
|
|
<AppHeader />
|
|
</AppShell.Header>
|
|
{!isHomeRoute && (
|
|
<AppShell.Navbar className={classes.navbar} withBorder={false}>
|
|
{isSpaceRoute && <SpaceSidebar />}
|
|
{isSettingsRoute && <SettingsSidebar />}
|
|
</AppShell.Navbar>
|
|
)}
|
|
<AppShell.Main>
|
|
{isSettingsRoute ? (
|
|
<Container size={800}>{children}</Container>
|
|
) : (
|
|
children
|
|
)}
|
|
</AppShell.Main>
|
|
|
|
{isPageRoute && (
|
|
<AppShell.Aside className={classes.aside} p="md" withBorder={false}>
|
|
<Aside />
|
|
</AppShell.Aside>
|
|
)}
|
|
</AppShell>
|
|
);
|
|
}
|