From fd42cb3891e5835717e3fe754a36e801dc534df3 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Sat, 6 Aug 2022 08:27:45 -0700
Subject: [PATCH] fix(ui-shell): remove `Content` left margin if `SideNav` is
 collapsed (#1428)

Fixes #1145
Alternative to #1406
---
 docs/src/global.css        | 1 -
 src/UIShell/Content.svelte | 9 ++++++++-
 src/UIShell/SideNav.svelte | 3 ++-
 src/UIShell/navStore.js    | 2 ++
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/docs/src/global.css b/docs/src/global.css
index a75bb70e..ae82aba1 100644
--- a/docs/src/global.css
+++ b/docs/src/global.css
@@ -246,7 +246,6 @@ main.bx--content {
 
 @media (max-width: 1056px) {
   .bx--side-nav ~ .bx--content {
-    margin-left: 0;
     padding-left: 1rem;
     padding-right: 1rem;
   }
diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte
index cda23db3..88fc2aa0 100644
--- a/src/UIShell/Content.svelte
+++ b/src/UIShell/Content.svelte
@@ -1,8 +1,15 @@
 <script>
   /** Specify the id for the main element */
   export let id = "main-content";
+
+  import { isSideNavCollapsed } from "./navStore";
 </script>
 
-<main id="{id}" class:bx--content="{true}" {...$$restProps}>
+<main
+  id="{id}"
+  class:bx--content="{true}"
+  {...$$restProps}
+  style="{$isSideNavCollapsed && 'margin-left: 0;'} {$$restProps.style}}"
+>
   <slot />
 </main>
diff --git a/src/UIShell/SideNav.svelte b/src/UIShell/SideNav.svelte
index 6dbadb32..4efd53dd 100644
--- a/src/UIShell/SideNav.svelte
+++ b/src/UIShell/SideNav.svelte
@@ -32,13 +32,14 @@
   export let expansionBreakpoint = 1056;
 
   import { onMount, createEventDispatcher } from "svelte";
-  import { shouldRenderHamburgerMenu } from "./navStore";
+  import { shouldRenderHamburgerMenu, isSideNavCollapsed } from "./navStore";
 
   const dispatch = createEventDispatcher();
 
   let winWidth = undefined;
 
   $: dispatch(isOpen ? "open" : "close");
+  $: $isSideNavCollapsed = !isOpen;
 
   onMount(() => {
     shouldRenderHamburgerMenu.set(true);
diff --git a/src/UIShell/navStore.js b/src/UIShell/navStore.js
index 358127be..ed18821c 100644
--- a/src/UIShell/navStore.js
+++ b/src/UIShell/navStore.js
@@ -1,3 +1,5 @@
 import { writable } from "svelte/store";
 
 export const shouldRenderHamburgerMenu = writable(false);
+
+export const isSideNavCollapsed = writable(false);