chore: add routing

examples/kendo-react-freemium/src/App.tsx

@@ -0,0 +1,25 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import AppBarComponent from "./components/AppBarComponent";
+import DrawerComponent from "./components/DrawerComponent";
+import TeamManagement from "./pages/TeamManagement";
+import Home from "./pages/Home";
+import Projects from "./pages/Projects";
+import Tasks from "./pages/Tasks";
+
+export default function App() {
+  return (
+    <>
+      <AppBarComponent />
+      <BrowserRouter>
+        <DrawerComponent>
+            <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/projects" element={<Projects />} />
+                <Route path="/tasks" element={<Tasks />} />
+                <Route path="/team-management" element={<TeamManagement />} />
+            </Routes>
+        </DrawerComponent>
+      </BrowserRouter>
+    </>
+  )
+}

examples/kendo-react-freemium/src/components/AppBarComponent.tsx

@@ -54,7 +54,7 @@ export default function AppBarComponent() {
                 >
                    <div className="k-list k-list-md">
                     <div className="k-list-content">
-                        <ul className="k-list-ul">
+                            <ul className="k-list-ul">
                             <li className="k-list-item">
                                 <SvgIcon icon={slidersIcon}/>
                                 <span className="k-list-item-text">Settings</span>

examples/kendo-react-freemium/src/components/DrawerComponent.tsx

@@ -1,6 +1,7 @@
 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';
 
 const drawerItems = [
     { text: "Home", svgIcon: homeIcon, route: '', selected: true, className: "rounded-md [.k-selected]:!bg-primary/8 [.k-selected]:!text-primary" },
@@ -14,13 +15,24 @@ interface DrawerComponentProps {
 }
 
 const DrawerComponent: React.FC<DrawerComponentProps> = ({ children }) => {
+  const navigate = useNavigate();
+  const [selected, setSelected] = React.useState(drawerItems.findIndex(x => x.selected === true));
+
+  const onSelect = (e: { itemTarget: { props: { route: To; }; }; itemIndex: React.SetStateAction<number>; }) => {
+    navigate(e.itemTarget.props.route);
+    setSelected(e.itemIndex);
+  };
   return (
     <Drawer
       expanded={true}
       mode="push"
       drawerClassName="!flex-none !sticky !bg-surface-alt !px-2 !py-10 !w-16 md:!w-60 [&_.k-drawer-wrapper]:!w-12 md:[&_.k-drawer-wrapper]:!w-56"
       style={{ height: 'calc(100vh - 70px)', top: '70px' }}
-      items={drawerItems}
+      items={drawerItems.map((item, index) => ({
+        ...item,
+        selected: index === selected
+      }))}
+      onSelect={onSelect}
       width={223}
     >
       <DrawerContent>

examples/kendo-react-freemium/src/main.tsx

@@ -1,25 +1,12 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import '@progress/kendo-theme-default/dist/all.css';
-import Home from './Home.tsx'
-import Grid from './grid/Grid.tsx';
 import './index.css'
-
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <Home />,
-  },
-  {
-    path: "/grid/",
-    element: <Grid />,
-  }
-]);
+import App from './App.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <RouterProvider router={router} />
+    <App/>
   </StrictMode>,
 )
 

examples/kendo-react-freemium/src/pages/Home.tsx

@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <>
+      Home
+    </>
+  )
+}

examples/kendo-react-freemium/src/pages/Projects.tsx

@@ -0,0 +1,7 @@
+export default function Projects() {
+  return (
+    <>
+      Projects
+    </>
+  )
+}

examples/kendo-react-freemium/src/pages/Settings.tsx

@@ -0,0 +1,7 @@
+export default function Settings() {
+  return (
+    <>
+      Settings
+    </>
+  )
+}

examples/kendo-react-freemium/src/pages/Tasks.tsx

@@ -0,0 +1,7 @@
+export default function Tasks() {
+  return (
+    <>
+      Tasks
+    </>
+  )
+}

examples/kendo-react-freemium/src/pages/TeamManagement.tsx

@@ -0,0 +1,7 @@
+export default function TeamManagement() {
+  return (
+    <>
+      TeamManagement
+    </>
+  )
+}