+
<%= for item <- @items do %>
<%= if item[:patch] || item[:navigate] || item[:href] || item[:phx_click] do %>
<.link
@@ -41,12 +41,12 @@ defmodule AtomicWeb.Components.Dropdown do
JS.hide(to: "##{@id}", transition: {"ease-in duration-75", "transform opacity-100 scale-100", "transform opacity-0 scale-95"})
end
}
- class={"#{item[:class]} flex items-center gap-x-2 px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 hover:text-zinc-900"}
+ class={"#{item[:class]} flex items-center gap-x-2 rounded-sm p-2 text-sm text-zinc-700 hover:bg-zinc-100 hover:text-zinc-900"}
role="menuitem"
method={Map.get(item, :method, "get")}
>
<%= if item[:icon] do %>
- <.icon name={item.icon} class="size-5 ml-2 inline-block" />
+ <.icon name={item.icon} class={"#{item[:icon_class]} size-5 inline-block"} />
<% end %>
{item.name}
diff --git a/lib/atomic_web/components/organizations.ex b/lib/atomic_web/components/organizations.ex
index 9a575a8ce..2fe60f490 100644
--- a/lib/atomic_web/components/organizations.ex
+++ b/lib/atomic_web/components/organizations.ex
@@ -2,7 +2,7 @@ defmodule AtomicWeb.Components.Organizations do
@moduledoc false
use AtomicWeb, :live_component
- import AtomicWeb.Components.Avatar
+ import AtomicWeb.Components.{Avatar, Accordion}
alias Atomic.Accounts
alias Atomic.Organizations
@@ -10,35 +10,61 @@ defmodule AtomicWeb.Components.Organizations do
@impl true
def render(assigns) do
~H"""
-
- <%= for organization <- @organizations do %>
- -
-
+ <.accordion id={"#{@id}-accordion"} class="flex-grow rounded-md border" controlled={true}>
+ <:trigger>
+ <%= if @current_organization do %>
+
+ <.avatar
+ class={"#{(@current_organization && @current_organization.id == @current_organization.id) && "text-primary-600"} border border-zinc-200 group-hover:text-primary-500"}
+ src={Uploaders.Logo.url({@current_organization.logo, @current_organization}, :original)}
+ name={@current_organization.name}
+ size={:xs}
+ type={:organization}
+ color={:white}
+ />
+ {@current_organization.name}
+
+ <% else %>
+
+ <.icon name="hero-pencil-solid" class="size-5 shrink-0 text-zinc-400 group-hover:text-primary-500" />
+ {gettext("Pick an organization")}
+
+ <% end %>
+
+ <:panel>
+
+ type="button"
+ >
+ <.avatar
+ class={"#{(@current_organization && organization.id == @current_organization.id) && "text-primary-600"} border border-zinc-200 group-hover:text-primary-500"}
+ src={Uploaders.Logo.url({organization.logo, organization}, :original)}
+ name={organization.name}
+ size={:xs}
+ type={:organization}
+ color={:white}
+ />
+
{organization.name}
+
+
+ <% end %>
+
+
+
+
"""
end
diff --git a/lib/atomic_web/components/sidebar.ex b/lib/atomic_web/components/sidebar.ex
index 3d5585d9f..d82b55ca2 100644
--- a/lib/atomic_web/components/sidebar.ex
+++ b/lib/atomic_web/components/sidebar.ex
@@ -19,7 +19,6 @@ defmodule AtomicWeb.Components.Sidebar do
~H"""
- <.sidebar_header />
<.sidebar_list current_user={@current_user} current_organization={@current_organization} current_page={@current_page} />
@@ -44,14 +43,12 @@ defmodule AtomicWeb.Components.Sidebar do
<.sidebar_dropdown current_user={@current_user} orientation={:down} />