chore: change url to page

Author: zdravkov

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { Menu, MenuSelectEvent } from "@progress/kendo-react-layout";
+import { Menu, MenuItemModel, MenuSelectEvent } from "@progress/kendo-react-layout";
 import { Button } from "@progress/kendo-react-buttons";
 import { SvgIcon } from "@progress/kendo-react-common";
 import { InputPrefix, InputSeparator, TextBox, Switch } from "@progress/kendo-react-inputs";
@@ -12,6 +12,11 @@ import { AppBar, AppBarSection } from "@progress/kendo-react-layout";
 import { useAdminContext } from "../helpers/AdminContext";
 import { useCategoriesContext } from "../helpers/CategoriesContext"; 
 
+interface CustomMenuItemModel extends MenuItemModel {
+  page?: string;
+}
+
+
 const Header: React.FC = () => {
   const navigate = useNavigate();
   const { toggleRole } = useAdminContext();
@@ -26,10 +31,10 @@ const Header: React.FC = () => {
   };
 
   const handleMenuSelect = (event: MenuSelectEvent) => {
-    const selectedItem = event.item;
-  
-    if (selectedItem.url) {
-      navigate(selectedItem.url);
+    const selectedItem: CustomMenuItemModel = event.item;
+
+    if (selectedItem.page) {
+      navigate(selectedItem.page);
       return;
     }
 
@@ -43,7 +48,6 @@ const Header: React.FC = () => {
   };
 
   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" }}>
@@ -75,14 +79,14 @@ const Header: React.FC = () => {
             onClick={handleCartClick}
           />
           <Switch
+            className="switch-width"
             onLabel="Admin"
             offLabel="Client"
             onChange={handleSwitchChange}
           />
           <Menu items={languageItems} onSelect={handleMenuSelect} />
         </AppBarSection>
       </AppBar>
-    </>
   );
 };
 

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

@@ -1,15 +1,15 @@
 const items = [
     {
       "text": "Home",
-      "url": "/"
+      "page": "/"
     },
     {
       "text": "Jewelry",
       "items": [{ "text": "Bracelets" }, { "text": "Rings" }, { "text": "Earings" }, { "text": "Watches" },{ "text": "All" }],
     },
     {
       "text": "Contacts",
-      "url": "contacts"
+      "page": "contacts"
     }
   ];
 

examples/ecommerce-jewellery-store/src/styles.css

@@ -23,4 +23,8 @@ html, body {
   position: fixed !important; 
   top: auto !important;
   z-index: 1000; 
+}
+
+.switch-width {
+  width: 72px !important;
 }