FrostByte/client-solid/src/Components/Menu.tsx

33 lines
841 B
TypeScript

import { A } from "@solidjs/router";
import { JSXElement, Show, useContext } from "solid-js";
import { LoginContext } from "../Context/GlobalState";
import { 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 menu-horizontal space-x-2 space-y-0 rounded-box md:space-x-5 md:space-y-0">
<MenuItem href="/new">
<Plus />
</MenuItem>
</ul>
</Show>
);
}