bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +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

3
libs/components/src/navigation/nav-group.stories.ts
View File

@@ -145,6 +145,9 @@ export const Tree: StoryObj<NavGroupComponent> = {
<bit-nav-item text="Level 3 - no children, no icon" route="t5" variant="tree"></bit-nav-item>
<bit-nav-group text="Level 3 - with children" route="t6" icon="bwi-collection-shared" variant="tree" [open]="true">
<bit-nav-item text="Level 4 - no children, no icon" route="t7" variant="tree"></bit-nav-item>
<bit-nav-group text="Level 4 - with children" route="t6" icon="bwi-collection-shared" variant="tree" [open]="true">
<bit-nav-item text="Level 5 - no children, no icon" route="t7" variant="tree"></bit-nav-item>
</bit-nav-group>
</bit-nav-group>
</bit-nav-group>
</bit-nav-group>

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()"

22
libs/components/src/navigation/nav-item.component.ts
View File

@@ -1,5 +1,5 @@
import { CommonModule } from "@angular/common";
import { Component, HostListener, Optional, input, model } from "@angular/core";
import { Component, HostListener, Optional, computed, input, model } from "@angular/core";
import { RouterLinkActive, RouterModule } from "@angular/router";
import { BehaviorSubject, map } from "rxjs";
@@ -27,13 +27,13 @@ export class NavItemComponent extends NavBaseComponent {
* Base padding for tree variant items (in rem)
* This provides the initial indentation for tree items before depth-based padding
*/
protected readonly TREE_BASE_PADDING = 1.25;
protected readonly TREE_BASE_PADDING = 2.5;
/**
* Padding increment per tree depth level (in rem)
* Each nested level adds this amount of padding to visually indicate hierarchy
*/
protected readonly TREE_DEPTH_PADDING = 1.25;
protected readonly TREE_DEPTH_PADDING = 1.75;
/** Forces active styles to be shown, regardless of the `routerLinkActiveOptions` */
readonly forceActiveStyles = input<boolean>(false);
@@ -52,6 +52,22 @@ export class NavItemComponent extends NavBaseComponent {
return this.forceActiveStyles() || (this._isActive && !this.hideActiveStyles());
}
/**
* adding calculation for tree variant due to needing visual alignment on different indentation levels needed between the first level and subsequent levels
*/
protected readonly navItemIndentationPadding = computed(() => {
const open = this.sideNavService.open;
const depth = this.treeDepth() ?? 0;
if (open && this.variant() === "tree") {
return depth === 1
? `${this.TREE_BASE_PADDING}rem`
: `${this.TREE_BASE_PADDING + (depth - 1) * this.TREE_DEPTH_PADDING}rem`;
}
return `${this.TREE_BASE_PADDING * depth}rem`;
});
/**
* Allow overriding of the RouterLink['ariaCurrentWhenActive'] property.
*