61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import { useAuth } from "@/util/auth";
|
|
import { Stack, NavLink } from "@mantine/core";
|
|
import { Link, useLocation } from "@remix-run/react";
|
|
import {
|
|
IconBook2,
|
|
IconLogout,
|
|
IconPlaneDeparture,
|
|
IconUser,
|
|
} from "@tabler/icons-react";
|
|
|
|
export default function Navbar() {
|
|
const location = useLocation();
|
|
const page = location.pathname.split("/")[2];
|
|
|
|
const { user, signout } = useAuth();
|
|
|
|
return (
|
|
<Stack justify="space-between" h="100%">
|
|
<Stack gap="0">
|
|
<NavLink
|
|
p="md"
|
|
component={Link}
|
|
to="/logbook"
|
|
label="Dashboard"
|
|
leftSection={<IconPlaneDeparture />}
|
|
active={page == null}
|
|
/>
|
|
<NavLink
|
|
p="md"
|
|
component={Link}
|
|
to="/logbook/flights"
|
|
label="Flights"
|
|
leftSection={<IconBook2 />}
|
|
active={page === "flights"}
|
|
/>
|
|
</Stack>
|
|
<Stack gap="0">
|
|
<NavLink
|
|
p="md"
|
|
label={user ? user : "Not Logged In"}
|
|
leftSection={<IconUser />}
|
|
>
|
|
<NavLink
|
|
p="md"
|
|
component={Link}
|
|
to="/logbook/me"
|
|
label="Account"
|
|
leftSection={<IconUser />}
|
|
/>
|
|
<NavLink
|
|
p="md"
|
|
onClick={() => signout()}
|
|
label="Sign Out"
|
|
leftSection={<IconLogout />}
|
|
/>
|
|
</NavLink>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|