78 lines
2 KiB
TypeScript
78 lines
2 KiB
TypeScript
import { JSXElement, Show, useContext } from "solid-js";
|
|
import { A } from "@solidjs/router";
|
|
import { LoginContext } from "./Root";
|
|
import { ModalContext } from "./Root";
|
|
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 (
|
|
<ul class="menu md:menu-horizontal space-y-2 md:space-x-2 md:space-y-0 rounded-box">
|
|
<MenuItem href="/">
|
|
<Home />
|
|
</MenuItem>
|
|
<Show when={login_ctx?.token()}>
|
|
<MenuItem href="/new">
|
|
<Plus />
|
|
</MenuItem>
|
|
</Show>
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
export function Navbar(): JSXElement {
|
|
const modal_ctx = useContext(ModalContext);
|
|
const login_ctx = useContext(LoginContext);
|
|
|
|
const logout = (): void => {
|
|
localStorage.removeItem("token");
|
|
localStorage.removeItem("username");
|
|
login_ctx?.setToken("");
|
|
login_ctx?.setUsername("");
|
|
};
|
|
|
|
const clickHandler = (): void => {
|
|
if (login_ctx?.token() != "") logout();
|
|
else modal_ctx?.setLoginModalOpen(true);
|
|
};
|
|
|
|
return (
|
|
<div class="navbar text-neutral-content max-w-3xl max-w rounded-box md:my-4">
|
|
<div class="flex-1">
|
|
<A href={"/"} class="btn btn-ghost normal-case pl-1 text-xl">
|
|
<Flake />
|
|
FrostByte
|
|
</A>
|
|
</div>
|
|
<div class="flex">
|
|
<Menu />
|
|
</div>
|
|
<div class="flex-1 justify-end flex">
|
|
<A
|
|
href="#"
|
|
class="btn btn-ghost capitalize pr-1 text-sm"
|
|
onClick={clickHandler}
|
|
>
|
|
{
|
|
<Show when={login_ctx?.username()} fallback="Login">
|
|
{login_ctx?.username()}
|
|
</Show>
|
|
}
|
|
<UserCircle />
|
|
</A>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|