diff --git a/examples/kendo-react-freemium/src/components/DrawerComponent.tsx b/examples/kendo-react-freemium/src/components/DrawerComponent.tsx index 7d323124..4195b17d 100644 --- a/examples/kendo-react-freemium/src/components/DrawerComponent.tsx +++ b/examples/kendo-react-freemium/src/components/DrawerComponent.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { Drawer, DrawerContent } from "@progress/kendo-react-layout"; import { folderIcon, homeIcon, listUnorderedSquareIcon, userOutlineIcon } from '@progress/kendo-svg-icons'; -import { To, useNavigate } from 'react-router-dom'; +import { To, useLocation, useNavigate } from 'react-router-dom'; const drawerItems = [ - { text: "Home", svgIcon: homeIcon, route: '', selected: true, className: "rounded-md [.k-selected]:!bg-primary/8 [.k-selected]:!text-primary" }, + { text: "Home", svgIcon: homeIcon, route: '/', selected: true, className: "rounded-md [.k-selected]:!bg-primary/8 [.k-selected]:!text-primary" }, { text: "Projects", svgIcon: folderIcon, route: '/projects', className: "rounded-md [.k-selected]:!bg-primary/8 [.k-selected]:!text-primary" }, { text: "Tasks", svgIcon: listUnorderedSquareIcon, route: '/tasks', className: "rounded-md [.k-selected]:!bg-primary/8 [.k-selected]:!text-primary" }, { text: "Team Management", svgIcon: userOutlineIcon, route: '/team-management', className: "rounded-md [.k-selected]:!bg-primary/8 [.k-selected]:!text-primary" } @@ -16,20 +16,29 @@ interface DrawerComponentProps { const DrawerComponent: React.FC = ({ children }) => { const navigate = useNavigate(); - const [selected, setSelected] = React.useState(drawerItems.findIndex(x => x.selected === true)); + const location = useLocation(); const onSelect = (e: { itemTarget: { props: { route: To; }; }; itemIndex: React.SetStateAction; }) => { navigate(e.itemTarget.props.route); - setSelected(e.itemIndex); }; + + const setSelectedItem = (pathName: string) => { + let currentPath = drawerItems.find((item) => item.route === pathName); + if (currentPath && currentPath.text) { + return currentPath.text; + } + }; + + const selected = setSelectedItem(location.pathname); + return ( ({ + items={drawerItems.map(item => ({ ...item, - selected: index === selected + selected: item.text === selected, }))} onSelect={onSelect} width={223} diff --git a/examples/kendo-react-freemium/src/pages/Projects.tsx b/examples/kendo-react-freemium/src/pages/Projects.tsx index 1a3bf72e..d6934d0e 100644 --- a/examples/kendo-react-freemium/src/pages/Projects.tsx +++ b/examples/kendo-react-freemium/src/pages/Projects.tsx @@ -10,7 +10,6 @@ import { GridCustomCellProps, GridFilterChangeEvent, GridItemChangeEvent, - GridPageChangeEvent, GridSearchBox, GridToolbar, } from "@progress/kendo-react-grid"; @@ -21,22 +20,17 @@ import { homeIcon, plusIcon, printIcon, - searchIcon, } from "@progress/kendo-svg-icons"; import { SvgIcon } from "@progress/kendo-react-common"; -import { InputPrefix, TextBox } from "@progress/kendo-react-inputs"; import { Badge } from "@progress/kendo-react-indicators"; import { - process, filterBy, - CompositeFilterDescriptor, } from "@progress/kendo-data-query"; import React from "react"; -import { priorities, projectManagers, projectsData } from "./data"; +import { projectsData } from "./data"; import { CSVLink } from "react-csv"; import { HeaderTdElement, - PagerTargetEvent, } from "@progress/kendo-react-data-tools"; import { DropDownList } from "@progress/kendo-react-dropdowns"; import { useNavigate } from "react-router-dom";