Improve navigation

src/components/Nav.svelte

@@ -1,21 +1,36 @@
-<script>
-    export let segment;
-    export let rightComponent;
+<script lang="ts">
+    export let segment: any;
+    export let rightComponent: any;
 </script>
 
 <style>
-    /*
-        .right {
-            margin-left: auto;
-            align-self: flex-end !important;
-        }
-     */
-
     a {
         font-size: 1rem;
         text-align: center;
     }
+
+    nav {
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+
+    ul {
+        display: flex;
+        font-weight: bold;
+        text-align: center;
+    }
+
+    ul li a {
+        text-decoration: none;
+        transition: color 0.1s linear;
+        padding: 4px 12px;
+    }
+
+    ul li a:hover {
+        border-bottom: 2px solid var(--line-color);
+    }
 </style>
+
 <header>
     <nav class="navbar navbar-expand">
         <!-- <a class="navbar-brand" href="/"></a>
@@ -37,4 +52,4 @@
             </li>
         </ul>
     </nav>
-</header>
+</header>