51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { useMatch } from "@solidjs/router";
|
|
import { Show } from "solid-js";
|
|
import { useAuth } from "~/components/Context";
|
|
|
|
export default function Nav() {
|
|
const { signedIn, logout } = useAuth();
|
|
const isHome = useMatch(() => "/");
|
|
const isAbout = useMatch(() => "/about");
|
|
|
|
return (
|
|
<nav class="fixed top-0 left-0 w-full bg-sky-800 shadow-sm z-50 flex items-center justify-between py-3 px-4 font-medium text-sm">
|
|
<a
|
|
href="/"
|
|
class={`px-3 py-2 text-sky-100 uppercase transition-colors duration-200 border-b-2 ${
|
|
isHome() ? "border-sky-300 text-white" : "border-transparent hover:text-white"
|
|
}`}
|
|
>
|
|
Home
|
|
</a>
|
|
<a
|
|
href="/about"
|
|
class={`px-3 py-2 text-sky-100 uppercase transition-colors duration-200 border-b-2 ${
|
|
isAbout() ? "border-sky-300 text-white" : "border-transparent hover:text-white"
|
|
}`}
|
|
>
|
|
About
|
|
</a>
|
|
<Show
|
|
when={signedIn()}
|
|
fallback={
|
|
<a
|
|
href="/login"
|
|
class="ml-auto px-4 py-2 text-sky-100 bg-sky-700 border border-sky-600 rounded-md hover:bg-sky-600 hover:text-white focus:outline-none transition-colors duration-200"
|
|
>
|
|
Login
|
|
</a>
|
|
}
|
|
>
|
|
<form action={logout} method="post" class="ml-auto">
|
|
<button
|
|
type="submit"
|
|
class="px-4 py-2 text-sky-100 bg-sky-700 border border-sky-600 rounded-md hover:bg-sky-600 hover:text-white focus:outline-none transition-colors duration-200"
|
|
>
|
|
Sign Out
|
|
</button>
|
|
</form>
|
|
</Show>
|
|
</nav>
|
|
);
|
|
}
|