Merge pull request #2696 from telerik/router-fix

boryanaT · web-flow · commit 37d27058121f · 2024-11-18T09:33:14.000+02:00
Router fix
diff --git a/examples/ecommerce-jewellery-store/index.html b/examples/ecommerce-jewellery-store/index.html
@@ -17,15 +17,6 @@
 <body>
   <div id="root"></div>
   <script type="module" src="/src/main.tsx"></script>
-  <script>
-    (() => {
-      const redirect = sessionStorage.redirect;
-      delete sessionStorage.redirect;
-      if (redirect && redirect !== location.href) {
-        history.replaceState(null, null, redirect);
-      }
-    })();
-  </script>
 </body>
 
 </html>
diff --git a/examples/ecommerce-jewellery-store/public/404.html b/examples/ecommerce-jewellery-store/public/404.html
diff --git a/examples/ecommerce-jewellery-store/src/components/Header.tsx b/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>
-    </>
   );
 };
 
diff --git a/examples/ecommerce-jewellery-store/src/data/items.ts b/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"
     }
   ];
   
diff --git a/examples/ecommerce-jewellery-store/src/styles.css b/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;
 }
diff --git a/examples/ecommerce-jewellery-store/vite.config.ts b/examples/ecommerce-jewellery-store/vite.config.ts
@@ -1,7 +1,6 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
-import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -17,12 +16,6 @@ export default defineConfig({
     },
   },
   build: {
-    outDir: 'build',
-    rollupOptions: {
-        input: {
-          main: resolve(__dirname, "index.html"),
-          404: resolve(__dirname, "public/404.html"),
-        },
-      },
+    outDir: 'build'
   },
 });

Original file line number	Diff line number	Diff line change
`@@ -1,15 +1,15 @@`
`1`	`1`	`const items = [`
`2`	`2`	`{`
`3`	`3`	`"text": "Home",`
`4`		`- "url": "/"`
	`4`	`+ "page": "/"`
`5`	`5`	`},`
`6`	`6`	`{`
`7`	`7`	`"text": "Jewelry",`
`8`	`8`	`"items": [{ "text": "Bracelets" }, { "text": "Rings" }, { "text": "Earings" }, { "text": "Watches" },{ "text": "All" }],`
`9`	`9`	`},`
`10`	`10`	`{`
`11`	`11`	`"text": "Contacts",`
`12`		`- "url": "contacts"`
	`12`	`+ "page": "contacts"`
`13`	`13`	`}`
`14`	`14`	`];`
`15`	`15`
Original file line number	Diff line number	Diff line change
`@@ -23,4 +23,8 @@ html, body {`
`23`	`23`	`position: fixed !important;`
`24`	`24`	`top: auto !important;`
`25`	`25`	`z-index: 1000;`
	`26`	`+}`
	`27`	`+`
	`28`	`+.switch-width {`
	`29`	`+ width: 72px !important;`
`26`	`30`	`}`