noctbot/web/src/components/Nav.svelte

<script lang="typescript">
    import { faBars } from "@fortawesome/free-solid-svg-icons";
    import Icon from "svelte-awesome/components/Icon.svelte";

    interface RouteDefinition {
        route: string;
        moderatorOnly: boolean;
        name: string;
    }
    export let routes!: RouteDefinition[];
    export let isModerator!: boolean;
    export let currentPath!: string;

    const bars = (faBars as unknown) as undefined;
    let showMenu = false;
</script>

<style>
    nav {
        @apply fixed w-screen z-10;
    }
    .nav-bar {
        @apply shadow-lg flex flex-col;
        background-color: #0a0d13;

        &.main {
            background-color: #07090d;
        }

        &.mobile-menu {
            @apply flex-row;
        }

        a {
            @apply text-white px-5 py-3;

            &:hover {
                @apply bg-gray-800 cursor-pointer;
            }

            &.active {
                @apply bg-gray-800;
            }
        }
    }

    .hide-menu {
        display: none;
    }

    .divider {
        @apply mx-0 my-2;
    }

    :global {
        svg.menu-icon {
            vertical-align: sub;
        }
    }

    @screen sm {
        .nav-bar.main {
            @apply px-4 h-12 flex-row items-center;
            background-color: #0a0d13;
        }

        .divider {
            @apply mx-auto my-0;
        }

        .nav-bar.mobile-menu {
            @apply hidden;
        }

        .hide-menu {
            display: flex;
        }
    }
</style>

<nav>
    <div class="nav-bar mobile-menu">
        <a href="/" class="mx-0" on:click|preventDefault={() => showMenu = !showMenu}><Icon data={bars} scale={1.2} class="menu-icon" /></a>
    </div>
    <div class="nav-bar main" class:hide-menu={!showMenu}>
        {#each routes as route (route.route)}
            {#if !route.moderatorOnly || (route.moderatorOnly && isModerator)}
                <a
                    href="/{route.route}"
                    class:active={route.route == currentPath} on:click={() => showMenu = false}>{route.name}</a>
            {/if}
        {/each}
        <span class="divider" />
        <a href="/logout">Log out</a>
    </div>
</nav>