From 4f2251b5e16f933e78938735a4b37b672d4d9a46 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 2 Aug 2020 05:52:42 -0700
Subject: [PATCH] feat(ui-shell): support fixed SideNav

---
 src/UIShell/SideNav/SideNav.svelte | 15 ++++++++++++
 src/UIShell/UIShell.Story.svelte   | 37 +++++++++++++++---------------
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/UIShell/SideNav/SideNav.svelte b/src/UIShell/SideNav/SideNav.svelte
index 41699d0d..d60130b1 100644
--- a/src/UIShell/SideNav/SideNav.svelte
+++ b/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>
diff --git a/src/UIShell/UIShell.Story.svelte b/src/UIShell/UIShell.Story.svelte
index 42f47fc9..79a07340 100644
--- a/src/UIShell/UIShell.Story.svelte
+++ b/src/UIShell/UIShell.Story.svelte
@@ -213,24 +213,25 @@
     </HeaderUtilities>
   </Header>
 {:else if story === 'header-and-sidenav'}
-  <Header bind:isSideNavOpen {...$$props} />
-  <SideNav bind:isOpen={isSideNavOpen}>
-    <SideNavItems>
-      <SideNavMenu text="Menu 01" icon={iCatalog}>
-        <SideNavMenuItem text="Sub 01" href="/" />
-        <SideNavMenuItem text="Sub 02" href="/" />
-        <SideNavMenuItem text="Sub 03" href="/" />
-        <SideNavMenuItem text="Sub 04" href="/" />
-      </SideNavMenu>
-      <SideNavMenu text="Menu 02" icon={iAdjust}>
-        <SideNavMenuItem text="Sub 01" href="/" />
-        <SideNavMenuItem text="Sub 02" href="/" />
-        <SideNavMenuItem text="Sub 03" href="/" />
-        <SideNavMenuItem text="Sub 04" href="/" />
-      </SideNavMenu>
-      <SideNavLink text="Menu 03" href="/" icon={iProtection} />
-    </SideNavItems>
-  </SideNav>
+  <Header expandedByDefault={false} bind:isSideNavOpen {...$$props}>
+    <SideNav fixed bind:isOpen={isSideNavOpen}>
+      <SideNavItems>
+        <SideNavMenu text="Menu 01" icon={iCatalog}>
+          <SideNavMenuItem text="Sub 01" href="/" />
+          <SideNavMenuItem text="Sub 02" href="/" />
+          <SideNavMenuItem text="Sub 03" href="/" />
+          <SideNavMenuItem text="Sub 04" href="/" />
+        </SideNavMenu>
+        <SideNavMenu text="Menu 02" icon={iAdjust}>
+          <SideNavMenuItem text="Sub 01" href="/" />
+          <SideNavMenuItem text="Sub 02" href="/" />
+          <SideNavMenuItem text="Sub 03" href="/" />
+          <SideNavMenuItem text="Sub 04" href="/" />
+        </SideNavMenu>
+        <SideNavLink text="Menu 03" href="/" icon={iProtection} />
+      </SideNavItems>
+    </SideNav>
+  </Header>
 {/if}
 <Content>
   <h2>Page Title</h2>