feat: implement header tab-based navigation

lib/spazio_solazzo_web/components/layouts.ex

@@ -35,6 +35,11 @@ defmodule SpazioSolazzoWeb.Layouts do
     default: nil,
     doc: "the current authenticated user"
 
+  attr :current_path, :string,
+    default: "",
+    required: false,
+    doc: "The path in the current URL"
+
   slot :inner_block, required: true
 
   def app(assigns) do
@@ -53,11 +58,53 @@ defmodule SpazioSolazzoWeb.Layouts do
         <ul class="menu menu-horizontal px-1">
           <%= if @current_user && @current_user.is_admin do %>
             <li>
-              <.link class="dark:hover:bg-secondary/20" navigate={~p"/admin/dashboard"}>
+              <.link
+                class={[
+                  "dark:hover:bg-secondary/20",
+                  String.starts_with?(@current_path, "/admin") &&
+                    "bg-base-200 dark:bg-secondary/20 dark:text-white"
+                ]}
+                navigate={~p"/admin/dashboard"}
+              >
                 Dashboard
               </.link>
             </li>
           <% end %>
+          <li>
+            <.link
+              class={[
+                "dark:hover:bg-secondary/20",
+                @current_path == "/arcipelago" && "bg-base-200 dark:bg-secondary/20 dark:text-white"
+              ]}
+              navigate={~p"/arcipelago"}
+            >
+              Arcipelago
+            </.link>
+          </li>
+
+          <li>
+            <.link
+              class={[
+                "dark:hover:bg-secondary/20",
+                @current_path == "/media-room" && "bg-base-200 dark:bg-secondary/20 dark:text-white"
+              ]}
+              navigate={~p"/media-room"}
+            >
+              Media Room
+            </.link>
+          </li>
+
+          <li>
+            <.link
+              class={[
+                "dark:hover:bg-secondary/20",
+                @current_path == "/hall" && "bg-base-200 dark:bg-secondary/20 dark:text-white"
+              ]}
+              navigate={~p"/hall"}
+            >
+              Hall
+            </.link>
+          </li>
         </ul>
       </div>
       <div class="navbar-end flex gap-3">
@@ -81,29 +128,80 @@ defmodule SpazioSolazzoWeb.Layouts do
         <% end %>
 
         <%!-- Mobile menu --%>
-        <%= if @current_user do %>
+        <div class={[
-          <div class="dropdown dropdown-end">
+          "dropdown dropdown-end",
-            <div
+          @current_user == nil && "md:hidden"
-              tabindex="0"
+        ]}>
-              role="button"
+          <div
-              class="btn btn-ghost p-2 hover:bg-secondary/20 border-none"
+            tabindex="0"
-            >
+            role="button"
-              <.menu_svg />
+            class="btn btn-ghost p-2 hover:bg-secondary/20 border-none"
-            </div>
+          >
-            <ul
+            <.menu_svg />
-              tabindex="-1"
+          </div>
-              class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow dark:shadow-none dark:border dark:border-white/40 bg-base-100 rounded-box w-52"
+          <ul
-            >
+            tabindex="-1"
-              <%= if @current_user && @current_user.is_admin do %>
+            class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow dark:shadow-none dark:border dark:border-white/40 bg-base-100 rounded-box w-52"
+          >
+            <li class="md:hidden">
+              <.link
+                navigate={~p"/arcipelago"}
+                class={[
+                  "dark:hover:bg-secondary/20",
+                  @current_path == "/arcipelago" && "bg-base-200 dark:bg-secondary/20 dark:text-white"
+                ]}
+              >
+                <.icon name="hero-briefcase" class="size-4" /> Arcipelago
+              </.link>
+            </li>
+
+            <li class="md:hidden">
+              <.link
+                navigate={~p"/media-room"}
+                class={[
+                  "dark:hover:bg-secondary/20",
+                  @current_path == "/media-room" && "bg-base-200 dark:bg-secondary/20 dark:text-white"
+                ]}
+              >
+                <.icon name="hero-computer-desktop" class="size-4" /> Media Room
+              </.link>
+            </li>
+
+            <li class="md:hidden">
+              <.link
+                navigate={~p"/hall"}
+                class={[
+                  "dark:hover:bg-secondary/20",
+                  @current_path == "/hall" && "bg-base-200 dark:bg-secondary/20 dark:text-white"
+                ]}
+              >
+                <.icon name="hero-musical-note" class="size-4" /> Hall
+              </.link>
+            </li>
+
+            <%= if @current_user do %>
+              <%= if @current_user.is_admin do %>
                 <li class="md:hidden">
-                  <.link navigate={~p"/admin/dashboard"}>
+                  <.link
+                    navigate={~p"/admin/dashboard"}
+                    class={[
+                      "dark:hover:bg-secondary/20",
+                      String.starts_with?(@current_path, "/admin") &&
+                        "bg-base-200 dark:bg-secondary/20 dark:text-white"
+                    ]}
+                  >
                     <.icon name="hero-squares-2x2" class="size-4" /> Dashboard
                   </.link>
                 </li>
               <% end %>
-
               <li class="md:hidden">
-                <.link navigate={~p"/profile"}>
+                <.link
+                  navigate={~p"/profile"}
+                  class={[
+                    "dark:hover:bg-secondary/20",
+                    @current_path == "/profile" && "bg-base-200 dark:bg-secondary/20 dark:text-white"
+                  ]}
+                >
                   <.icon name="hero-user" class="size-4" /> Profile
                 </.link>
               </li>
@@ -112,9 +210,9 @@ defmodule SpazioSolazzoWeb.Layouts do
                   <.icon name="hero-arrow-right-on-rectangle" class="size-4" /> Sign Out
                 </.link>
               </li>
