refactor theme choosing

Author: filipKovachev

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

@@ -1,5 +1,9 @@
-import React from "react";
-import { Menu, MenuSelectEvent, MenuItemModel } from "@progress/kendo-react-layout";
+import React, { useState } from "react";
+import {
+  Menu,
+  MenuSelectEvent,
+  MenuItemModel,
+} from "@progress/kendo-react-layout";
 import { Button, DropDownButton } from "@progress/kendo-react-buttons";
 import { SvgIcon } from "@progress/kendo-react-common";
 import { InputPrefix, InputSeparator, TextBox, Switch } from "@progress/kendo-react-inputs";
@@ -16,19 +20,9 @@ interface CustomMenuItemModel extends MenuItemModel {
 
 const Header: React.FC = () => {
   const isAdminValue = useStore(isAdmin);
-
-  const setTheme = (themeLink: string) => {
-    let themeLinkElement = document.getElementById("theme-link") as HTMLLinkElement;
-
-    if (!themeLinkElement) {
-      themeLinkElement = document.createElement("link");
-      themeLinkElement.rel = "stylesheet";
-      themeLinkElement.id = "theme-link";
-      document.head.appendChild(themeLinkElement);
-    }
-
-    themeLinkElement.href = themeLink;
-  };
+  const [theme, setTheme] = useState(
+    "https://kendo.cdn.telerik.com/themes/5.0.1/default/default-main.css"
+  );
 
   const handleThemeChange = (event: any) => {
     const selectedTheme = themeItems.find(
@@ -51,56 +45,72 @@ const Header: React.FC = () => {
     const selectedItem: CustomMenuItemModel = event.item;
 
     if (selectedItem.page) {
-      window.location.href = '/kendo-react/kendo-react-e-commerce-astro-app/' + selectedItem.page;
+      window.location.href = "/kendo-react/kendo-react-e-commerce-astro-app/" + selectedItem.page;
       return;
     }
 
     const selectedCategory = selectedItem.text;
     if (selectedCategory === "All") {
-      window.location.href = `/kendo-react/kendo-react-e-commerce-astro-app/products`; // No category filter applied
+      window.location.href = `/kendo-react/kendo-react-e-commerce-astro-app/products`;
     } else {
       window.location.href = `/kendo-react/kendo-react-e-commerce-astro-app/products?category=${encodeURIComponent(selectedCategory)}`;
     }
   };
 
   return (
-    <AppBar themeColor="inherit">
-      <AppBarSection
-        className="k-flex-basis-0 k-flex-grow k-gap-2 k-align-items-center"
-        style={{ paddingLeft: "50px" }}
-      >
-        <a href="/" className="k-d-sm-flex" style={{ marginRight: "50px" }}>
-          <img src="/kendo-react/kendo-react-e-commerce-astro-app/vilora-logo.png" alt="Logo" />
-        </a>
-        <Menu items={items} onSelect={handleMenuSelect} />
-      </AppBarSection>
-      <AppBarSection className="k-flex-basis-0 k-flex-grow k-justify-content-end k-gap-1.5">
-        <TextBox
-          placeholder="Search"
-          prefix={() => (
-            <>
-              <InputPrefix orientation="horizontal">
-                <span className="k-input-prefix-text">
-                  <SvgIcon icon={searchIcon} size="medium" />
-                </span>
-              </InputPrefix>
-              <InputSeparator />
-            </>
-          )}
-          style={{ width: 300 }}
-        />
-        <Button svgIcon={userIcon} fillMode="flat" className="k-ml-2" />
-        <Button svgIcon={cartIcon} fillMode="flat" className="k-ml-2" onClick={handleCartClick} />
-        <DropDownButton
-          svgIcon={paletteIcon}
-          items={themeItems}
-          textField="themeName"
-          fillMode="flat"
-          onItemClick={handleThemeChange}
-        />
-        <Switch onLabel="Admin" offLabel="Client" checked={isAdminValue} onChange={handleSwitchChange} />
-      </AppBarSection>
-    </AppBar>
+    <>
+      <link id="theme-link" rel="stylesheet" href={theme} />
+      <AppBar themeColor="inherit">
+        <AppBarSection
+          className="k-flex-basis-0 k-flex-grow k-gap-2 k-align-items-center"
+          style={{ paddingLeft: "50px" }}
+        >
+          <a href="/" className="k-d-sm-flex" style={{ marginRight: "50px" }}>
+            <img
+              src="/kendo-react/kendo-react-e-commerce-astro-app/vilora-logo.png"
+              alt="Logo"
+            />
+          </a>
+          <Menu items={items} onSelect={handleMenuSelect} />
+        </AppBarSection>
+        <AppBarSection className="k-flex-basis-0 k-flex-grow k-justify-content-end k-gap-1.5">
+          <TextBox
+            placeholder="Search"
+            prefix={() => (
+              <>
+                <InputPrefix orientation="horizontal">
+                  <span className="k-input-prefix-text">
+                    <SvgIcon icon={searchIcon} size="medium" />
+                  </span>
+                </InputPrefix>
+                <InputSeparator />
+              </>
+            )}
+            style={{ width: 300 }}
+          />
+          <Button svgIcon={userIcon} fillMode="flat" className="k-ml-2" />
+          <Button
+            svgIcon={cartIcon}
+            fillMode="flat"
+            className="k-ml-2"
+            onClick={handleCartClick}
+          />
+          <DropDownButton
+            svgIcon={paletteIcon}
+            items={themeItems}
+            textField="themeName"
+            fillMode="flat"
+            onItemClick={handleThemeChange}
+          />
+          <Switch
+            onLabel="Admin"
+            offLabel="Client"
+            checked={isAdminValue}
+            onChange={handleSwitchChange}
+          />
+        </AppBarSection>
+      </AppBar>
+    </>
   );
 };