update navDesign property to navPlacement and add docs

apps/design-land/src/app/core/sidebar-viewport/sidebar-viewport.component.html

@@ -1,4 +1,4 @@
-<daff-sidebar-viewport class="design-land-sidebar-viewport" (backdropClicked)="toggleOpen()" [navDesign]="'bounded'">
+<daff-sidebar-viewport class="design-land-sidebar-viewport" (backdropClicked)="toggleOpen()" navPlacement="beside">
   <daff-sidebar class="design-land-sidebar-viewport__sidebar" [mode]="mode$ | async" [open]="open" (escapePressed)="toggleOpen()">
     <design-land-nav></design-land-nav>
     <daff-sidebar-footer>

apps/design-land/src/app/sidebar/sidebar.component.html

@@ -15,12 +15,9 @@ <h3>Basic sidebar</h3>
 <h3>Implementing the main and sidebar content</h3>
 <p>The main and sidebar content should be placed inside of the <code>&lt;daff-sidebar-viewport&gt;</code>. The sidebar content should be placed inside of the <code>&lt;daff-sidebar&gt;</code>.</p>
 
-<p>A viewport navigation can either be:<p>
-
-<ul>
-  <li>Placed alongside the <code>&lt;daff-sidebar&gt;</code> using the <code>[daff-sidebar-viewport-nav]</code> selector.</li>
-</ul>
+<p>A viewport navigation can be:<p>
 
+<h4>Placed alongside the <code>&lt;daff-sidebar&gt;</code> using the <code>[daff-sidebar-viewport-nav]</code> selector.</h4>
 <pre><code>&lt;daff-sidebar-viewport (backdropClicked)="toggleOpen()"&gt;
   &lt;nav daff-sidebar-viewport-nav daff-navbar&gt;
     Nav content
@@ -35,9 +32,9 @@ <h3>Implementing the main and sidebar content</h3>
   &lt;/div&gt;
 &lt;/daff-sidebar-viewport&gt;</code></pre>
 
-<ul>
-  <li>Placed inside of the viewport content by <b>omitting</b> the <code>[daff-sidebar-viewport-nav]</code> selector from the nav component.</li>
-</ul>
+<p>Additionally, a <code>[daff-sidebar-viewport-nav]</code> that is paired with a <code>side-fixed</code> sidebar can be placed <code>above</code> or <code>beside</code> to the sidebar. It's placed <code>above</code> by default but can be updated by using the <code>navPlacement</code> property on the <code>&lt;daff-sidebar-viewport&gt;</code>.</p>
+
+<h4>Placed inside of the viewport content by omitting the <code>[daff-sidebar-viewport-nav]</code> selector from the nav component.</h4>
 
 <pre><code>&lt;daff-sidebar-viewport (backdropClicked)="toggleOpen()"&gt;
   &lt;nav daff-navbar&gt;
@@ -103,19 +100,19 @@ <h3>Modes</h3>
   </thead>
   <tbody>
     <tr>
-      <td>side</td>
+      <td><code>side</code></td>
       <td>Sidebar is placed alongside the content</td>
     </tr>
     <tr>
-      <td>side-fixed</td>
+      <td><code>side-fixed</code></td>
       <td>Sidebar is placed alongside the content and will scroll separately from the content</td>
     </tr>
     <tr>
-      <td>over</td>
+      <td><code>over</code></td>
       <td>Sidebar slides over the rest of the content in the viewport and covering it with a backdrop</td>
     </tr>
     <tr>
-      <td>under</td>
+      <td><code>under</code></td>
       <td>Sidebar freezes in place and and the content slides above it, while also being covered by a backdrop</td>
     </tr>
   </tbody>
@@ -133,11 +130,11 @@ <h3>Sides</h3>
   </thead>
   <tbody>
     <tr>
-      <td>left</td>
+      <td><code>left</code></td>
       <td>Places sidebar on the left side of the screen</td>
     </tr>
     <tr>
-      <td>right</td>
+      <td><code>right</code></td>
       <td>Places sidebar on the right side of the screen</td>
     </tr>
   </tbody>

libs/design/sidebar/examples/src/side-fixed-sidebar/side-fixed-sidebar.component.html

@@ -1,7 +1,8 @@
-<daff-sidebar-viewport>
+<daff-sidebar-viewport navPlacement="side">
   <daff-sidebar mode="side-fixed" [open]="true" class="side-fixed-sidebar">
     Fixed sidebar content
   </daff-sidebar>
+  <nav daff-sidebar-viewport-nav daff-navbar>Navbar</nav>
   <div class="content">
     Page content
   </div>

libs/design/sidebar/examples/src/side-fixed-sidebar/side-fixed-sidebar.component.scss

@@ -7,5 +7,6 @@ daff-sidebar-viewport {
 }
 
 .content {
+  padding: 24px;
   height: 480px;
 }

