final polish:

Author: svdimitr

examples/ecommerce-jewellery-store/src/components/CategoryList.tsx

@@ -8,7 +8,8 @@ export const CategoryList: React.FC<CategoryListProps> = ({ data, title, subtitl
     const navigate = useNavigate();
 
     const onNavigate = (card: CardDescriptor) => {
-        if (card.collectionText === "AURELIA") {
+        console.log(card);
+        if (card.collectionText === `Collection \"AURELIA\"`) {
             navigate("/category")
         }
     }

examples/ecommerce-jewellery-store/src/components/Header.tsx

@@ -1,35 +1,43 @@
-import React from 'react';
-import { Menu, AppBarSpacer } from "@progress/kendo-react-layout";
+import React from "react";
+import { Menu, AppBarSpacer, MenuItem } from "@progress/kendo-react-layout";
 import { Button } from "@progress/kendo-react-buttons";
 import { SvgIcon } from "@progress/kendo-react-common";
+import { useNavigate } from "react-router-dom";
 
 import {
   InputPrefix,
   InputSeparator,
   TextBox,
-  Switch
+  Switch,
 } from "@progress/kendo-react-inputs";
 
-
-import { searchIcon, userIcon, cartIcon, paletteIcon } from "@progress/kendo-svg-icons";
-import viloraLogo from '@/assets/vilora-logo.png';
-import items from '@/data/items'
-import languageItems from '@/data/language-items';
-
 import {
-  AppBar,
-  AppBarSection,
-} from "@progress/kendo-react-layout";
+  searchIcon,
+  userIcon,
+  cartIcon,
+  paletteIcon,
+} from "@progress/kendo-svg-icons";
+import viloraLogo from "@/assets/vilora-logo.png";
+import items from "@/data/items";
+import languageItems from "@/data/language-items";
+
+import { AppBar, AppBarSection } from "@progress/kendo-react-layout";
 
 const Header: React.FC = () => {
+  const navigate = useNavigate();
+
   return (
     <>
       <AppBar themeColor="inherit">
-        <AppBarSection className="k-align-items-center" style={{ paddingLeft: '50px' }}>
-          <a href="#" className="k-d-sm-flex" style={{ marginRight: '50px' }}>
+        <AppBarSection
+          className="k-align-items-center"
+          style={{ paddingLeft: "50px" }}
+        >
+          <a href="#" className="k-d-sm-flex" style={{ marginRight: "50px" }}>
             <img src={viloraLogo} alt="Logo" />
           </a>
-          <Menu items={items} />
+          <Menu items={items}>
+          </Menu>
         </AppBarSection>
 
         <AppBarSection>
@@ -39,16 +47,15 @@ const Header: React.FC = () => {
               <>
                 <InputPrefix orientation="horizontal">
                   <span className="k-input-prefix-text">
-                  <SvgIcon icon={searchIcon} size="medium" />
-
+                    <SvgIcon icon={searchIcon} size="medium" />
                   </span>
                 </InputPrefix>
                 <InputSeparator />
               </>
             )}
             style={{ width: 300 }}
           />
-          <div style={{ marginLeft: '20px' }}>
+          <div style={{ marginLeft: "20px" }}>
             <Button svgIcon={userIcon} fillMode="flat" className="k-ml-2" />
             <Button svgIcon={cartIcon} fillMode="flat" className="k-ml-2" />
             <Button svgIcon={paletteIcon} fillMode="flat" className="k-ml-2" />
@@ -57,7 +64,7 @@ const Header: React.FC = () => {
 
         <AppBarSpacer style={{ width: 4 }} />
 
-        <AppBarSection style={{ marginRight: '50px' }}>
+        <AppBarSection style={{ marginRight: "50px" }}>
           <Switch />
           <Menu items={languageItems} />
         </AppBarSection>

examples/ecommerce-jewellery-store/src/data/items.ts

@@ -1,10 +1,11 @@
 const items = [
     {
       "text": "Home",
+      "url": "/"
     },
     {
       "text": "Jewelry",
-      "items": [{ "text": "Bracelets" }, { "text": "Rings" }, { "text": "Earings" }, { "text": "Watches" },{ "text": "All" }]
+      "items": [{ "text": "Bracelets" }, { "text": "Rings" }, { "text": "Earings" }, { "text": "Watches" },{ "text": "All" }],
     },
     {
       "text": "Blog"