Update Dependencies and Refactor Navbar
This commit is contained in:
127
src/components/Navbar.svelte
Normal file
127
src/components/Navbar.svelte
Normal file
@@ -0,0 +1,127 @@
|
||||
<!--
|
||||
- This file is a part of the SteamWar software.
|
||||
-
|
||||
- Copyright (C) 2024 SteamWar.de-Serverteam
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as published by
|
||||
- the Free Software Foundation, either version 3 of the License, or
|
||||
- (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import {Image} from "astro:assets";
|
||||
import "../styles/button.css";
|
||||
import {CaretDownOutline} from "flowbite-svelte-icons";
|
||||
import {t} from "astro-i18n";
|
||||
import {l} from "../util/util";
|
||||
import {onMount} from "svelte";
|
||||
|
||||
let navbar: HTMLDivElement;
|
||||
|
||||
onMount(() => {
|
||||
handleScroll();
|
||||
})
|
||||
|
||||
function handleScroll() {
|
||||
if (window.scrollY > 0) {
|
||||
navbar.classList.add("scrolled");
|
||||
} else {
|
||||
navbar.classList.remove("scrolled");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:scroll={handleScroll}/>
|
||||
|
||||
<nav 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" bind:this={navbar}>
|
||||
<div class="flex flex-col md:flex-row items-center justify-evenly md:justify-between match">
|
||||
<a class="flex items-center" href={l("/")}>
|
||||
<slot name="logo"></slot>
|
||||
<h1 class="text-2xl uppercase font-bold inline-block dark:text-white">
|
||||
{t("navbar.title")}
|
||||
<span class="scrolled" style="display: none"></span>
|
||||
</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>
|
||||
|
||||
<style lang="scss">
|
||||
.scrolled {
|
||||
@apply text-white;
|
||||
|
||||
&::before {
|
||||
@apply scale-y-100;
|
||||
}
|
||||
}
|
||||
|
||||
.match {
|
||||
width: min(100vw, 70em);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user