graham/towerops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add dropdown menu for organization name with Switch Org, Settings, and Log out options

Browse source
This commit is contained in:
Graham McIntire 2026-01-03 12:16:29 -06:00
parent b0a17e7ea6
commit 28ac30a48f
No known key found for this signature in database
1 changed files with 38 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
lib/towerops_web/components/layouts.ex
View file

@ -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>