SideNav should overlay Content in UIShell

src/UIShell/Content.svelte

@@ -2,23 +2,34 @@
   /** Specify the id for the main element */
   export let id = "main-content";
 
-  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;
+  import { Grid, Row, Column } from "../Grid";
+  import {
+    shouldRenderHamburgerMenu,
+    isPersistentHamburgerMenu,
+  } from "./navStore";
 </script>
 
-<main
-  id="{id}"
-  class:bx--content="{true}"
-  {...$$restProps}
-  style="{unsetLeftMargin ? 'margin-left: 0;' : ''} {$$restProps.style}"
+<div
+  style="padding: 3em; display: flex; flex-direction: column; align-items: center;"
 >
-  <slot />
-</main>
+  <div style="position: relative; width: 100%; z-index: 0;">
+    <main
+      id="{id}"
+      class:bx--content="{true}"
+      {...$$restProps}
+      style="{`height: 100%; margin: 0px; width: 100%; ${$$restProps.style}`}"
+    >
+      <Grid>
+        <Row>
+          <Column
+            lg="{$shouldRenderHamburgerMenu && !$isPersistentHamburgerMenu
+              ? { span: 13, offset: 3 }
+              : {}}"
+          >
+            <slot />
+          </Column>
+        </Row>
+      </Grid>
+    </main>
+  </div>
+</div>

src/UIShell/Header.svelte

@@ -62,11 +62,15 @@
 
   import Close from "../icons/Close.svelte";
   import Menu from "../icons/Menu.svelte";
-  import { shouldRenderHamburgerMenu } from "./navStore";
+  import {
+    shouldRenderHamburgerMenu,
+    isPersistentHamburgerMenu,
+  } from "./navStore";
   import HamburgerMenu from "./HamburgerMenu.svelte";
 
   let winWidth = undefined;
 
+  $: $isPersistentHamburgerMenu = persistentHamburgerMenu;
   $: isSideNavOpen =
     expandedByDefault &&
     winWidth >= expansionBreakpoint &&

src/UIShell/SideNav.svelte

@@ -20,31 +20,15 @@
   /** Set to `true` to toggle the expanded state */
   export let isOpen = false;
 
-  /**
-   * The window width (px) at which the SideNav is expanded and the hamburger menu is hidden
-   * 1056 represents the "large" breakpoint in pixels from the Carbon Design System:
-   * small: 320
-   * medium: 672
-   * large: 1056
-   * x-large: 1312
-   * max: 1584
-   */
-  export let expansionBreakpoint = 1056;
-
   import { onMount, createEventDispatcher } from "svelte";
-  import {
-    shouldRenderHamburgerMenu,
-    isSideNavCollapsed,
-    isSideNavRail,
-  } from "./navStore";
+  import { shouldRenderHamburgerMenu } from "./navStore";
 
   const dispatch = createEventDispatcher();
 
   let winWidth = undefined;
+  let railIsOpen = false;
 
   $: dispatch(isOpen ? "open" : "close");
-  $: $isSideNavCollapsed = !isOpen;
-  $: $isSideNavRail = rail;
 
   onMount(() => {
     shouldRenderHamburgerMenu.set(true);
@@ -67,14 +51,18 @@
   ></div>
 {/if}
 <nav
+  on:mouseenter="{() => {
+    if (rail) railIsOpen = true;
+  }}"
+  on:mouseleave="{() => {
+    if (railIsOpen) railIsOpen = false;
+  }}"
   aria-hidden="{!isOpen}"
   aria-label="{ariaLabel}"
   class:bx--side-nav__navigation="{true}"
   class:bx--side-nav="{true}"
   class:bx--side-nav--ux="{true}"
-  class:bx--side-nav--expanded="{rail && winWidth >= expansionBreakpoint
-    ? false
-    : isOpen}"
+  class:bx--side-nav--expanded="{isOpen || railIsOpen}"
   class:bx--side-nav--collapsed="{!isOpen && !rail}"
   class:bx--side-nav--rail="{rail}"
   {...$$restProps}

src/UIShell/navStore.js

@@ -2,6 +2,4 @@ import { writable } from "svelte/store";
 
 export const shouldRenderHamburgerMenu = writable(false);
 
-export const isSideNavCollapsed = writable(false);
-
-export const isSideNavRail = writable(false);
+export const isPersistentHamburgerMenu = writable(false);