persist theme selection when navigating

Author: filipKovachev

examples/kendo-react-e-commerce-astro-app/src/components/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Menu,
   MenuSelectEvent,
@@ -20,16 +20,30 @@ interface CustomMenuItemModel extends MenuItemModel {
 
 const Header: React.FC = () => {
   const isAdminValue = useStore(isAdmin);
-  const [theme, setTheme] = useState(
-    "https://unpkg.com/@progress/[email protected]/dist/default-main.css"
+
+  const [theme, setTheme] = useState<string>(() =>
+    typeof window !== "undefined"
+      ? localStorage.getItem("theme") ||
+        "https://unpkg.com/@progress/[email protected]/dist/default-main.css"
+      : "https://unpkg.com/@progress/[email protected]/dist/default-main.css"
   );
 
+  useEffect(() => {
+    const themeLink = document.getElementById("theme-link") as HTMLLinkElement;
+    if (themeLink) {
+      themeLink.href = theme;
+    } else {
+      console.error("Theme <link> tag not found");
+    }
+  }, [theme]);
+
   const handleThemeChange = (event: any) => {
     const selectedTheme = themeItems.find(
       (item) => item.themeName === event.item.themeName
     );
     if (selectedTheme) {
-      setTheme(selectedTheme.link);
+      setTheme(selectedTheme.link); 
+      localStorage.setItem("theme", selectedTheme.link); 
     }
   };
 

examples/kendo-react-e-commerce-astro-app/src/helpers/themeStore.ts

@@ -0,0 +1,15 @@
+import { atom } from 'nanostores';
+
+export const themeStore = atom<string>(
+  typeof window !== 'undefined'
+    ? localStorage.getItem('theme') ||
+      'https://unpkg.com/@progress/[email protected]/dist/default-main.css'
+    : 'https://unpkg.com/@progress/[email protected]/dist/default-main.css'
+);
+
+export const setTheme = (newTheme: string) => {
+  themeStore.set(newTheme);
+  if (typeof window !== 'undefined') {
+    localStorage.setItem('theme', newTheme);
+  }
+};

examples/kendo-react-e-commerce-astro-app/src/layouts/Layout.astro

@@ -59,7 +59,7 @@
        z-index: 1000; 
       }
 
-      .sized-parent{
+      body.sized-parent {
         max-width: 1280px;
         margin: auto;
       }