From 5bafda10f91fceebbb197a33d410a19859f7266a Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Tue, 23 Aug 2022 07:57:56 -0700
Subject: [PATCH] fix(ui-shell): do not unset `Content` left margin for rail
 `SideNav` (#1462)

Fixes #1459
---
 src/UIShell/Content.svelte | 13 +++++++++++--
 src/UIShell/SideNav.svelte |  7 ++++++-
 src/UIShell/navStore.js    |  2 ++
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte
index 88fc2aa0..44fc1572 100644
--- a/src/UIShell/Content.svelte
+++ b/src/UIShell/Content.svelte
@@ -2,14 +2,23 @@
   /** Specify the id for the main element */
   export let id = "main-content";
 
-  import { isSideNavCollapsed } from "./navStore";
+  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="{$isSideNavCollapsed && 'margin-left: 0;'} {$$restProps.style}}"
+  style="{unsetLeftMargin && 'margin-left: 0;'} {$$restProps.style}}"
 >
   <slot />
 </main>
diff --git a/src/UIShell/SideNav.svelte b/src/UIShell/SideNav.svelte
index 4efd53dd..a120b191 100644
--- a/src/UIShell/SideNav.svelte
+++ b/src/UIShell/SideNav.svelte
@@ -32,7 +32,11 @@
   export let expansionBreakpoint = 1056;
 
   import { onMount, createEventDispatcher } from "svelte";
-  import { shouldRenderHamburgerMenu, isSideNavCollapsed } from "./navStore";
+  import {
+    shouldRenderHamburgerMenu,
+    isSideNavCollapsed,
+    isSideNavRail,
+  } from "./navStore";
 
   const dispatch = createEventDispatcher();
 
@@ -40,6 +44,7 @@
 
   $: dispatch(isOpen ? "open" : "close");
   $: $isSideNavCollapsed = !isOpen;
+  $: $isSideNavRail = rail;
 
   onMount(() => {
     shouldRenderHamburgerMenu.set(true);
diff --git a/src/UIShell/navStore.js b/src/UIShell/navStore.js
index ed18821c..182613a8 100644
--- a/src/UIShell/navStore.js
+++ b/src/UIShell/navStore.js
@@ -3,3 +3,5 @@ import { writable } from "svelte/store";
 export const shouldRenderHamburgerMenu = writable(false);
 
 export const isSideNavCollapsed = writable(false);
+
+export const isSideNavRail = writable(false);