From 381c2b282d1e1ee7811bb9bca8f939abae7732e7 Mon Sep 17 00:00:00 2001
From: ElnuDev <elnu@elnu.com>
Date: Sat, 17 Jun 2023 13:16:30 -0700
Subject: [PATCH] Make navbar dropdown

---
 styles/sass/style.scss    | 38 ++++++++++++++++++++++++++++----------
 templates/index.html.tera | 17 +++++++++++------
 2 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/styles/sass/style.scss b/styles/sass/style.scss
index f821c0a..47c7805 100644
--- a/styles/sass/style.scss
+++ b/styles/sass/style.scss
@@ -42,7 +42,25 @@ body {
 
     display: flex;
 
-    & > * {
+    .dropdown {
+      position: relative;
+      display: flex;
+      padding: 0;
+
+      .dropdown-content {
+        flex-direction: column;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 100%;
+      }
+
+      &:not(:hover) .dropdown-content {
+        display: none !important;
+      }
+    }
+
+    & > *, .dropdown > a {
       padding: 0.45em;
 
       & > * {
@@ -50,17 +68,9 @@ body {
       }
     }
 
-    & > a {
+    a {
       color: var(--fg);
       font-weight: bold;
-
-      &:hover {
-        border: none;
-        --fg: #{$fg};
-        --bg: #{$bg};
-        background: var(--bg);
-        cursor: pointer;
-      }
     }
 
     & > .right {
@@ -74,6 +84,14 @@ body {
   }
 }
 
+.dropdown:hover > a, nav > a:hover {
+  border: none;
+  --fg: #{$fg};
+  --bg: #{$bg};
+  background: var(--bg);
+  cursor: pointer;
+}
+
 .svg-inline {
   height: 1em;
   vertical-align: -0.125em;
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 1f1c099..5423d0e 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -19,12 +19,17 @@
             </div>
             {% endif %}
             {% if user %}
-            <a href="#" class="right">
-                <span>{{ user.username }}</span> <img src="https://cdn.discordapp.com/avatars/{{ user.id }}/{{ user.avatar }}.webp?size=1024">
-            </a>
-            <a href="/logout">
-                <span>Log out</span>
-            </a>
+            <div class="dropdown right">
+                <a href="/users/{{ user.id }}">
+                    <span>{{ user.username }}</span> <img src="https://cdn.discordapp.com/avatars/{{ user.id }}/{{ user.avatar }}.webp?size=1024">
+                </a>
+                <nav class="dropdown-content">
+                    <a href="/logout">
+                        <span>Log out</span>
+                    </a>
+                </nav>
+            </div>
+
             {% else%}
             <a href="/login" class="right">Log in</a>
             {% endif %}