tera-system-ui 0.1.69 → 0.1.70

package/dist/components/side-navigation/SideNavigation.d.ts

@@ -24,6 +24,9 @@ export declare const SCREEN_BREAK_POINTS: {
     lg: number;
     xl: number;
 };
+export declare function saveXlSideNavState(state: string | undefined): void;
+export declare function loadXlSideNavState(): string | undefined;
+export declare function restoreSideNavStateForXl(): void;
 export declare const mainLayout: () => HTMLElement | null;
 export declare const getSideNavState: () => string | undefined;
 export declare const setSideNavState: (state: any) => void;

package/dist/components/side-navigation/SideNavigation.js

@@ -11,6 +11,25 @@ export const SCREEN_BREAK_POINTS = {
     lg: 1024,
     xl: 1280,
 };
+const SIDE_NAV_XL_STATE_KEY = 'side-nav-xl-state';
+export function saveXlSideNavState(state) {
+    if (state === undefined) {
+        localStorage.removeItem(SIDE_NAV_XL_STATE_KEY);
+    }
+    else {
+        localStorage.setItem(SIDE_NAV_XL_STATE_KEY, state);
+    }
+}
+export function loadXlSideNavState() {
+    return localStorage.getItem(SIDE_NAV_XL_STATE_KEY) ?? undefined;
+}
+export function restoreSideNavStateForXl() {
+    const screenWidth = getScreenWidth();
+    if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
+        const saved = loadXlSideNavState();
+        setSideNavState(saved);
+    }
+}
 export const mainLayout = () => document?.getElementById('side-nav_main-layout');
 export const getSideNavState = () => {
     return mainLayout()?.getAttribute('data-side-nav-state') || undefined;
@@ -38,6 +57,7 @@ export function toggleSideNavigation() {
     }
     else if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
         state = currentSideNavState === undefined ? "compact" : undefined;
+        saveXlSideNavState(state);
     }
     setSideNavState(state);
 }

package/dist/components/side-navigation/SideNavigation.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { SCREEN_BREAK_POINTS, mainLayout, setSideNavState, toggleSideNavigation, getSideNavState } from "./SideNavigation";
+<script lang="ts">import { onMount } from "svelte";
+import { mainLayout, SCREEN_BREAK_POINTS, setSideNavState, restoreSideNavStateForXl, toggleSideNavigation } from "./SideNavigation";
 import { clickOutside } from "../../actions/clickOutside";
 import { Button } from "../button";
 import { IconCoinConvert, IconHamburger } from "../icons";
@@ -70,6 +71,9 @@ let selectedIndex = (() => {
         return (item.exactHref ?? item.href) === resolvedSideNavHref;
     });
 })();
+onMount(() => {
+    restoreSideNavStateForXl();
+});
 </script>
 
 <nav class="side-nav_main-side-bar grid grid-rows-[auto_1fr_auto]"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tera-system-ui",
-  "version": "0.1.69",
+  "version": "0.1.70",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run customPrepublish && npm run generate-index && npm run generate-llms && vite build && npm run package && npm run copy-docs && npm run copy-llms && npm run postpublish",