From c25cd630228efbae83ae803b9441ac5a913688cb Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bcunningham@bitwarden.com>
Date: Mon, 10 Nov 2025 16:27:35 -0500
Subject: [PATCH] [CL-924] fix nested nav indentation (#17317)

* fix nav indentation

* move padding logic to component

* add jsdoc for padding calculation

* access open value correctly
---
 .../src/navigation/nav-group.stories.ts       |  3 +++
 .../src/navigation/nav-item.component.html    | 11 ++++------
 .../src/navigation/nav-item.component.ts      | 22 ++++++++++++++++---
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/libs/components/src/navigation/nav-group.stories.ts b/libs/components/src/navigation/nav-group.stories.ts
index fc9df19a3e..d5c381ac3e 100644
--- a/libs/components/src/navigation/nav-group.stories.ts
+++ b/libs/components/src/navigation/nav-group.stories.ts
@@ -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>
diff --git a/libs/components/src/navigation/nav-item.component.html b/libs/components/src/navigation/nav-item.component.html
index 9f6ea3373b..1de8a9bd16 100644
--- a/libs/components/src/navigation/nav-item.component.html
+++ b/libs/components/src/navigation/nav-item.component.html
@@ -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()"
diff --git a/libs/components/src/navigation/nav-item.component.ts b/libs/components/src/navigation/nav-item.component.ts
index 16332c8a38..b32ca0e3fd 100644
--- a/libs/components/src/navigation/nav-item.component.ts
+++ b/libs/components/src/navigation/nav-item.component.ts
@@ -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.
    *