Skip to content

Bug: navbar menu dropdown fix #870

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
srzeszut merged 2 commits into from
Dec 1, 2025
Merged

Bug: navbar menu dropdown fix #870

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eead789
add dropdown id
srzeszut Dec 1, 2025
b505e6c
fix id
srzeszut Dec 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions lib/live_debugger/app/debugger/callback_tracing/web/global_traces_live.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
21 changes: 14 additions & 7 deletions lib/live_debugger/app/debugger/web/components/navigation_menu.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -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
Expand All @@ -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 =
Expand All @@ -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}
>
Expand All @@ -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>
Expand Down Expand Up @@ -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)
Expand Down
4 changes: 4 additions & 0 deletions lib/live_debugger/app/debugger/web/components/pages.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand All @@ -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} />
Expand Down