Skip to content

Improvements to navigation dropdown #42

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
karthiknatarajan merged 1 commit into from
Jan 23, 2026
Merged

Improvements to navigation dropdown #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 3 additions & 2 deletions app/web/views/components/icons/icons.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,9 @@ const (
LimitsIcon = "ph ph-prohibit text-brand"
SwitchIcon = "ph ph-arrows-left-right text-brand"

NavUpIcon = "ph ph-caret-up"
NavDownIcon = "ph ph-caret-down"
NavUpIcon = "ph ph-caret-up"
NavDownIcon = "ph ph-caret-down"
NavUpDownIcon = "ph ph-caret-up-down"

SourceGitIcon = "git.svg"
SourceDatabaseIcon = "ph ph-database text-sky-700"
Expand Down
58 changes: 18 additions & 40 deletions app/web/views/shared/breadcrumb.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,11 @@ templ breadCrumb(crumbs []*bcItem, isHTMLRender bool) {
isProjectDropdownOpen:false,
isEnvironmentDropdownOpen:false,
isApplicationDropdownOpen:false,
select(prop, value) {
select(prop, value, onlyMe) {
if (onlyMe) {
this[prop] = value;
return;
}
this.closeAll()
this[prop] = value;
},
Expand All @@ -114,27 +118,11 @@ templ breadCrumb(crumbs []*bcItem, isHTMLRender bool) {
}"
x-cloak
>
<ol class="flex flex-wrap items-center gap-1">
<ol class="flex items-center gap-2">
for _, crumb := range crumbs {
<li class="flex items-center justify-center gap-1">
<li class="flex items-center justify-center gap-2">
@breadCrumbItem(crumb, crumb.identifier, getDropdownIdentifier(crumb.identifier))
<span class="self-end mb-[0.215rem] text-disabled">
<svg
class="rtl:rotate-180 size-2 text-substitute"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 6 10"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m1 9 4-4-4-4"
></path>
</svg>
</span>
<span class="text-neutral-700">/</span>
</li>
}
</ol>
Expand All @@ -144,29 +132,19 @@ templ breadCrumb(crumbs []*bcItem, isHTMLRender bool) {

templ breadCrumbItem(crumb *bcItem, identifier bcIdentifier, isDropDownOpen string) {
if crumb.listUrl != "" || crumb.identifier == bcIdentifierHome {
<span class="flex space-x-2">
<span class="flex items-center gap-1">
<a
href={ crumb.url }
class="link cursor-pointer"
>{ crumb.name }</a>
if crumb.listUrl != "" {
<span class="self-end mb-[0.215rem] text-disabled">
<svg
class="size-2.5 text-link cursor-pointer transition-transform duration-200 ease-in-out"
:class={ fmt.Sprintf("%s ? 'rotate-270' : 'rotate-90'", isDropDownOpen) }
@click={ fmt.Sprintf("select('%[1]s', !%[1]s)", isDropDownOpen) }
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 6 10"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m1 9 4-4-4-4"
></path>
<span
class="text-disabled cursor-pointer hover:bg-secondary"
:class={ fmt.Sprintf("%s ? 'bg-secondary' : ''", isDropDownOpen) }
@click={ fmt.Sprintf("select('%[1]s', !%[1]s, false)", isDropDownOpen) }
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"></path>
</svg>
</span>
@breadCrumbDropdown(crumb, identifier, isDropDownOpen)
Expand All @@ -180,8 +158,8 @@ templ breadCrumbItem(crumb *bcItem, identifier bcIdentifier, isDropDownOpen stri
templ breadCrumbDropdown(crumb *bcItem, identifier bcIdentifier, isDropDownOpen string) {
<div
x-show={ isDropDownOpen }
x-on:click.away={ fmt.Sprintf("select('%[1]s', false)", isDropDownOpen) }
x-on:keydown.escape.window={ fmt.Sprintf("select('%[1]s', false)", isDropDownOpen) }
x-on:click.away={ fmt.Sprintf("select('%[1]s', false, true)", isDropDownOpen) }
x-on:keydown.escape.window={ fmt.Sprintf("select('%[1]s', false, true)", isDropDownOpen) }
class="absolute top-8 z-10 w-56 min-h-max divide-y divide-divider overflow-hidden rounded border border-divider bg-primary shadow-sm"
>
<div
Expand Down
Loading