[+] Navbar

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
+$c-bg: #242424
+
+$nav-height: 4rem
+$w-mobile: 560px