[CL-145] add secondary variant to bit-layout side nav (#7038)

libs/components/src/layout/layout.component.html

@@ -1,5 +1,13 @@
 <div class="tw-flex tw-w-full">
   <aside
+    [ngStyle]="
+      variant === 'secondary' && {
+        '--color-text-alt2': 'var(--color-text-main)',
+        '--color-background-alt3': 'var(--color-secondary-100)',
+        '--color-background-alt4': 'var(--color-secondary-300)',
+        '--color-secondary-300': 'var(--color-secondary-500)'
+      }
+    "
     class="tw-fixed tw-inset-y-0 tw-left-0 tw-h-screen tw-w-60 tw-overflow-auto tw-bg-background-alt3"
   >
     <ng-content select="[slot=sidebar]"></ng-content>

libs/components/src/layout/layout.component.ts

@@ -1,9 +1,14 @@
-import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { Component, Input } from "@angular/core";
+
+export type LayoutVariant = "primary" | "secondary";
 
 @Component({
   selector: "bit-layout",
   templateUrl: "layout.component.html",
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
 })
-export class LayoutComponent {}
+export class LayoutComponent {
+  @Input() variant: LayoutVariant = "primary";
+}

libs/components/src/layout/layout.stories.ts

@@ -29,7 +29,10 @@ export default {
         {
           provide: I18nService,
           useFactory: () => {
-            return new I18nMockService({});
+            return new I18nMockService({
+              submenu: "submenu",
+              toggleCollapse: "toggle collapse",
+            });
           },
         },
       ],
@@ -57,6 +60,158 @@ export const WithContent: Story = {
           <bit-nav-divider></bit-nav-divider>
           <bit-nav-item text="Item C" icon="bwi-collection"></bit-nav-item>
           <bit-nav-item text="Item D" icon="bwi-collection"></bit-nav-item>
+          <bit-nav-group text="Tree example" icon="bwi-collection" [open]="true">
+            <bit-nav-group
+              text="Level 1 - with children (empty)"
+              route="#"
+              icon="bwi-collection"
+              variant="tree"
+            ></bit-nav-group>
+            <bit-nav-item
+              text="Level 1 - no children"
+              route="#"
+              icon="bwi-collection"
+              variant="tree"
+            ></bit-nav-item>
+            <bit-nav-group
+              text="Level 1 - with children"
+              route="#"
+              icon="bwi-collection"
+              variant="tree"
+              [open]="true"
+            >
+              <bit-nav-group
+                text="Level 2 - with children"
+                route="#"
+                icon="bwi-collection"
+                variant="tree"
+                [open]="true"
+              >
+                <bit-nav-item
+                  text="Level 3 - no children, no icon"
+                  route="#"
+                  variant="tree"
+                ></bit-nav-item>
+                <bit-nav-group
+                  text="Level 3 - with children"
+                  route="#"
+                  icon="bwi-collection"
+                  variant="tree"
+                  [open]="true"
+                >
+                  <bit-nav-item
+                    text="Level 4 - no children, no icon"
+                    route="#"
+                    variant="tree"
+                  ></bit-nav-item>
+                </bit-nav-group>
+              </bit-nav-group>
+              <bit-nav-group
+                text="Level 2 - with children (empty)"
+                route="#"
+                icon="bwi-collection"
+                variant="tree"
+                [open]="true"
+              ></bit-nav-group>
+              <bit-nav-item
+                text="Level 2 - no children"
+                route="#"
+                icon="bwi-collection"
+                variant="tree"
+              ></bit-nav-item>
+            </bit-nav-group>
+            <bit-nav-item
+              text="Level 1 - no children"
+              route="#"
+              icon="bwi-collection"
+              variant="tree"
+            ></bit-nav-item>
+          </bit-nav-group>
+        </nav>
+        <bit-callout title="Foobar"> Hello world! </bit-callout>
+      </bit-layout>
+    `,
+  }),
+};
+
+export const Secondary: Story = {
+  render: (args) => ({
+    props: args,
+    template: /* HTML */ `
+      <bit-layout variant="secondary">
+        <nav slot="sidebar">
+          <bit-nav-item text="Item A" icon="bwi-collection"></bit-nav-item>
+          <bit-nav-item text="Item B" icon="bwi-collection"></bit-nav-item>
+          <bit-nav-divider></bit-nav-divider>
+          <bit-nav-item text="Item C" icon="bwi-collection"></bit-nav-item>
+          <bit-nav-item text="Item D" icon="bwi-collection"></bit-nav-item>
+          <bit-nav-group text="Tree example" icon="bwi-collection" [open]="true">
+            <bit-nav-group
+              text="Level 1 - with children (empty)"
+              route="#"
+              icon="bwi-collection"
+              variant="tree"
+            ></bit-nav-group>
+            <bit-nav-item
+              text="Level 1 - no children"
+              route="#"
+              icon="bwi-collection"
+              variant="tree"
+            ></bit-nav-item>
+            <bit-nav-group
+              text="Level 1 - with children"
+              route="#"
+              icon="bwi-collection"
+              variant="tree"
+              [open]="true"
+            >
+              <bit-nav-group
+                text="Level 2 - with children"
+                route="#"
+                icon="bwi-collection"
+                variant="tree"
+                [open]="true"
+              >
+                <bit-nav-item
+                  text="Level 3 - no children, no icon"
+                  route="#"
+                  variant="tree"
+                ></bit-nav-item>
+                <bit-nav-group
+                  text="Level 3 - with children"
+                  route="#"
+                  icon="bwi-collection"
+                  variant="tree"
+                  [open]="true"
+                >
+                  <bit-nav-item
+                    text="Level 4 - no children, no icon"
+                    route="#"
+                    variant="tree"
+                  ></bit-nav-item>
+                </bit-nav-group>
+              </bit-nav-group>
+              <bit-nav-group
+                text="Level 2 - with children (empty)"
+                route="#"
+                icon="bwi-collection"
+                variant="tree"
+                [open]="true"
+              ></bit-nav-group>
+              <bit-nav-item
+                text="Level 2 - no children"
+                route="#"
+                icon="bwi-collection"
+                variant="tree"
+              ></bit-nav-item>
+            </bit-nav-group>
+            <bit-nav-item
+              text="Level 1 - no children"
+              route="#"
+              icon="bwi-collection"
+              variant="tree"
+            ></bit-nav-item>
+          </bit-nav-group>
         </nav>
         <bit-callout title="Foobar"> Hello world! </bit-callout>
       </bit-layout>