From 717d6d88dee69581474bee8e7f13c5a6cf5aaf9b Mon Sep 17 00:00:00 2001
From: jqlio18 <jqlio18@gmail.com>
Date: Wed, 14 Dec 2022 12:58:44 -0500
Subject: [PATCH] Previous commit was removing `margin-left: 0` style. This
 revert back this change and add more consistencies with the `navStore` and
 classes.

---
 src/UIShell/Content.svelte | 18 +++++++++++++++++-
 src/UIShell/SideNav.svelte |  6 +++++-
 src/UIShell/navStore.js    |  4 ++++
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte
index cda23db3..0689c22e 100644
--- a/src/UIShell/Content.svelte
+++ b/src/UIShell/Content.svelte
@@ -1,8 +1,24 @@
 <script>
   /** Specify the id for the main element */
   export let id = "main-content";
+
+  import { isSideNavExpanded, 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 = !$isSideNavRail && !$isSideNavExpanded;
 </script>
 
-<main id="{id}" class:bx--content="{true}" {...$$restProps}>
+<main
+  id="{id}"
+  class:bx--content="{true}"
+  style="{unsetLeftMargin ? 'margin-left: 0' : ''}"
+  {...$$restProps}
+>
   <slot />
 </main>
diff --git a/src/UIShell/SideNav.svelte b/src/UIShell/SideNav.svelte
index 7b510836..a21193b4 100644
--- a/src/UIShell/SideNav.svelte
+++ b/src/UIShell/SideNav.svelte
@@ -35,7 +35,9 @@
   import {
     shouldRenderHamburgerMenu,
     isSideNavCollapsed,
+    isSideNavFixed,
     isSideNavRail,
+    isSideNavExpanded,
   } from "./navStore";
 
   const dispatch = createEventDispatcher();
@@ -43,7 +45,9 @@
   let winWidth = undefined;
 
   $: dispatch(isOpen ? "open" : "close");
-  $: $isSideNavCollapsed = !isOpen;
+  $: $isSideNavExpanded = !rail && winWidth >= expansionBreakpoint;
+  $: $isSideNavCollapsed = !$isSideNavExpanded;
+  $: $isSideNavFixed = !rail & isOpen;
   $: $isSideNavRail = rail;
 
   onMount(() => {
diff --git a/src/UIShell/navStore.js b/src/UIShell/navStore.js
index 182613a8..6a827bcf 100644
--- a/src/UIShell/navStore.js
+++ b/src/UIShell/navStore.js
@@ -2,6 +2,10 @@ import { writable } from "svelte/store";
 
 export const shouldRenderHamburgerMenu = writable(false);
 
+export const isSideNavExpanded = writable(false);
+
 export const isSideNavCollapsed = writable(false);
 
+export const isSideNavFixed = writable(false);
+
 export const isSideNavRail = writable(false);