From 9c4c2557a824a3374428bb037a5e8fe8ecb40f90 Mon Sep 17 00:00:00 2001
From: Chris Dill <chris.rj.dill@gmail.com>
Date: Mon, 23 May 2022 21:06:56 +0100
Subject: [PATCH] Improve navigation

---
 src/components/Nav.svelte     | 37 +++++++++++++++++--------
 src/routes/admin/index.svelte | 52 +++++++++++++++++++++++++++++++++--
 static/css/global.css         | 30 ++------------------
 3 files changed, 78 insertions(+), 41 deletions(-)

diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 808c647..e4dcaac 100644
--- a/src/components/Nav.svelte
+++ b/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>
\ No newline at end of file
+</header>
diff --git a/src/routes/admin/index.svelte b/src/routes/admin/index.svelte
index 05eaf23..a6276fd 100644
--- a/src/routes/admin/index.svelte
+++ b/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>
\ No newline at end of file
+</main>
diff --git a/static/css/global.css b/static/css/global.css
index 571871e..ed250a2 100755
--- a/static/css/global.css
+++ b/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 */