59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import { AppShell as MantineAppShell, NavLink, Text } from "@mantine/core";
|
|
import type { FC, ReactNode } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Outlet, NavLink as RouterNavLink, useLocation } from "react-router";
|
|
|
|
type AppShellProps = {
|
|
contentAboveOutlet?: ReactNode;
|
|
};
|
|
|
|
const AppShell: FC<AppShellProps> = (props) => {
|
|
const { contentAboveOutlet } = props;
|
|
const { t } = useTranslation();
|
|
const { pathname } = useLocation();
|
|
const items = [
|
|
{ to: "/accounts", label: t("navigation.accounts") },
|
|
{ to: "/settings", label: t("navigation.settings") },
|
|
];
|
|
|
|
return (
|
|
<MantineAppShell
|
|
header={{ height: 60 }}
|
|
navbar={{ width: 220, breakpoint: "sm", collapsed: { mobile: true } }}
|
|
padding="md"
|
|
>
|
|
<MantineAppShell.Header className="app-header">
|
|
<Text fw={700}>{t("appName")}</Text>
|
|
</MantineAppShell.Header>
|
|
<MantineAppShell.Navbar p="sm">
|
|
{items.map((item) => (
|
|
<NavLink
|
|
component={RouterNavLink}
|
|
key={item.to}
|
|
to={item.to}
|
|
label={item.label}
|
|
active={pathname.startsWith(item.to)}
|
|
/>
|
|
))}
|
|
</MantineAppShell.Navbar>
|
|
<MantineAppShell.Main>
|
|
{contentAboveOutlet}
|
|
<Outlet />
|
|
</MantineAppShell.Main>
|
|
<nav className="bottom-nav" aria-label={t("appName")}>
|
|
{items.map((item) => (
|
|
<RouterNavLink
|
|
className={pathname.startsWith(item.to) ? "active" : ""}
|
|
key={item.to}
|
|
to={item.to}
|
|
>
|
|
{item.label}
|
|
</RouterNavLink>
|
|
))}
|
|
</nav>
|
|
</MantineAppShell>
|
|
);
|
|
};
|
|
|
|
export { AppShell };
|