libs/design/sidebar/examples/src/side-fixed-sidebar/side-fixed-sidebar.module.ts

@@ -1,12 +1,19 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffSidebarModule } from '@daffodil/design';
+import {
+  DaffNavbarModule,
+  DaffSidebarModule,
+} from '@daffodil/design';
 
 import { SideFixedSidebarComponent } from './side-fixed-sidebar.component';
 
 @NgModule({
   imports: [
+    CommonModule,
+
     DaffSidebarModule,
+    DaffNavbarModule,
   ],
   declarations: [
     SideFixedSidebarComponent,

libs/design/src/molecules/sidebar/sidebar-viewport/nav-placement.ts

@@ -0,0 +1,10 @@
+/**
+ * The placement of the nav in relation to the sidebar.
+ */
+
+export type DaffNavPlacement = 'above' | 'beside';
+
+export enum DaffNavPlacementEnum {
+  ABOVE = 'above',
+  BESIDE = 'beside',
+}

libs/design/src/molecules/sidebar/sidebar-viewport/sidebar-viewport.component.html

@@ -1,12 +1,12 @@
+<ng-content select="daff-sidebar"></ng-content>
+
 <daff-backdrop
   [@transformContent]="_animationState"
   class="daff-sidebar-viewport__backdrop"
   [interactable]="_backdropInteractable"
   (backdropClicked)="_backdropClicked()">
 </daff-backdrop>
 
-<ng-content select="daff-sidebar"></ng-content>
-
 <div class="daff-sidebar-viewport__nav" [@transformContent]="_animationState" [style.padding-left.px]="_navPadLeft" [style.padding-right.px]="_navPadRight">
   <ng-content select="[daff-sidebar-viewport-nav]"></ng-content>
 </div>

libs/design/src/molecules/sidebar/sidebar-viewport/sidebar-viewport.component.ts

@@ -16,7 +16,10 @@ import {
 } from '@angular/core';
 
 import { hasParentViewport } from './helper/has-parent-viewport';
-import { DaffNavDesign } from './nav-design';
+import {
+  DaffNavPlacement,
+  DaffNavPlacementEnum,
+} from './nav-placement';
 import {
   DAFF_SIDEBAR_SCROLL_TOKEN,
   DaffSidebarScroll,
@@ -73,16 +76,15 @@ import { DaffSidebarComponent } from '../sidebar/sidebar.component';
 export class DaffSidebarViewportComponent implements AfterContentChecked {
   @HostBinding('class.daff-sidebar-viewport') hostClass = true;
 
-  @HostBinding('class.bounded-nav') get isBoundedNav() {
-    return this.navDesign === DaffNavDesign.BOUNDED;
+  @HostBinding('class.nav-on-side') get isNavOnSide() {
+    return this.navPlacement === DaffNavPlacementEnum.BESIDE;
   }
 
   /**
-   * Whether or not the navbar should be bounded.
-   * Note that this is really only available
-   * when there is a `side-fixed` sidebar.
+   * The placement of the nav in relation to the sidebar. The default is set to `top`.
+   * Note that this is really only available when there is a `side-fixed` sidebar.
    */
-  @Input() navDesign: DaffNavDesign = DaffNavDesign.UNBOUNDED;
+  @Input() navPlacement: DaffNavPlacement = DaffNavPlacementEnum.ABOVE;
 
   constructor(
     private cdRef: ChangeDetectorRef,
@@ -171,15 +173,15 @@ export class DaffSidebarViewportComponent implements AfterContentChecked {
     const nextLeftPadding = sidebarViewportContentPadding(this.sidebars, 'left');
     if(this._contentPadLeft !== nextLeftPadding) {
       this._contentPadLeft = nextLeftPadding;
-      this._navPadLeft = this.isBoundedNav ? this._contentPadLeft : null;
+      this._navPadLeft = this.isNavOnSide ? this._contentPadLeft : null;
       this.updateAnimationState();
       this.cdRef.markForCheck();
     }
 
     const nextRightPadding = sidebarViewportContentPadding(this.sidebars, 'right');
     if(this._contentPadRight !== nextRightPadding) {
       this._contentPadRight = nextRightPadding;
-      this._navPadRight = this.isBoundedNav ? this._contentPadRight : null;
+      this._navPadRight = this.isNavOnSide ? this._contentPadRight : null;
       this.updateAnimationState();
       this.cdRef.markForCheck();
     }

libs/design/src/molecules/sidebar/sidebar/sidebar.component.scss

@@ -53,7 +53,7 @@
 	}
 }
 
-:host-context(.daff-sidebar-viewport.bounded-nav) {
+:host-context(.daff-sidebar-viewport.nav-on-side) {
 	&.side-fixed {
 		top: 0;
 		height: 100dvh;