Website/src/layouts/NavbarLayout.astro

---
import { Image } from "astro:assets";
import Basic from "./Basic.astro";
import '../styles/button.css';
import localLogo from "../images/logo.png"
import {YoutubeSolid, DiscordSolid, CaretDownOutline} from "flowbite-svelte-icons"
import {t} from "astro-i18n";
import {l} from "../util/util"

import ServerStatus from "../components/ServerStatus.svelte";

const { title } = Astro.props;
---

<Basic title={title}>
    <slot name="head" slot="head" />
    <Fragment>
        <div class="min-h-screen flex flex-col">
            <nav-bar class="fixed top-0 left-0 right-0 px-4 transition-colors z-10 flex justify-center \
                            before:bg-black before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top">
                <div class="flex flex-col md:flex-row items-center justify-evenly md:justify-between match">
                    <a class="flex items-center" href={l("/")}>
                        <Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max" class="mr-2 p-1 bg-black rounded-full" />
                        <h1 class="text-2xl uppercase font-bold inline-block dark:text-white">
                            {t("navbar.title")}
                        </h1>
                    </a>
                    <div class="flex justify-center flex-wrap">
                        <div class="btn-dropdown my-1">
                            <div class="btn btn-gray" tabindex="1">
                                <a href={l("/")}>
                                    <span class="btn__text">{t("navbar.links.home.title")}</span>
                                </a>
                                <CaretDownOutline class="ml-2 mt-auto" />
                            </div>
                            <div>
                                <a class="btn btn-gray my-1" href={l("/announcements")}>{t("navbar.links.home.announcements")}</a>
                                <a class="btn btn-gray" href={l("/about")}>{t("navbar.links.home.about")}</a>
                                <a class="btn btn-gray" href={l("/downloads")}>{t("navbar.links.home.downloads")}</a>
                                <a class="btn btn-gray" href={l("/faq")}>{t("navbar.links.home.faq")}</a>
                            </div>
                        </div>
                        <div class="btn-dropdown my-1">
                            <div class="btn btn-gray" tabindex="1">
                                <a rel="prefetch" href={l("/rules")}>
                                    <span class="btn__text">{t("navbar.links.rules.title")}</span>
                                </a>
                                <CaretDownOutline class="ml-2 mt-auto" />
                            </div>
                            <div>
                                <h2 class="px-2 text-gray-300">{t("navbar.links.rules.gamemode")}</h2>
                                <a href={l("/rules/wargear")} class="btn btn-gray">{t("navbar.links.rules.wg")}</a>
                                <a href={l("/rules/miniwargear")} class="btn btn-gray">{t("navbar.links.rules.mwg")}</a>
                                <a href={l("/rules/warship")} class="btn btn-gray">{t("navbar.links.rules.ws")}</a>
                                <a href={l("/rules/airship")} class="btn btn-gray">{t("navbar.links.rules.as")}</a>
                                <a href={l("/rules/quickgear")} class="btn btn-gray">{t("navbar.links.rules.qg")}</a>
                                <h2 class="px-2 text-gray-300">{t("navbar.links.rules.rotating")}</h2>
                                <a href={l("/rules/megawargear")}class="btn btn-gray">{t("navbar.links.rules.megawg")}</a>
                                <a href={l("/rules/microwargear")}class="btn btn-gray">{t("navbar.links.rules.micro")}</a>
                                <a href={l("/rules/streetfight")}class="btn btn-gray">{t("navbar.links.rules.sf")}</a>
                                <h2 class="px-2 text-gray-300">{t("navbar.links.rules.general")}</h2>
                                <a class="btn btn-gray" href={l("/code-of-conduct")}>{t("navbar.links.rules.coc")}</a>
                            </div>
                        </div>
                        <div class="btn-dropdown my-1">
                            <div class="btn btn-gray" tabindex="1">
                                <a rel="prefetch">
                                    <span class="btn__text">{t("navbar.links.help.title")}</span>
                                </a>
                                <CaretDownOutline class="ml-2 mt-auto" />
                            </div>
                            <div>
                                <a class="btn btn-gray" href={l("/help")}>{t("navbar.links.help.center")}</a>
                                <a class="btn btn-gray">{t("navbar.links.help.docs")}</a>
                            </div>
                        </div>
                        <a class="btn my-1" href={l("/login")}>
                            <span class="btn__text">{t("navbar.links.account")}</span>
                        </a>
                    </div>
                </div>
            </nav-bar>
            <script>
                class Navbar extends HTMLElement {
                    constructor() {
                        super();
                        if (window.scrollY != 0) {
                            this.classList.add("scrolled");
                        } else {
                            this.classList.remove("scrolled");
                        }

                        window.onscroll = e => {
                            if (window.scrollY != 0) {
                                this.classList.add("scrolled");
                            } else {
                                this.classList.remove("scrolled");
                            }
                        }
                    }
                }

                customElements.define('nav-bar', Navbar);
            </script>
            <main class="flex-1">
                <slot />
            </main>
            <footer class="bg-gray-900 w-screen min-h-80 mt-4 rounded-t-2xl flex flex-col dark:bg-neutral-900">
                <div class="flex-1 flex justify-evenly items-center md:items-start mt-4 md:flex-row flex-col">
                    <div class="footer-card">
                        <h1>Serverstatus</h1>
                        <ServerStatus client:only="svelte" />
                    </div>
                    <div class="footer-card">
                        <h1>Links</h1>
                        <a href={l("/")}>{t("navbar.links.home.title")}</a>
                        <a href={l("/join")}>{t("footer.join")}</a>
                        <a href={l("/announcements")}>{t("footer.announcements")}</a>
                        <a href={l("/rules")}>{t("footer.gamemodes")}</a>
                        <a href={l("/stats/fight")}>{t("footer.stats")}</a>
                        <a href={l("/code-of-conduct")}>{t("footer.coc")}</a>
                        <a href={l("/privacy-policy")}>{t("footer.privacy")}</a>
                        <a href={l("/imprint")}>{t("footer.imprint")}</a>
                    </div>
                    <div class="footer-card">
                        <h1>Social Media</h1>
                        <a class="flex" href="/"><YoutubeSolid class="mr-2" /> YouTube</a>
                        <a class="flex" href="/"><DiscordSolid class="mr-2" /> Discord</a>
                    </div>
                </div>
                <span class="text-sm text-white text-center">© SteamWar.de - {new Date().getFullYear()}</span>
            </footer>
        </div>
    </Fragment>
</Basic>

<style>
    .footer-card {
        @apply w-40 text-gray-400 flex flex-col;
        >h1 {
            @apply text-xl font-bold text-gray-100;
        }
        >a {
            @apply underline;
        }
    }

    .scrolled {
        @apply text-white;

        &::before {
            @apply scale-y-100;
        }
    }

    .match {
        width: min(100vw, 70em);
    }
</style>