71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import { A } from "@solidjs/router";
|
|
import { JSXElement, Show, useContext } from "solid-js";
|
|
|
|
import { LoginContext, ModalContext } from "./GlobalState";
|
|
import { Flake, Home, Plus, UserCircle } from "./Icons";
|
|
|
|
// Represents a single list item in the menu bar
|
|
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
|
|
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>
|
|
);
|
|
}
|
|
|
|
export function Navbar(): JSXElement {
|
|
const modal_ctx = useContext(ModalContext)!;
|
|
const login_ctx = useContext(LoginContext)!;
|
|
|
|
const clickHandler = (): void => {
|
|
if (login_ctx.loggedIn()) login_ctx.logOut();
|
|
else modal_ctx.setLoginModalOpen(true);
|
|
};
|
|
|
|
return (
|
|
<div class="max-w navbar max-w-3xl rounded-box text-neutral-content md:my-4">
|
|
<div class="flex-1">
|
|
<A href={"/"} class="btn btn-ghost text-xl normal-case">
|
|
<Flake />
|
|
FrostByte
|
|
</A>
|
|
</div>
|
|
<div class="flex">
|
|
<Menu />
|
|
</div>
|
|
<div class="flex flex-1 justify-end">
|
|
<A
|
|
href="#"
|
|
class="btn btn-ghost text-sm capitalize"
|
|
onClick={clickHandler}
|
|
>
|
|
{
|
|
<Show when={login_ctx.loggedIn()} fallback="Login">
|
|
{login_ctx.username()}
|
|
</Show>
|
|
}
|
|
<UserCircle />
|
|
</A>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|