118 lines
2.6 KiB
TypeScript
118 lines
2.6 KiB
TypeScript
import type { FC, ReactNode } from "react";
|
|
|
|
import { AppShell as MantineAppShell, NavLink, Text } from "@mantine/core";
|
|
import {
|
|
BondsIcon,
|
|
CardsIcon,
|
|
PortfolioIcon,
|
|
SettingsIcon,
|
|
StocksIcon,
|
|
} from "@wealthledger/icons";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Outlet, NavLink as RouterNavLink, useLocation } from "react-router";
|
|
|
|
import classes from "./AppShell.module.css";
|
|
|
|
type AppShellProps = {
|
|
contentAboveOutlet?: ReactNode;
|
|
};
|
|
|
|
const AppShell: FC<AppShellProps> = (props) => {
|
|
const { contentAboveOutlet } = props;
|
|
const { t } = useTranslation();
|
|
const { pathname } = useLocation();
|
|
|
|
const items = [
|
|
{
|
|
icon: <PortfolioIcon size={20} />,
|
|
iconClassName: classes.portfolioIcon,
|
|
label: t("navigation.accounts"),
|
|
to: "/accounts",
|
|
},
|
|
{
|
|
icon: <CardsIcon size={20} />,
|
|
iconClassName: classes.cardsIcon,
|
|
label: t("navigation.cards"),
|
|
to: "/cards",
|
|
},
|
|
{
|
|
icon: <StocksIcon size={20} />,
|
|
iconClassName: classes.stocksIcon,
|
|
label: t("navigation.stocks"),
|
|
to: "/stocks",
|
|
},
|
|
{
|
|
icon: <BondsIcon size={20} />,
|
|
iconClassName: classes.bondsIcon,
|
|
label: t("navigation.bonds"),
|
|
to: "/bonds",
|
|
},
|
|
{
|
|
icon: <SettingsIcon size={20} />,
|
|
iconClassName: classes.settingsIcon,
|
|
label: t("navigation.settings"),
|
|
to: "/settings",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<MantineAppShell
|
|
header={{ height: 60 }}
|
|
navbar={{ breakpoint: "sm", collapsed: { mobile: true }, width: 220 }}
|
|
padding="md"
|
|
>
|
|
<MantineAppShell.Header className={classes.header}>
|
|
<Text fw={700}>{t("appName")}</Text>
|
|
</MantineAppShell.Header>
|
|
|
|
<MantineAppShell.Navbar p="sm">
|
|
{items.map(item => (
|
|
<NavLink
|
|
active={pathname.startsWith(item.to)}
|
|
className={classes.navLink}
|
|
component={RouterNavLink}
|
|
key={item.to}
|
|
label={item.label}
|
|
leftSection={(
|
|
<span
|
|
className={`${classes.navIcon} ${item.iconClassName ?? ""}`}
|
|
>
|
|
{item.icon}
|
|
</span>
|
|
)}
|
|
to={item.to}
|
|
/>
|
|
))}
|
|
</MantineAppShell.Navbar>
|
|
|
|
<MantineAppShell.Main className={classes.main}>
|
|
<div className={classes.content}>
|
|
{contentAboveOutlet}
|
|
|
|
<Outlet />
|
|
</div>
|
|
</MantineAppShell.Main>
|
|
|
|
<nav aria-label={t("appName")} className={classes.bottomNav}>
|
|
{items.map((item) => {
|
|
const appearanceClass = pathname.startsWith(item.to)
|
|
? classes.active
|
|
: undefined;
|
|
|
|
return (
|
|
<RouterNavLink
|
|
className={appearanceClass}
|
|
key={item.to}
|
|
to={item.to}
|
|
>
|
|
{item.label}
|
|
</RouterNavLink>
|
|
);
|
|
})}
|
|
</nav>
|
|
</MantineAppShell>
|
|
);
|
|
};
|
|
|
|
export { AppShell };
|