Take the same approach as react

src/UIShell/Content.svelte

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

src/UIShell/SideNav.svelte

@@ -20,35 +20,14 @@
   /** 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 {
+  import { shouldRenderHamburgerMenu } from "./navStore";
-    shouldRenderHamburgerMenu,
-    isSideNavCollapsed,
-    isSideNavFixed,
-    isSideNavRail,
-    isSideNavExpanded,
-  } from "./navStore";
 
   const dispatch = createEventDispatcher();
 
   let winWidth = undefined;
 
   $: dispatch(isOpen ? "open" : "close");
-  $: $isSideNavExpanded = !rail && winWidth >= expansionBreakpoint;
-  $: $isSideNavCollapsed = !$isSideNavExpanded;
-  $: $isSideNavFixed = !rail & isOpen;
-  $: $isSideNavRail = rail;
 
   onMount(() => {
     shouldRenderHamburgerMenu.set(true);
@@ -76,10 +55,9 @@
   class:bx--side-nav__navigation="{true}"
   class:bx--side-nav="{true}"
   class:bx--side-nav--ux="{true}"
-  class:bx--side-nav--fixed="{$isSideNavFixed}"
+  class:bx--side-nav--expanded="{isOpen}"
-  class:bx--side-nav--expanded="{$isSideNavExpanded}"
+  class:bx--side-nav--collapsed="{!isOpen}"
-  class:bx--side-nav--collapsed="{$isSideNavCollapsed}"
+  class:bx--side-nav--rail="{rail}"
-  class:bx--side-nav--rail="{$isSideNavRail}"
   {...$$restProps}
 >
   <slot />

src/UIShell/navStore.js

@@ -1,11 +1,3 @@
 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);