[+] Navbar

AquaNet/package.json

@@ -10,6 +10,7 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
+    "@iconify/svelte": "^3.1.6",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@tsconfig/svelte": "^5.0.2",
     "sass": "^1.70.0",

AquaNet/src/App.svelte

@@ -1,15 +1,53 @@
 <script lang="ts">
   import { Router, Route } from "svelte-routing";
   import Home from "./pages/Home.svelte";
-
   import MaimaiRating from "./pages/MaimaiRating.svelte";
   import UserHome from "./pages/UserHome.svelte";
+  import Icon from '@iconify/svelte';
 
   export let url = "";
 </script>
 
+<nav>
+  <div>home</div>
+  <div>maps</div>
+  <div>rankings</div>
+  <Icon icon="tabler:search" />
+</nav>
+
 <Router {url}>
   <Route path="/"><Home /></Route>
   <Route path="/u/:userId" component={UserHome}></Route>
   <Route path="/u/:userId/mai/rating" component={MaimaiRating}></Route>
 </Router>
+
+<style lang="sass">
+  @import "vars"
+
+  nav
+    display: flex
+    justify-content: flex-end
+    align-items: center
+    gap: 32px
+    height: $nav-height
+
+    padding: 0 48px
+
+    z-index: 10
+    position: relative
+
+    > div
+      cursor: pointer
+      transition: all 0.2s ease
+      text-decoration: underline 1px solid transparent
+      text-underline-offset: 0.1em
+
+      &:hover
+        color: $c-main
+        text-decoration-color: $c-main
+        text-underline-offset: 0.5em
+
+    @media (max-width: $w-mobile)
+      justify-content: center
+
+</style>

AquaNet/src/pages/Home.svelte

@@ -29,6 +29,8 @@
     flex-direction: column
     justify-content: center
 
+    margin-top: -$nav-height
+
     > h1
       font-family: Quicksand, $font
       user-select: none

AquaNet/src/vars.sass

@@ -1,4 +1,7 @@
-$font: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif
+$font: Quicksand, Inter, system-ui, Avenir, Helvetica, Arial, sans-serif
 $c-main: #b3c6ff
 $c-darker: #646cff
 $c-bg: #242424
+
+$nav-height: 4rem
+$w-mobile: 560px

AquaNet/yarn.lock

@@ -125,6 +125,18 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz#c57c8afbb4054a3ab8317591a0b7320360b444ae"
   integrity sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==
 
+"@iconify/svelte@^3.1.6":
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/@iconify/svelte/-/svelte-3.1.6.tgz#060821ecae5dd92e9c1f0420a674eda5bc060086"
+  integrity sha512-yLSrlkOx5J6xXU5GDLPBV/MdVBVEZhd36onfqSbxQobp1XBoWQbMPLNZyCAmTKCPnmzXSowGy79agl8FQ3kj6A==
+  dependencies:
+    "@iconify/types" "^2.0.0"
+
+"@iconify/types@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
+  integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==
+
 "@jridgewell/gen-mapping@^0.3.0":
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"