From cceb0620416214a9f82c6654c87d3ff6950beb0d Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Sun, 27 Jun 2021 07:58:58 -0700
Subject: [PATCH] fix(ui-shell): toggle SideNav rail when clicking the
 hamburger menu #699

---
 .../pages/framed/UIShell/HeaderNavRail.svelte | 30 +++++++++----------
 src/UIShell/SideNav/SideNav.svelte            |  6 +++-
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/docs/src/pages/framed/UIShell/HeaderNavRail.svelte b/docs/src/pages/framed/UIShell/HeaderNavRail.svelte
index e5b7c20e..0cf9e43a 100644
--- a/docs/src/pages/framed/UIShell/HeaderNavRail.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderNavRail.svelte
@@ -37,22 +37,22 @@
     </HeaderNavMenu>
     <HeaderNavItem href="/" text="Link 4" />
   </HeaderNav>
-</Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}" rail>
-  <SideNavItems>
-    <SideNavLink icon="{Fade16}" text="Link 1" href="/" isSelected />
-    <SideNavLink icon="{Fade16}" text="Link 2" href="/" />
-    <SideNavLink icon="{Fade16}" text="Link 3" href="/" />
-    <SideNavMenu icon="{Fade16}" text="Menu">
-      <SideNavMenuItem href="/" text="Link 1" />
-      <SideNavMenuItem href="/" text="Link 2" />
-      <SideNavMenuItem href="/" text="Link 3" />
-    </SideNavMenu>
-    <SideNavDivider />
-    <SideNavLink icon="{Fade16}" text="Link 4" href="/" />
-  </SideNavItems>
-</SideNav>
+  <SideNav bind:isOpen="{isSideNavOpen}" rail>
+    <SideNavItems>
+      <SideNavLink icon="{Fade16}" text="Link 1" href="/" isSelected />
+      <SideNavLink icon="{Fade16}" text="Link 2" href="/" />
+      <SideNavLink icon="{Fade16}" text="Link 3" href="/" />
+      <SideNavMenu icon="{Fade16}" text="Menu">
+        <SideNavMenuItem href="/" text="Link 1" />
+        <SideNavMenuItem href="/" text="Link 2" />
+        <SideNavMenuItem href="/" text="Link 3" />
+      </SideNavMenu>
+      <SideNavDivider />
+      <SideNavLink icon="{Fade16}" text="Link 4" href="/" />
+    </SideNavItems>
+  </SideNav>
+</Header>
 
 <Content>
   <Grid>
diff --git a/src/UIShell/SideNav/SideNav.svelte b/src/UIShell/SideNav/SideNav.svelte
index a8b0804e..cb4c93ce 100644
--- a/src/UIShell/SideNav/SideNav.svelte
+++ b/src/UIShell/SideNav/SideNav.svelte
@@ -25,6 +25,8 @@
 
   const dispatch = createEventDispatcher();
 
+  let winWidth = undefined;
+
   $: dispatch(isOpen ? "open" : "close");
 
   onMount(() => {
@@ -33,6 +35,8 @@
   });
 </script>
 
+<svelte:window bind:innerWidth="{winWidth}" />
+
 {#if !fixed}
   <div
     on:click="{() => {
@@ -49,7 +53,7 @@
   class:bx--side-nav__navigation="{true}"
   class:bx--side-nav="{true}"
   class:bx--side-nav--ux="{true}"
-  class:bx--side-nav--expanded="{isOpen && !rail}"
+  class:bx--side-nav--expanded="{rail && winWidth >= 1056 ? false : isOpen}"
   class:bx--side-nav--collapsed="{!isOpen && !rail}"
   class:bx--side-nav--rail="{rail}"
   {...$$restProps}