Merge pull request #243 from PowerPCFan/dev

Add icons back to navbar, fix icon spacing, fix Chinese locale flag, make navbar items use a snippet to avoid repeating code

Author: ctih1

.vscode/settings.json

@@ -1,46 +1,40 @@
 {
-    "i18n-ally.localesPaths": [
-        "src/locales"
-    ],
-    "i18n-ally.sourceLanguage": "en",
-    "i18n-ally.keystyle": "nested",
-    "editor.formatOnSave": true,
-    "[typescript]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "[svelte]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "[json]": {
-        "editor.quickSuggestions": {
-            "strings": true
-        },
-        "editor.suggest.insertMode": "replace",
-        "editor.defaultFormatter": "vscode.json-language-features",
-        "editor.formatOnSave": false
-    },
-    "editor.codeActionsOnSave": {
-        "source.organizeImports": "always",
-        "source.fixAll.eslint": "always"
-    },
-    "gitlens.advanced.blame.customArguments": [
-        "--ignore-revs-file",
-        ".git-blame-ignore-revs"
-    ],
-    "sherlock.editorColors": {
-    "info": {
-        "foreground": "#color",
-        "background": "rgba(number, number, number, 0.2)", // needs transparency
-        "border": "#color"
-    },
-    "error": {
-        "foreground": "#color",
-        "background": "rgba(number, number, number, 0.2)", // needs transparency
-        "border": "#color"
-    },
-    "messageLintRuleLevels": {
-		"messageLintRule.inlang.messageWithoutSource": "error",
+	"i18n-ally.localesPaths": ["src/locales"],
+	"i18n-ally.sourceLanguage": "en",
+	"i18n-ally.keystyle": "nested",
+	"editor.formatOnSave": true,
+	"[typescript]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[svelte]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[json]": {
+		"editor.quickSuggestions": {
+			"strings": true
+		},
+		"editor.suggest.insertMode": "replace",
+		"editor.defaultFormatter": "vscode.json-language-features",
+		"editor.formatOnSave": false
+	},
+	"editor.codeActionsOnSave": {
+		"source.organizeImports": "always",
+		"source.fixAll.eslint": "always"
+	},
+	"gitlens.advanced.blame.customArguments": ["--ignore-revs-file", ".git-blame-ignore-revs"],
+	"sherlock.editorColors": {
+		"info": {
+			"foreground": "#color",
+			"background": "rgba(number, number, number, 0.2)", // needs transparency
+			"border": "#color"
+		},
+		"error": {
+			"foreground": "#color",
+			"background": "rgba(number, number, number, 0.2)", // needs transparency
+			"border": "#color"
+		},
+		"messageLintRuleLevels": {
+			"messageLintRule.inlang.messageWithoutSource": "error"
+		}
 	}
 }
-
-}

package-lock.json

@@ -27,6 +27,9 @@
 			} else if (locale === "ar") {
 				flag = "sa";
 			}
+			if (locale.startsWith("zh_")) {
+				flag = locale.slice(3).toLowerCase();
+			}
 
 			const url = `https://flagcdn.com/${flag}.svg`;
 			await fetch(url)
@@ -49,7 +52,7 @@
 	class="bg-card flex h-full w-screen max-w-screen items-center space-x-6 pt-1 pr-4 pb-1 pl-4">
 	<button
 		id="popout-toggle"
