[CL-718] nav updates (#15226)

* add basic new nav item styling

* update alt-3 bg color

* add x padding to item

* remove copy left in error

* style app switcher to match nav items

* adding new button hover colors

* add new logo lockups

* use new logos in web vault

* fix color and svg fills

* use set height for nav items

* optimize SVGs

* move if logic

* use rem for icon size

* move shield logo

* use shield svg for collapsed icon

* remove unused eslint disable directive

* run prettier

* remove variables

* update logo hover styles

* use more standard flow control syntax

* update admin console logo svg

* add new hover variables

* use class instead of fill

* use variable for logo hover

* remove unnecessary container

* use hover variable for nav switcher

* use correct variables for fill colors

* update hover state to use variable left in error

* give icon width to preserve text alignment

* remove tree story as functionality no longer supported

* remove nested styles helper

* remove obsolete afterContentInit

* remove tree example from layout story

* remove tree example from secondary layout story

* remove tree example from kitchen sink story

* Fix interaction test

* remove remaining references to tree variant

libs/components/src/navigation/nav-group.component.html

@@ -6,8 +6,6 @@
     [route]="route"
     [relativeTo]="relativeTo"
     [routerLinkActiveOptions]="routerLinkActiveOptions"
-    [variant]="variant"
-    [treeDepth]="treeDepth"
     (mainContentClicked)="handleMainContentClicked()"
     [ariaLabel]="ariaLabel"
     [hideActiveStyles]="parentHideActiveStyles"
@@ -16,9 +14,7 @@
       <button
         type="button"
         class="tw-ms-auto"
-        [bitIconButton]="
-          open ? 'bwi-angle-up' : variant === 'tree' ? 'bwi-angle-right' : 'bwi-angle-down'
-        "
+        [bitIconButton]="open ? 'bwi-angle-up' : 'bwi-angle-down'"
         [buttonType]="'light'"
         (click)="toggle($event)"
         size="small"
@@ -29,17 +25,9 @@
         [attr.aria-label]="['toggleCollapse' | i18n, text].join(' ')"
       ></button>
     </ng-template>
-    <!-- Show toggle to the left for trees otherwise to the right -->
-    @if (variant === "tree") {
-      <ng-container slot="start">
-        <ng-container *ngTemplateOutlet="button"></ng-container>
-      </ng-container>
-    }
     <ng-container slot="end">
       <ng-content select="[slot=end]"></ng-content>
-      @if (variant !== "tree") {
-        <ng-container *ngTemplateOutlet="button"></ng-container>
-      }
+      <ng-container *ngTemplateOutlet="button"></ng-container>
     </ng-container>
   </bit-nav-item>
   <!-- [attr.aria-controls] of the above button expects a unique ID on the controlled element -->