implement theme switcher

refactor theme choosing

Author: filipKovachev

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

@@ -1,20 +1,37 @@
-import React from "react";
-import { Menu, MenuItemModel, MenuSelectEvent } from "@progress/kendo-react-layout";
-import { Button } from "@progress/kendo-react-buttons";
+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";
-import { searchIcon, userIcon, cartIcon } from "@progress/kendo-svg-icons";
+import { searchIcon, userIcon, cartIcon, paletteIcon } from "@progress/kendo-svg-icons";
 import items from "../data/items";
+import themeItems from "../data/themeItems";
 import { AppBar, AppBarSection } from "@progress/kendo-react-layout";
 import { isAdmin } from "../helpers/adminStore";
 import { useStore } from "@nanostores/react";
 
 interface CustomMenuItemModel extends MenuItemModel {
-    page?: string;
-  }
+  page?: string;
+}
 
 const Header: React.FC = () => {
   const isAdminValue = useStore(isAdmin);
+  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(
+      (item) => item.themeName === event.item.themeName
+    );
+    if (selectedTheme) {
+      setTheme(selectedTheme.link);
+    }
+  };
 
   const handleCartClick = () => {
     window.location.href = "/kendo-react/kendo-react-e-commerce-astro-app/shoppingcart";
@@ -28,46 +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;
-        return;
+      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} />
-        <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>
+    </>
   );
 };
 

examples/kendo-react-e-commerce-astro-app/src/data/themeItems.ts

@@ -0,0 +1,24 @@
+const themeItems = [
+    {
+        themeName: 'Main',
+        link: 'https://unpkg.com/@progress/[email protected]/dist/default-main.css'
+    },
+    {
+        themeName: 'Main Dark',
+        link: 'https://unpkg.com/@progress/[email protected]/dist/default-main-dark.css'
+    },
+    {
+        themeName: 'Ocean Blue',
+        link: 'https://unpkg.com/@progress/[email protected]/dist/default-ocean-blue-a11y.css'
+    },
+    {
+        themeName: 'Nordic',
+        link: 'https://unpkg.com/@progress/[email protected]/dist/default-nordic.css'
+    },
+    {
+        themeName: 'Purple',
+        link: 'https://unpkg.com/@progress/[email protected]/dist/default-purple.css'
+    }
+];
+
+export default themeItems;