bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-28 06:03:40 +00:00
Code Issues Releases Wiki Activity

[CL-924] fix nested nav indentation (#17317)

Browse Source 
* fix nav indentation

* move padding logic to component

* add jsdoc for padding calculation

* access open value correctly
This commit is contained in:
Bryan Cunningham
2025-11-10 16:27:35 -05:00
committed by GitHub
parent c3f4e9b12c
commit c25cd63022
3 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,10 +3,7 @@
@if (open || icon()) {
<div
[ngStyle]="{
'padding-inline-start':
open && variant() === 'tree'
? TREE_BASE_PADDING + (treeDepth() ?? 0) * TREE_DEPTH_PADDING + 'rem'
: '0',
'padding-inline-start': navItemIndentationPadding(),
}"
class="tw-relative tw-rounded-md tw-h-10"
[ngClass]="[
@@ -19,7 +16,7 @@
<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"
class="tw-absolute tw-left-[0px] tw-transform tw--translate-x-[calc(100%_+_4px)] [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:tw-text-alt2"
>
<ng-content select="[slot=start]"></ng-content>
</div>
@@ -30,7 +27,7 @@
<ng-template #anchorAndButtonContent>
<div
[ngClass]="[
variant() === 'tree' ? 'tw-py-0' : 'tw-py-2',
variant() === 'tree' || treeDepth() > 0 ? 'tw-py-0' : 'tw-py-2',
open ? 'tw-pe-4' : 'tw-text-center',
]"
[title]="text()"
@@ -56,7 +53,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' }"
[ngClass]="{ 'tw-ps-0': variant() === 'tree' || treeDepth() > 0 }"
data-fvw
[routerLink]="route()"
[relativeTo]="relativeTo()"