Bug: navbar menu dropdown fix (#870)

* add dropdown id

Author: srzeszut

lib/live_debugger/app/debugger/callback_tracing/web/global_traces_live.ex

@@ -123,6 +123,7 @@ defmodule LiveDebugger.App.Debugger.CallbackTracing.Web.GlobalTracesLive do
         return_link={@return_link}
         inspect_mode?={@inspect_mode?}
         lv_process={@lv_process}
+        dropdown_id="global-traces"
       />
       <div class="grow p-8 overflow-y-auto scrollbar-main">
         <div class="w-full min-w-[25rem] max-w-screen-2xl mx-auto">

lib/live_debugger/app/debugger/web/components/navigation_menu.ex

@@ -10,8 +10,9 @@ defmodule LiveDebugger.App.Debugger.Web.Components.NavigationMenu do
   alias Phoenix.LiveView.JS
 
   attr(:class, :any, default: nil, doc: "Additional classes to add to the navigation bar.")
-  attr(:current_url, :any, required: true)
-  attr(:return_link, :any, required: true, doc: "Link to navigate to.")
+  attr(:current_url, :string, required: true)
+  attr(:return_link, :string, required: true, doc: "Link to navigate to.")
+  attr(:dropdown_id, :string, required: true)
 
   slot(:inspect_button)
 
@@ -46,7 +47,12 @@ defmodule LiveDebugger.App.Debugger.Web.Components.NavigationMenu do
         />
       </div>
 
-      <.dropdown return_link={@return_link} current_url={@current_url} class="sm:hidden" />
+      <.dropdown
+        return_link={@return_link}
+        current_url={@current_url}
+        class="sm:hidden"
+        id={@dropdown_id}
+      />
 
       <div id="hidden-items" class="hidden sm:flex flex-row gap-3">
         <.navbar_item
@@ -64,6 +70,7 @@ defmodule LiveDebugger.App.Debugger.Web.Components.NavigationMenu do
   attr(:class, :any, default: nil, doc: "Additional classes to add to the navigation bar.")
   attr(:return_link, :any, required: true, doc: "Link to navigate to.")
   attr(:current_url, :any, required: true)
+  attr(:id, :string, required: true)
 
   def dropdown(assigns) do
     assigns =
@@ -75,7 +82,7 @@ defmodule LiveDebugger.App.Debugger.Web.Components.NavigationMenu do
     ~H"""
     <.live_component
       module={LiveDropdown}
-      id="navigation-bar-dropdown"
+      id={"#{@id}-navigation-bar-dropdown"}
       class={@class}
       direction={:bottom_left}
     >
@@ -96,7 +103,7 @@ defmodule LiveDebugger.App.Debugger.Web.Components.NavigationMenu do
           icon="icon-chart-line"
           label="Resources"
           selected?={@current_view == "resources"}
-          phx-click={dropdown_item_click(RoutesHelper.debugger_resources(@pid))}
+          phx-click={dropdown_item_click(RoutesHelper.debugger_resources(@pid), @id)}
         />
       </div>
     </.live_component>
@@ -124,10 +131,10 @@ defmodule LiveDebugger.App.Debugger.Web.Components.NavigationMenu do
   end
 
   # We do it to make sure that the dropdown is closed when the item is clicked.
-  defp dropdown_item_click(url) do
+  defp dropdown_item_click(url, id) do
     url
     |> JS.patch()
-    |> JS.push("close", target: "#navigation-bar-dropdown-live-dropdown-container")
+    |> JS.push("close", target: "##{id}-navigation-bar-dropdown-live-dropdown-container")
   end
 
   attr(:id, :string, required: true)

lib/live_debugger/app/debugger/web/components/pages.ex

@@ -44,6 +44,7 @@ defmodule LiveDebugger.App.Debugger.Web.Components.Pages do
         return_link={@return_link}
         inspect_mode?={@inspect_mode?}
         lv_process={@lv_process}
+        dropdown_id="node-inspector"
       />
 
       <div class="flex flex-col max-w-screen-2xl w-full gap-4 p-8 overflow-y-auto">
@@ -144,6 +145,7 @@ defmodule LiveDebugger.App.Debugger.Web.Components.Pages do
         return_link={@return_link}
         inspect_mode?={@inspect_mode?}
         lv_process={@lv_process}
+        dropdown_id="resources"
       />
 
       <ResourcesLive.live_render
@@ -160,13 +162,15 @@ defmodule LiveDebugger.App.Debugger.Web.Components.Pages do
   attr(:return_link, :string, required: true)
   attr(:inspect_mode?, :boolean, required: true)
   attr(:lv_process, LvProcess, required: true)
+  attr(:dropdown_id, :string, required: true)
 
   def navbar_menu(assigns) do
     ~H"""
     <NavigationMenu.navbar
       class="w-full border-b margin-0"
       current_url={@url}
       return_link={@return_link}
+      dropdown_id={@dropdown_id}
     >
       <:inspect_button>
         <HookComponents.InspectButton.render inspect_mode?={@inspect_mode?} lv_process={@lv_process} />