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