Files
Website/src/layouts/NavbarLayout.astro

77 lines
2.9 KiB
Plaintext

---
import {Image} from "astro:assets";
import Basic from "./Basic.astro";
import "../styles/button.css";
import localLogo from "../images/logo.png";
import {YoutubeSolid, DiscordSolid} from "flowbite-svelte-icons";
import {t} from "astro-i18n";
import {l} from "../util/util";
import Navbar from "@components/Navbar.svelte";
import ServerStatus from "../components/ServerStatus.svelte";
const {title, description} = Astro.props;
---
<Basic title={title} description={description}>
<slot name="head" slot="head"/>
<Fragment>
<div class="min-h-screen flex flex-col">
<Navbar client:idle>
<Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max"
class="mr-2 p-1 bg-black rounded-full" slot="logo"/>
</Navbar>
<main class="flex-1">
<slot/>
</main>
<footer class="bg-gray-900 w-full min-h-80 mt-4 pb-2 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 gap-y-4">
<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="/youtube">
<YoutubeSolid class="mr-2"/>
YouTube</a>
<a class="flex" href="/discord">
<DiscordSolid class="mr-2"/>
Discord</a>
</div>
</div>
<span class="text-sm text-white text-center mt-1">© SteamWar.de - Made with ❤️ by Chaoscaot</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 hover:underline;
}
}
.match {
width: min(100vw, 70em);
}
</style>