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

style: Improve code formatting and readability across multiple components
All checks were successful
SteamWarCI Build successful
Details

Browse Source
This commit is contained in:
Chaoscaot
2025-05-07 14:33:48 +02:00
parent b3598e1ee1
commit 6377799e1b
7 changed files with 169 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/Navbar.svelte
View File

@ -19,18 +19,18 @@
<script lang="ts">
import "../styles/button.css";
import {CaretDownOutline, SearchOutline} from "flowbite-svelte-icons";
import {t} from "astro-i18n";
import {l} from "../util/util";
import {onMount} from "svelte";
import {loggedIn} from "@repo/authv2.ts";
interface Props {
logo?: import('svelte').Snippet;
}
import { CaretDownOutline, SearchOutline } from "flowbite-svelte-icons";
import { t } from "astro-i18n";
import { l } from "../util/util";
import { onMount } from "svelte";
import { loggedIn } from "@repo/authv2.ts";
interface Props {
logo?: import("svelte").Snippet;
}
let { logo }: Props = $props();
let { logo }: Props = $props();
let navbar = $state<HTMLDivElement>();
let navbar = $state<HTMLElement>();
let searchOpen = $state(false);
let accountBtn = $state<HTMLAnchorElement>();
@ -41,11 +41,11 @@
} else {
accountBtn!.href = l("/login");
}
})
});
onMount(() => {
handleScroll();
})
});
function handleScroll() {
if (window.scrollY > 0) {
@ -56,13 +56,17 @@
}
</script>
<svelte:window onscroll={handleScroll}/>
<svelte:window onscroll={handleScroll} />
<nav data-pagefind-ignore class="fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors z-10 flex justify-center before:backdrop-blur before:shadow-2xl 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}>
<nav
data-pagefind-ignore
class="z-20 fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors flex justify-center before:backdrop-blur before:shadow-2xl 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-row items-center justify-evenly md:justify-between match">
<a class="flex items-center" href={l("/")}>
{@render logo?.()}
<span class="text-2xl uppercase font-bold dark:text-white hidden md:inline-block">
<span class="text-2xl uppercase font-bold text-white hidden md:inline-block">
{t("navbar.title")}
<span class="before:scale-y-100" style="display: none" aria-hidden="true"></span>
</span>
@ -73,7 +77,7 @@
<a href={l("/")}>
<span class="btn__text">{t("navbar.links.home.title")}</span>
</a>
<CaretDownOutline class="ml-2 mt-auto"/>
<CaretDownOutline class="ml-2 mt-auto" />
</button>
<div>
<a class="btn btn-gray" href={l("/announcements")}>{t("navbar.links.home.announcements")}</a>
@ -87,7 +91,7 @@
<a rel="prefetch" href={l("/rules")}>
<span class="btn__text">{t("navbar.links.rules.title")}</span>
</a>
<CaretDownOutline class="ml-2 mt-auto"/>
<CaretDownOutline class="ml-2 mt-auto" />
</button>
<div>
<a href={l("/rules/wargear")} class="btn btn-gray">{t("navbar.links.rules.wg")}</a>
@ -96,10 +100,8 @@
<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/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.ranked")}</h2>
<a href={l("/rangliste/missilewars")} class="btn btn-gray">{t("navbar.links.ranked.mw")}</a>
@ -141,4 +143,4 @@
.match {
width: min(100vw, 70em);
}
</style>
</style>