feat(ui-shell): support fixed SideNav

src/UIShell/SideNav/SideNav.svelte

@@ -1,4 +1,10 @@
 <script>
+  /**
+   * Set to `true` to use the fixed variant
+   * @type {boolean} [fixed=false]
+   */
+  export let fixed = false;
+
   /**
    * Specify the ARIA label for the nav
    * @type {string} [ariaLabel]
@@ -12,12 +18,21 @@
   export let isOpen = false;
 </script>
 
+{#if fixed}
+  <div
+    on:click={() => {
+      isOpen = false;
+    }}
+    class:bx--side-nav__overlay={true}
+    class:bx--side-nav__overlay-active={isOpen} />
+{/if}
 <nav
   aria-label={ariaLabel}
   class:bx--side-nav__navigation={true}
   class:bx--side-nav={true}
   class:bx--side-nav--ux={true}
   class:bx--side-nav--expanded={isOpen}
+  class:bx--side-nav--collapsed={!isOpen && fixed}
   {...$$restProps}>
   <slot />
 </nav>

src/UIShell/UIShell.Story.svelte

@@ -213,8 +213,8 @@
     </HeaderUtilities>
   </Header>
 {:else if story === 'header-and-sidenav'}
-  <Header bind:isSideNavOpen {...$$props} />
+  <Header expandedByDefault={false} bind:isSideNavOpen {...$$props}>
-  <SideNav bind:isOpen={isSideNavOpen}>
+    <SideNav fixed bind:isOpen={isSideNavOpen}>
       <SideNavItems>
         <SideNavMenu text="Menu 01" icon={iCatalog}>
           <SideNavMenuItem text="Sub 01" href="/" />
@@ -231,6 +231,7 @@
         <SideNavLink text="Menu 03" href="/" icon={iProtection} />
       </SideNavItems>
     </SideNav>
+  </Header>
 {/if}
 <Content>
   <h2>Page Title</h2>