From 49f851d52b1783c683ee398f70643e65e004a899 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 6 Aug 2022 08:12:21 -0700
Subject: [PATCH] fix(ui-shell): remove `Content` left margin if `SideNav` is
 collapsed

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

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);