FrostByte/client-solid/src/Components/Menu.tsx
2023-11-22 15:29:27 +01:00

36 lines
907 B
TypeScript

import { A } from "@solidjs/router";
import { JSXElement, Show, useContext } from "solid-js";
import { LoginContext } from "../Context/GlobalState";
import { Home, Plus } from "../Util/Icons";
// Represents a single list item in the menu bar
export function MenuItem(props: {
href: string;
children: JSXElement;
}): JSXElement {
return (
<li>
<A class="justify-center" href={props.href} end>
{props.children}
</A>
</li>
);
}
// Represents the menu bar at the top of the page
export function Menu(): JSXElement {
const login_ctx = useContext(LoginContext)!;
return (
<Show when={login_ctx.loggedIn()}>
<ul class="menu space-y-2 rounded-box md:menu-horizontal md:space-x-2 md:space-y-0">
<MenuItem href="/">
<Home />
</MenuItem>
<MenuItem href="/new">
<Plus />
</MenuItem>
</ul>
</Show>
);
}