From e9501be58adfbb670f0b274d42d5520f802ae162 Mon Sep 17 00:00:00 2001
From: jqlio18 <jqlio18@gmail.com>
Date: Wed, 14 Dec 2022 00:18:40 -0500
Subject: [PATCH] SideNav should overlay Content in UIShell Fixes #1463

---
 src/UIShell/Content.svelte | 18 +-----------------
 src/UIShell/SideNav.svelte |  5 ++---
 2 files changed, 3 insertions(+), 20 deletions(-)

diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte
index 768b1dc5..cda23db3 100644
--- a/src/UIShell/Content.svelte
+++ b/src/UIShell/Content.svelte
@@ -1,24 +1,8 @@
 <script>
   /** Specify the id for the main element */
   export let id = "main-content";
-
-  import { isSideNavCollapsed, isSideNavRail } from "./navStore";
-
-  /**
-   * By default, the `SideNav` applies a left margin of `3rem` to `Content`
-   * if it's a sibling component (e.g., .bx--side-nav ~ .bx--content).
-   *
-   * We manually unset the left margin if the `SideNav`
-   * is collapsed and if it's not the `rail` variant.
-   */
-  $: unsetLeftMargin = $isSideNavCollapsed && !$isSideNavRail;
 </script>
 
-<main
-  id="{id}"
-  class:bx--content="{true}"
-  {...$$restProps}
-  style="{unsetLeftMargin ? 'margin-left: 0;' : ''} {$$restProps.style}"
->
+<main id="{id}" class:bx--content="{true}" {...$$restProps}>
   <slot />
 </main>
diff --git a/src/UIShell/SideNav.svelte b/src/UIShell/SideNav.svelte
index 3db9e0bb..7b510836 100644
--- a/src/UIShell/SideNav.svelte
+++ b/src/UIShell/SideNav.svelte
@@ -72,9 +72,8 @@
   class:bx--side-nav__navigation="{true}"
   class:bx--side-nav="{true}"
   class:bx--side-nav--ux="{true}"
-  class:bx--side-nav--expanded="{rail && winWidth >= expansionBreakpoint
-    ? false
-    : isOpen}"
+  class:bx--side-nav--fixed="{isOpen && !rail}"
+  class:bx--side-nav--expanded="{!rail && winWidth >= expansionBreakpoint}"
   class:bx--side-nav--collapsed="{!isOpen && !rail}"
   class:bx--side-nav--rail="{rail}"
   {...$$restProps}