-            </ul>
+            <% end %>
-          </div>
+          </ul>
-        <% end %>
+        </div>
       </div>
     </header>
 

lib/spazio_solazzo_web/live/admin/booking_management_live.html.heex

@@ -1,4 +1,4 @@
-<Layouts.app flash={@flash} current_user={@current_user}>
+<Layouts.app flash={@flash} current_user={@current_user} current_path={@current_path}>
   <main class="flex-grow px-4 py-8 md:px-8">
     <div class="max-w-6xl mx-auto flex flex-col gap-8">
       <.back_to_link

lib/spazio_solazzo_web/live/admin/dashboard_live.html.heex

@@ -1,4 +1,4 @@
-<Layouts.app flash={@flash} current_user={@current_user}>
+<Layouts.app flash={@flash} current_user={@current_user} current_path={@current_path}>
   <main class="flex-grow px-4 py-8 md:px-8">
     <div class="max-w-6xl mx-auto">
       <div class="mb-12 text-center">

lib/spazio_solazzo_web/live/admin/walk_in_live.html.heex

@@ -1,4 +1,4 @@
-<Layouts.app flash={@flash} current_user={@current_user}>
+<Layouts.app flash={@flash} current_user={@current_user} current_path={@current_path}>
   <main class="flex-1">
     <section class="mx-auto max-w-[1000px] px-6 py-10">
       <.back_to_link

lib/spazio_solazzo_web/live/assign_path_hook.ex

@@ -0,0 +1,17 @@
+defmodule SpazioSolazzoWeb.AssignPathHook do
+  @moduledoc """
+  Attach a `handle_params` hook on any live view that injects the current path from the URL into the socket assigns
+  """
+
+  import Phoenix.Component
+  import Phoenix.LiveView
+
+  def on_mount(:default, _params, _session, socket) do
+    {:cont, attach_hook(socket, :set_current_path, :handle_params, &handle_path_update/3)}
+  end
+
+  defp handle_path_update(_params, url, socket) do
+    %{path: path} = URI.parse(url)
+    {:cont, assign(socket, :current_path, path)}
+  end
+end

lib/spazio_solazzo_web/live/landing/coworking_live.html.heex

@@ -1,4 +1,4 @@
-<Layouts.app flash={@flash} current_user={@current_user}>
+<Layouts.app flash={@flash} current_user={@current_user} current_path={@current_path}>
   <.page_header
     booking_path={~p"/book/space/#{@space.slug}"}
     booking_label="Request a desk"

lib/spazio_solazzo_web/live/landing/meeting_live.html.heex

@@ -1,4 +1,4 @@
-<Layouts.app flash={@flash} current_user={@current_user}>
+<Layouts.app flash={@flash} current_user={@current_user} current_path={@current_path}>
   <.page_header
     booking_path={~p"/book/space/#{@space.slug}"}
     booking_label="Booking request"

lib/spazio_solazzo_web/live/landing/music_live.html.heex

@@ -1,4 +1,4 @@
-<Layouts.app flash={@flash} current_user={@current_user}>
+<Layouts.app flash={@flash} current_user={@current_user} current_path={@current_path}>
   <.page_header
     booking_path={~p"/book/space/#{@space.slug}"}
     booking_label="Booking request"

lib/spazio_solazzo_web/live/user/profile_live.html.heex

@@ -1,4 +1,4 @@
-<Layouts.app flash={@flash} current_user={@current_user}>
+<Layouts.app flash={@flash} current_user={@current_user} current_path={@current_path}>
   <div class="mx-auto max-w-[800px] px-6 py-12">
     <.back_to_link
       navigate={~p"/"}

lib/spazio_solazzo_web/router.ex

@@ -31,7 +31,8 @@ defmodule SpazioSolazzoWeb.Router do
 
     ash_authentication_live_session :unauthenticated_routes,
       on_mount: [
-        {SpazioSolazzoWeb.LiveUserAuth, :live_user_optional}
+        {SpazioSolazzoWeb.LiveUserAuth, :live_user_optional},
+        SpazioSolazzoWeb.AssignPathHook
       ] do
       live "/", PageLive
       live "/arcipelago", CoworkingLive
@@ -41,7 +42,8 @@ defmodule SpazioSolazzoWeb.Router do
 
     ash_authentication_live_session :no_user_routes,
       on_mount: [
-        {SpazioSolazzoWeb.LiveUserAuth, :live_no_user}
+        {SpazioSolazzoWeb.LiveUserAuth, :live_no_user},
+        SpazioSolazzoWeb.AssignPathHook
       ] do
       live "/sign-in/callback", AuthCallbackLive
       live "/sign-in", SignInLive
@@ -49,7 +51,8 @@ defmodule SpazioSolazzoWeb.Router do
 
     ash_authentication_live_session :authenticated_routes,
       on_mount: [
-        {SpazioSolazzoWeb.LiveUserAuth, :live_user_required}
+        {SpazioSolazzoWeb.LiveUserAuth, :live_user_required},
+        SpazioSolazzoWeb.AssignPathHook
       ] do
       live "/book/space/:space_slug", SpaceBookingLive
       live "/bookings/cancel", BookingCancellationLive
@@ -58,7 +61,8 @@ defmodule SpazioSolazzoWeb.Router do
 
     ash_authentication_live_session :admin_routes,
       on_mount: [
-        {SpazioSolazzoWeb.LiveUserAuth, :live_admin_required}
+        {SpazioSolazzoWeb.LiveUserAuth, :live_admin_required},
+        SpazioSolazzoWeb.AssignPathHook
       ] do
       live "/admin/dashboard", Admin.DashboardLive
       live "/admin/bookings", Admin.BookingManagementLive