fix(ui-shell): remove Content left margin if SideNav is collapsed (#1428)

Fixes #1145
Alternative to #1406

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

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>

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

src/UIShell/navStore.js

@@ -1,3 +1,5 @@
 import { writable } from "svelte/store";
 
 export const shouldRenderHamburgerMenu = writable(false);
+
+export const isSideNavCollapsed = writable(false);