SteamWar/Website
9
0
Fork 0
Code Issues 2 Pull Requests 1 Packages Projects Releases Wiki Activity

Update Dependencies and Refactor Navbar

Browse Source
This commit is contained in:
Chaoscaot
2024-02-25 11:24:19 +01:00
parent 04859c6858
commit 4c1b337676
7 changed files with 916 additions and 553 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/layouts/NavbarLayout.astro
View File

@@ -3,10 +3,12 @@ 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 {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;
@@ -16,98 +18,10 @@ const {title, description} = Astro.props;
<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">
<button class="btn btn-gray">
<a href={l("/")}>
<span class="btn__text">{t("navbar.links.home.title")}</span>
</a>
<CaretDownOutline class="ml-2 mt-auto"/>
</button>
<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">
<button class="btn btn-gray">
<a rel="prefetch" href={l("/rules")}>
<span class="btn__text">{t("navbar.links.rules.title")}</span>
</a>
<CaretDownOutline class="ml-2 mt-auto"/>
</button>
<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>
<!-- TODO: Add help center
<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>
<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>
@@ -157,14 +71,6 @@ const {title, description} = Astro.props;
}
}
.scrolled {
@apply text-white;
&::before {
@apply scale-y-100;
}
}
.match {
width: min(100vw, 70em);
}