Make navbar dropdown

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;

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 %}