bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-01-03 17:13:47 +00:00
Code Issues Releases Wiki Activity

[CL-881] restore nav tree view (#17210)

Browse Source 
* restore tree nav view

* address Claude feedback

* address feedback and fix depth calculation

* address feedback from Claude

* do not reserve space for icon
This commit is contained in:
Bryan Cunningham
2025-11-06 11:10:17 -05:00
committed by GitHub
parent 29e4085986
commit f865139d16
6 changed files with 115 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
libs/components/src/navigation/nav-item.component.html
View File

@@ -2,6 +2,12 @@
@let open = sideNavService.open$ | async;
@if (open || icon()) {
<div
[ngStyle]="{
'padding-inline-start':
open && variant() === 'tree'
? TREE_BASE_PADDING + (treeDepth() ?? 0) * TREE_DEPTH_PADDING + 'rem'
: '0',
}"
class="tw-relative tw-rounded-md tw-h-10"
[ngClass]="[
showActiveStyles
@@ -11,20 +17,33 @@
]"
>
<div class="tw-relative tw-flex tw-items-center tw-h-full">
@if (open) {
<div
class="tw-absolute tw-left-[0px] tw-transform tw--translate-x-[calc(100%_-_4px)] tw-pe-2 [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:tw-text-alt2"
>
<ng-content select="[slot=start]"></ng-content>
</div>
}
<ng-container *ngIf="route(); then isAnchor; else isButton"></ng-container>
<!-- Main content of `NavItem` -->
<ng-template #anchorAndButtonContent>
<div
[ngClass]="[
variant() === 'tree' ? 'tw-py-0' : 'tw-py-2',
open ? 'tw-pe-4' : 'tw-text-center',
]"
[title]="text()"
class="tw-gap-2 tw-flex tw-items-center tw-font-medium tw-h-full"
[ngClass]="{ 'tw-justify-center': !open }"
>
<i
class="!tw-m-0 tw-w-4 tw-shrink-0 bwi bwi-fw tw-text-alt2 {{ icon() }}"
[attr.aria-hidden]="open"
[attr.aria-label]="text()"
></i>
@if (icon()) {
<i
class="!tw-m-0 tw-w-4 tw-shrink-0 bwi bwi-fw tw-text-alt2 {{ icon() }}"
[attr.aria-hidden]="open"
[attr.aria-label]="text()"
></i>
}
@if (open) {
<span class="tw-truncate">{{ text() }}</span>
}
@@ -37,6 +56,7 @@
<!-- The following `class` field should match the `#isButton` class field below -->
<a
class="tw-size-full tw-px-4 tw-block tw-truncate tw-border-none tw-bg-transparent tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none [&_i]:tw-leading-[1.5rem]"
[ngClass]="{ 'tw-ps-0': variant() === 'tree' }"
data-fvw
[routerLink]="route()"
[relativeTo]="relativeTo()"