56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import { faCirclePlus } from "@fortawesome/pro-regular-svg-icons";
|
|
import { JSX, Show, Suspense } from "solid-js";
|
|
import "../styles/components/NavBar.scss";
|
|
import { FontAwesomeIcon } from "./FontAwesomeIcon";
|
|
import NavUser from "./NavUser";
|
|
|
|
export function Li(props: {
|
|
href: string;
|
|
action?: () => void;
|
|
name?: string;
|
|
children?: JSX.Element;
|
|
}) {
|
|
return (
|
|
<li class="navElem flex-row thick">
|
|
<a
|
|
class="flex-row"
|
|
href={props.href}
|
|
onClick={() => props.action && props.action()}
|
|
>
|
|
{props.children ?? <></>}
|
|
<Show when={props.name}>
|
|
<span>{props.name}</span>
|
|
</Show>
|
|
</a>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
function NavBar() {
|
|
return (
|
|
<nav class="flex-row responsive">
|
|
<ul class="flex-row responsive thick">
|
|
<Li href="/" name="li'l Judd">
|
|
<img src="/assets/logox256.png" alt="The Bots Logo" />
|
|
</Li>
|
|
<Li href="/features" name="Features" />
|
|
<Li href="/how-do-i" name="How do I...?" />
|
|
<Li href="/stack" name="The Stack" />
|
|
<Li href="/about" name="About" />
|
|
</ul>
|
|
<ul class="flex-row responsive thick">
|
|
<Li
|
|
href="https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=18977581952080&scope=bot"
|
|
name="Invite to your server"
|
|
>
|
|
<FontAwesomeIcon class="lower" icon={faCirclePlus} size="xl" />
|
|
</Li>
|
|
<Suspense>
|
|
<NavUser />
|
|
</Suspense>
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
export default NavBar;
|