From b47933b8ca297fe04d06e1e0738cec2154e23c0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <93675410+MarioRodrigues10@users.noreply.github.com> Date: Mon, 9 Sep 2024 18:17:24 +0100 Subject: [PATCH 1/3] refactor: sidebar (#526) --- lib/atomic_web/components/sidebar.ex | 201 ++++++++++++++++ lib/atomic_web/config.ex | 7 - lib/atomic_web/live/home_live/index.html.heex | 2 +- .../templates/layout/_live_navbar.html.heex | 227 +----------------- .../templates/layout/live.html.heex | 2 +- 5 files changed, 210 insertions(+), 229 deletions(-) create mode 100644 lib/atomic_web/components/sidebar.ex diff --git a/lib/atomic_web/components/sidebar.ex b/lib/atomic_web/components/sidebar.ex new file mode 100644 index 000000000..083ac4b49 --- /dev/null +++ b/lib/atomic_web/components/sidebar.ex @@ -0,0 +1,201 @@ +defmodule AtomicWeb.Components.Sidebar do + @moduledoc false + use AtomicWeb, :component + + alias Phoenix.LiveView.JS + import AtomicWeb.Components.Icon + alias Atomic.Organizations + + attr :current_user, :map, required: true + attr :current_organization, :map, required: true + attr :current_page, :atom, required: true + attr :is_authenticated, :boolean, required: true + + def desktop_sidebar(assigns) do + user = assigns[:current_user] + organizations = get_organizations(user) + assigns = assign(assigns, :organizations, organizations) + + ~H""" + + + <.navigation current_user={@current_user} current_organization={@current_organization} current_page={@current_page} is_authenticated={@is_authenticated} /> + """ + end + + def mobile_sidebar(assigns) do + user = assigns[:current_user] + organizations = get_organizations(user) + assigns = assign(assigns, :organizations, organizations) + + ~H""" +
+
+ +
+ Open user menu + <.sidebar_dropdown current_user={@current_user} orientation={:down} /> +
+
+ + + +
+ """ + end + + defp navigation(assigns) do + user = assigns[:current_user] + organizations = get_organizations(user) + assigns = assign(assigns, :organizations, organizations) + + ~H""" + + """ + end + + defp sidebar_list(assigns) do + ~H""" + + """ + end + + defp sidebar_dropdown(assigns) do + ~H""" + <%= if @current_user do %> + + <:wrapper> + + + + <% else %> + <.link navigate={Routes.user_session_path(AtomicWeb.Endpoint, :new)} class="flex select-none items-center space-x-2 px-4 py-3 text-sm font-semibold leading-6 text-zinc-700 lg:px-0"> + + <.icon name={:arrow_right_end_on_rectangle} solid class="h-5 w-5" /> + + <% end %> + """ + end + + defp sidebar_header(assigns) do + ~H""" + <.link navigate={Routes.home_index_path(AtomicWeb.Endpoint, :index)} class="flex h-16 shrink-0 select-none items-center gap-x-4 pt-4"> + +

Atomic

+ + """ + end + + defp dropdown_items(nil), do: [] + defp dropdown_items(current_user), do: authenticated_dropdown_items(current_user) + + defp authenticated_dropdown_items(current_user) do + [ + %{ + name: gettext("Your profile"), + navigate: Routes.profile_show_path(AtomicWeb.Endpoint, :show, current_user) + }, + %{ + name: gettext("Sign out"), + href: Routes.user_session_path(AtomicWeb.Endpoint, :delete), + method: "delete" + } + ] + end + + defp show_mobile_sidebar(js \\ %JS{}) do + js + |> JS.show( + to: "#mobile-sidebar", + transition: + {"transition ease-in-out duration-300 transform", "-translate-x-full", "translate-x-0"} + ) + |> JS.show(to: "#sidebar-overlay") + |> JS.dispatch("focus", to: "#mobile-sidebar") + end + + defp hide_mobile_sidebar(js \\ %JS{}) do + js + |> JS.hide( + to: "#mobile-sidebar", + transition: + {"ease-out duration-300", "transform translate-x-0", "transform -translate-x-full"} + ) + |> JS.hide( + to: "#sidebar-overlay", + transition: {"ease-out duration-300", "opacity-100", "opacity-0"} + ) + |> JS.dispatch("focus", to: "#mobile-sidebar") + end + + defp user_image(user) do + if user.profile_picture do + Uploaders.ProfilePicture.url({user, user.profile_picture}, :original) + else + nil + end + end + + defp get_organizations(nil), do: [] + defp get_organizations(user), do: Organizations.list_user_organizations(user.id) +end diff --git a/lib/atomic_web/config.ex b/lib/atomic_web/config.ex index 72503fd54..46cfbe6d9 100644 --- a/lib/atomic_web/config.ex +++ b/lib/atomic_web/config.ex @@ -49,13 +49,6 @@ defmodule AtomicWeb.Config do url: Routes.partner_index_path(conn, :index, current_organization.id), tabs: [] }, - %{ - key: :memberships, - title: "Memberships", - icon: :user_plus, - url: Routes.home_index_path(conn, :index), - tabs: [] - }, %{ key: :scanner, title: "Scanner", diff --git a/lib/atomic_web/live/home_live/index.html.heex b/lib/atomic_web/live/home_live/index.html.heex index 094b6e80a..aba4aed0b 100644 --- a/lib/atomic_web/live/home_live/index.html.heex +++ b/lib/atomic_web/live/home_live/index.html.heex @@ -22,7 +22,7 @@ -
+
<.tabs class="max-w-5xl mx-auto pt-1 px-4 sm:px-6 lg:px-8"> <.tab id="tab-all" active={@current_tab == "all"} phx-click="load-all" phx-hook="ScrollToTop"> <%= gettext("All") %> diff --git a/lib/atomic_web/templates/layout/_live_navbar.html.heex b/lib/atomic_web/templates/layout/_live_navbar.html.heex index 258e6c1b7..05c750c9b 100644 --- a/lib/atomic_web/templates/layout/_live_navbar.html.heex +++ b/lib/atomic_web/templates/layout/_live_navbar.html.heex @@ -1,223 +1,10 @@ -
- -