-		class="hidden h-12 w-12"
+		class="relative hidden h-12 w-12"
 		onclick={_ => ($sidebarOpen = !$sidebarOpen)}>
 		{#key $sidebarOpen}
 			<div transition:fade={{ duration: 100 }} class="absolute top-0">
@@ -61,7 +64,10 @@
 			</div>
 		{/key}
 	</button>
-	{@render children()}
+
+	<div class="flex gap-4.5">
+		{@render children()}
+	</div>
 
 	<div class="mr-4 ml-auto flex space-x-2">
 		<Select.Root onValueChange={value => setLocale(value)} type="single" name="Language">
@@ -158,9 +164,6 @@
 {/if}
 
 <style>
-	:global(#header svg) {
-		display: none;
-	}
 	@media (max-width: 960px) {
 		:global(#header a) {
 			display: none;

src/lib/components/Header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { navigating } from "$app/stores";
+	import { navigating } from "$app/state";
 	import Analytics from "$lib/components/Analytics.svelte";
 	import Banner from "$lib/components/Banner.svelte";
 	import Header from "$lib/components/Header.svelte";
@@ -8,7 +8,7 @@
 	import { sidebarOpen } from "$lib/store";
 	import consola from "consola";
 	import NProgress from "nprogress";
-	import MaterialSymbolsAccountCircle from "~icons/material-symbols/account-circle";
+	import type { Component } from "svelte";
 	import MaterialSymbolsFlagRounded from "~icons/material-symbols/flag-rounded";
 	import MaterialSymbolsHomeRounded from "~icons/material-symbols/home-rounded";
 	import MaterialSymbolsMenuBookRounded from "~icons/material-symbols/menu-book-rounded";
@@ -28,12 +28,12 @@
 	});
 
 	$effect(() => {
-		if ($navigating) {
+		if (navigating) {
 			consola.debug("Starting navigation");
 			NProgress.start();
 		}
 
-		if (!$navigating) {
+		if (!navigating) {
 			$sidebarOpen = false;
 			NProgress.done();
 			consola.debug("Navigation done");
@@ -43,24 +43,41 @@
 	});
 </script>
 
+{#snippet navbarLink(Icon: Component, href: string, text: string, preload: boolean = true)}
+	{@const preloadValue = preload ? "hover" : "off"}
+
+	<a
+		class="hover:text-accent flex flex-row items-center justify-start gap-1.5 text-xl font-medium"
+		href={href}
+		data-sveltekit-preload-data={preloadValue}>
+		<Icon />{text}
+	</a>
+{/snippet}
+
 <Toaster />
+
 <Header>
-	<a class="flex flex-row text-xl font-medium" href={localizeHref("/")}
-		><MaterialSymbolsHomeRounded />{m.dashboard_home()}</a>
-	<a
-		class="flex flex-row items-center text-xl font-medium"
-		href={localizeHref("/dashboard")}
-		data-sveltekit-preload-data="off"><MaterialSymbolsTeamDashboard />{m.dashboard_navbar()}</a>
-	<a
-		class="flex flex-row text-xl font-medium"
-		href={localizeHref("/account/manage")}
-		data-sveltekit-preload-data="off"
-		><MaterialSymbolsAccountCircle />{m.dashboard_account()}</a>
-	<a class="flex flex-row text-xl font-medium" href={localizeHref("/report")}
-		><MaterialSymbolsFlagRounded />{m.dashboard_abuse()}</a>
-	<a class="flex flex-row items-center text-xl font-medium" href="https://guides.frii.site"
-		><MaterialSymbolsMenuBookRounded />{m.guides_link_navbar()}</a>
+	{@render navbarLink(MaterialSymbolsHomeRounded, localizeHref("/"), m.dashboard_home())}
+	{@render navbarLink(
+		MaterialSymbolsTeamDashboard,
+		localizeHref("/dashboard"),
+		m.dashboard_navbar(),
+		false
+	)}
+	{@render navbarLink(
+		MaterialSymbolsTeamDashboard,
+		localizeHref("/account/manage"),
+		m.dashboard_account(),
+		false
+	)}
+	{@render navbarLink(MaterialSymbolsFlagRounded, localizeHref("/report"), m.dashboard_abuse())}
+	{@render navbarLink(
+		MaterialSymbolsMenuBookRounded,
+		"https://guides.frii.site",
+		m.guides_link_navbar()
+	)}
 </Header>
+
 <Banner />
 
 <Analytics />
@@ -92,6 +109,7 @@
 
 	:global(a) {
 		color: var(--color-primary);
+		transition: color 0.2s ease-in-out;
 	}
 
 	:global(body) {