From 44384d51c9d2b2017603be94a54329b2df6cd8b3 Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bcunningham@bitwarden.com>
Date: Wed, 10 Dec 2025 09:28:36 -0500
Subject: [PATCH] fix padding when nested. remove ng style and class (#17874)

* fix padding when nested. remove ng style and class

* add expanded group to story to cover bug fix

* use class binding for async classes

* remove unnecessary x padding to improve truncation

* simplify padding logic

* fix padding end in closed state

* add back some padding in tree view

* add back padding to avoid weird spacing scenarios
---
 .../src/navigation/nav-group.stories.ts       |  5 ++++
 .../src/navigation/nav-item.component.html    | 27 ++++++++-----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/libs/components/src/navigation/nav-group.stories.ts b/libs/components/src/navigation/nav-group.stories.ts
index d5c381ac3e3..e3033e4b40a 100644
--- a/libs/components/src/navigation/nav-group.stories.ts
+++ b/libs/components/src/navigation/nav-group.stories.ts
@@ -84,6 +84,11 @@ export const Default: StoryObj<NavGroupComponent> = {
           <bit-nav-item text="Child B"></bit-nav-item>
           <bit-nav-item text="Child C" icon="bwi-filter"></bit-nav-item>
         </bit-nav-group>
+        <bit-nav-group open="true" text="Lorem Ipsum (Button)" icon="bwi-filter">
+          <bit-nav-item text="Child A" icon="bwi-filter"></bit-nav-item>
+          <bit-nav-item text="Child B"></bit-nav-item>
+          <bit-nav-item text="Child C" icon="bwi-filter"></bit-nav-item>
+        </bit-nav-group>
       </bit-side-nav>
     `,
   }),
diff --git a/libs/components/src/navigation/nav-item.component.html b/libs/components/src/navigation/nav-item.component.html
index 1de8a9bd167..8a59d474d94 100644
--- a/libs/components/src/navigation/nav-item.component.html
+++ b/libs/components/src/navigation/nav-item.component.html
@@ -2,16 +2,12 @@
   @let open = sideNavService.open$ | async;
   @if (open || icon()) {
     <div
-      [ngStyle]="{
-        'padding-inline-start': navItemIndentationPadding(),
-      }"
+      [style.padding-inline-start]="navItemIndentationPadding()"
       class="tw-relative tw-rounded-md tw-h-10"
-      [ngClass]="[
-        showActiveStyles
-          ? 'tw-bg-background-alt4'
-          : 'tw-bg-background-alt3 hover:tw-bg-hover-contrast',
-        fvwStyles$ | async,
-      ]"
+      [class.tw-bg-background-alt4]="showActiveStyles"
+      [class.tw-bg-background-alt3]="!showActiveStyles"
+      [class.hover:tw-bg-hover-contrast]="!showActiveStyles"
+      [class]="fvwStyles$ | async"
     >
       <div class="tw-relative tw-flex tw-items-center tw-h-full">
         @if (open) {
@@ -26,13 +22,12 @@
         <!-- Main content of `NavItem` -->
         <ng-template #anchorAndButtonContent>
           <div
-            [ngClass]="[
-              variant() === 'tree' || treeDepth() > 0 ? '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 }"
+            [class.tw-py-0]="variant() === 'tree' || treeDepth() > 0"
+            [class.tw-py-2]="variant() !== 'tree' && treeDepth() === 0"
+            [class.tw-text-center]="!open"
+            [class.tw-justify-center]="!open"
           >
             @if (icon()) {
               <i
@@ -53,7 +48,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' || treeDepth() > 0 }"
+            [class.!tw-ps-0]="variant() === 'tree' || treeDepth() > 0"
             data-fvw
             [routerLink]="route()"
             [relativeTo]="relativeTo()"
@@ -74,7 +69,7 @@
           <button
             type="button"
             class="tw-size-full tw-px-4 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]="open ? 'tw-pe-3' : 'tw-pe-4'"
+            [class.!tw-ps-0]="variant() === 'tree' || treeDepth() > 0"
             data-fvw
             (click)="mainContentClicked.emit()"
           >