feat(menu): use a dropdown menu

Signed-off-by: SphericalKat <[email protected]>
SphericalKat · May 9, 2024 · f0efa78 · f0efa78
1 parent ca905d4
commit f0efa78
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 35 deletions.
diff --git a/assets/package-lock.json b/assets/package-lock.json
diff --git a/assets/package.json b/assets/package.json
@@ -17,6 +17,6 @@
     "fs-extra": "^10.0.0",
     "postcss": "^8.3.6",
     "postcss-import": "^15.0.0",
-    "tailwindcss": "^3.0.0"
+    "tailwindcss": "^3.4.3"
   }
 }
diff --git a/lib/ketbin_web/templates/layout/_user_menu.html.heex b/lib/ketbin_web/templates/layout/_user_menu.html.heex
@@ -1,8 +1,27 @@
+<script>
+function toggleDropdown() {
+    const dropdown = document.querySelector('#dropdown');
+    const dropdownLabel = document.querySelector('#dropdown-label');
+    if (dropdown.classList.contains('hidden')) {
+        dropdown.classList.remove('hidden');
+        dropdown.classList.add('absolute');
+        dropdownLabel.innerHTML = dropdownLabel.innerHTML.replace('▼', '▲');
+    } else {
+        dropdown.classList.add('hidden');
+        dropdown.classList.remove('absolute');
+        dropdownLabel.innerHTML = dropdownLabel.innerHTML.replace('▲', '▼');
+    }
+}
+</script>
 <ul>
 	<%= if @current_user do %>
-		<li><%= @current_user.email %></li>
-		<li><%= link "Settings", to: Routes.user_settings_path(@conn, :edit) %></li>
-		<li><%= link "Log out", to: Routes.user_session_path(@conn, :delete), method: :delete %></li>
+		<div class="relative">
+            <li id="dropdown-label" onclick="toggleDropdown()" class="text-[#ff9800] cursor-pointer select-none"><%= @current_user.email %> ▼</li>
+            <div id="dropdown" class="hidden right-0 z-50 bg-[#313131] px-4 py-2">
+                <li><%= link "Settings", to: Routes.user_settings_path(@conn, :edit) %></li>
+                <li><%= link "Log out", to: Routes.user_session_path(@conn, :delete), method: :delete %></li>
+            </div>
+        </div>
 	<% else %>
 		<li><%= link "Register", to: Routes.user_registration_path(@conn, :new) %></li>
 		<li><%= link "Log in", to: Routes.user_session_path(@conn, :new) %></li>