From 28ac30a48f9cb4e5a6e563dba67dfe79db8a7d1f Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Sat, 3 Jan 2026 12:16:29 -0600
Subject: [PATCH] Add dropdown menu for organization name with Switch Org,
 Settings, and Log out options

---
 lib/towerops_web/components/layouts.ex | 59 +++++++++++++++++---------
 1 file changed, 38 insertions(+), 21 deletions(-)

diff --git a/lib/towerops_web/components/layouts.ex b/lib/towerops_web/components/layouts.ex
index f5419e0f..e41375e1 100644
--- a/lib/towerops_web/components/layouts.ex
+++ b/lib/towerops_web/components/layouts.ex
@@ -92,29 +92,46 @@ defmodule ToweropsWeb.Layouts do
                 </.nav_link>
               </div>
             </div>
-            <div class="flex items-center space-x-6">
-              <span :if={@current_organization} class="text-sm text-zinc-600 dark:text-zinc-400">
+            <div :if={@current_organization} class="relative">
+              <button
+                type="button"
+                id="org-menu-button"
+                phx-click={JS.toggle(to: "#org-menu")}
+                class="flex items-center gap-2 text-sm font-medium text-zinc-700 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
+              >
                 {@current_organization.name}
-              </span>
-              <.link
-                navigate={~p"/orgs"}
-                class="text-sm font-medium text-zinc-700 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
+                <.icon name="hero-chevron-down" class="h-4 w-4" />
+              </button>
+
+              <div
+                id="org-menu"
+                class="hidden absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-zinc-800 dark:ring-zinc-700"
+                phx-click-away={JS.hide(to: "#org-menu")}
               >
-                Switch Org
-              </.link>
-              <.link
-                navigate={~p"/users/settings"}
-                class="text-sm font-medium text-zinc-700 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
-              >
-                Settings
-              </.link>
-              <.link
-                href={~p"/users/log-out"}
-                method="delete"
-                class="text-sm font-medium text-zinc-700 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
-              >
-                Log out
-              </.link>
+                <div class="py-1">
+                  <.link
+                    navigate={~p"/orgs"}
+                    class="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-700"
+                    phx-click={JS.hide(to: "#org-menu")}
+                  >
+                    Switch Org
+                  </.link>
+                  <.link
+                    navigate={~p"/users/settings"}
+                    class="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-700"
+                    phx-click={JS.hide(to: "#org-menu")}
+                  >
+                    Settings
+                  </.link>
+                  <.link
+                    href={~p"/users/log-out"}
+                    method="delete"
+                    class="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-700"
+                  >
+                    Log out
+                  </.link>
+                </div>
+              </div>
             </div>
           </div>
         </div>