Improve navigation

src/components/Nav.svelte

@@ -1,21 +1,36 @@
-<script>
+<script lang="ts">
-    export let segment;
+    export let segment: any;
-    export let rightComponent;
+    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>

src/routes/admin/index.svelte

@@ -2,6 +2,40 @@
     import Banner from '../../components/Banner.svelte'
 </script>
 
+<style>
+    section {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+    }
+
+    ul {
+        padding: 0 !important;
+    }
+
+    li {
+        display: flex;
+        padding-bottom: 10px;
+        margin-bottom: 5px;
+    }
+
+    li a {
+        display: flex;
+        font-weight: bold;
+        font-size: 1.25rem;
+        border-bottom: 2px solid transparent;
+    }
+
+    li a:hover {
+        border-bottom: 2px solid white;
+    }
+
+    h2 {
+        line-height: 1.4;
+        margin-bottom: 20px;
+    }
+</style>
+
 <svelte:head>
     <title>Quartznet - Admin</title>
 </svelte:head>
@@ -10,6 +44,20 @@
 
 <main class="container">
     <section>
-        this is not done
+        <h2>Services</h2>
+        <ul>
+            <li>
+                <a href="https://quartznet.info/status">Status</a>
+            </li>
+            <li>
+                <a href="https://quartznet.info/music/">MyMPD</a>
+            </li>
+            <li>
+                <a href="https://quartznet.info/media/web">Jellyfin</a>
+            </li>
+            <li>
+                <a href="https://quartznet.info/git">Gitea</a>
+            </li>
+        </ul>
     </section>
-</main>
+</main>

static/css/global.css

@@ -49,41 +49,15 @@ header {
   padding-bottom: 4px;
 }
 
-nav {
-  /* border: 2px solid red; */
-  /* align-items: center; */
-  /* display: flex; */
-  /* flex-direction: row; */
-  /* justify-content: space-between; */
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-nav li {
-  font-size: 1rem;
-  font-weight: bold;
-  text-align: center;
-}
-
-/* Link effects */
-nav li a {
-  padding: 4px 8px;
-  text-decoration: none;
-  transition: color 0.1s linear;
-}
-
-nav li a:hover {
-  border-bottom: 2px solid var(--line-color);
-  text-decoration: none;
-}
-
 a {
+  text-decoration: none;
   color: var(--link-color);
   transition: color 0.1s linear;
 }
 
 a:hover {
   color: var(--link-color-hover);
+  text-decoration: none;
 }
 
 /* Banner */