feat(dashboard): "Under Development" message

 - shows "Under Development" message when "Devices" and "Labs" labels
   are clicked
 - labels change when clicked

Closes #223

dashboard/src/components/SideMenu/SideMenu.tsx

@@ -1,11 +1,16 @@
+import { useMemo } from 'react';
+
 import { MdOutlineMonitorHeart } from 'react-icons/md';
 
 import { ImTree, ImImages } from 'react-icons/im';
 import { HiOutlineDocumentSearch } from 'react-icons/hi';
 
-import { useRouter, useSearch } from '@tanstack/react-router';
-
-import { useMemo } from 'react';
+import {
+  Link,
+  useRouter,
+  useSearch,
+  useLocation,
+} from '@tanstack/react-router';
 
 import { MessagesKey } from '@/locales/messages';
 
@@ -26,7 +31,7 @@ import SendFeedback from './SendFeedback';
 import NavLink from './NavLink';
 
 type RouteMenuItems = {
-  onClick: () => void;
+  navigateTo: string;
   idIntl: MessagesKey;
   icon: JSX.Element;
   selected: boolean;
@@ -46,14 +51,20 @@ const linkItems: LinkMenuItems[] = [
   },
 ];
 
-const emptyFunc = (): void => {};
+type SideMenuItemProps = {
+  item: RouteMenuItems;
+};
 
-const SideMenu = (): JSX.Element => {
+const SideMenuItem = ({ item }: SideMenuItemProps): JSX.Element => {
   const selectedItemClassName =
     'w-full flex pl-5 py-4 cursor-pointer text-sky-500 bg-black border-l-4 border-sky-500';
   const notSelectedItemClassName =
     'w-full flex pl-5 py-4 cursor-pointer text-white';
 
+  const { pathname } = useLocation();
+
+  const isCurrentPath = pathname === item.navigateTo;
+
   const useNavigateTo = (path: string): (() => void) => {
     const router = useRouter();
     const { origin: unsafeOrigin } = useSearch({ strict: false });
@@ -72,25 +83,41 @@ const SideMenu = (): JSX.Element => {
     };
   };
 
+  return (
+    <NavigationMenuItem
+      className={
+        isCurrentPath ? selectedItemClassName : notSelectedItemClassName
+      }
+      key={item.idIntl}
+    >
+      <NavLink icon={item.icon} idIntl={item.idIntl} />
+    </NavigationMenuItem>
+  );
+};
+
+const SideMenu = (): JSX.Element => {
+  const notSelectedItemClassName =
+    'w-full flex pl-5 py-4 cursor-pointer text-white';
+
   const routeItems: RouteMenuItems[] = [
     {
-      onClick: useNavigateTo('/'),
-      idIntl: 'routes.treeMonitor',
-      icon: <ImTree className="size-5" />,
-      selected: true,
-    },
-    {
-      onClick: emptyFunc,
+      navigateTo: '/devices',
       idIntl: 'routes.deviceMonitor',
       icon: <MdOutlineMonitorHeart className="size-5" />,
       selected: false,
     },
     {
-      onClick: emptyFunc,
+      navigateTo: '/labs',
       idIntl: 'routes.labsMonitor',
       icon: <ImImages className="size-5" />,
       selected: false,
     },
+    {
+      navigateTo: '/',
+      idIntl: 'routes.treeMonitor',
+      icon: <ImTree className="size-5" />,
+      selected: true,
+    },
   ];
 
   const linksItemElements = useMemo(
@@ -124,15 +151,7 @@ const SideMenu = (): JSX.Element => {
 
       <NavigationMenuList className="w-52 flex-col space-x-0 space-y-4">
         {routeItems.map(item => (
-          <NavigationMenuItem
-            className={
-              item.selected ? selectedItemClassName : notSelectedItemClassName
-            }
-            key={item.idIntl}
-            onClick={item.onClick}
-          >
-            <NavLink icon={item.icon} idIntl={item.idIntl} />
-          </NavigationMenuItem>
+          <SideMenuItem item={item}></SideMenuItem>
         ))}
         <Separator className="my-4 bg-onSecondary-10" />
         {linksItemElements}

dashboard/src/components/UnderDevelopment/UnderDevelopment.tsx

@@ -0,0 +1,9 @@
+import { FormattedMessage } from 'react-intl';
+
+export const UnderDevelopment = (): JSX.Element => {
+  return (
+    <div className="grid h-[400px] place-items-center rounded-md bg-slate-100 dark:bg-slate-800">
+      <FormattedMessage id="global.underDevelopment" />
+    </div>
+  );
+};

dashboard/src/components/UnderDevelopment/index.tsx

@@ -0,0 +1,3 @@
+import { UnderDevelopment } from './UnderDevelopment';
+
+export { UnderDevelopment };

dashboard/src/locales/messages/index.ts

@@ -124,6 +124,7 @@ export const messages = {
     'global.timing': 'Timing',
     'global.total': 'Total',
     'global.tree': 'Tree',
+    'global.underDevelopment': 'Under Development',
     'global.unknown': 'Unknown',
     'global.url': 'URL',
     'global.valid': 'Valid',

dashboard/src/routeTree.gen.ts

@@ -11,6 +11,8 @@
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
+import { Route as LabsImport } from './routes/labs'
+import { Route as DevicesImport } from './routes/devices'
 import { Route as TreeRouteImport } from './routes/tree/route'
 import { Route as IndexImport } from './routes/index'
 import { Route as TreeIndexImport } from './routes/tree/index'
@@ -23,6 +25,16 @@ import { Route as TreeTreeIdBuildBuildIdIndexImport } from './routes/tree/$treeI
 
 // Create/Update Routes
 
+const LabsRoute = LabsImport.update({
+  path: '/labs',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const DevicesRoute = DevicesImport.update({
+  path: '/devices',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const TreeRouteRoute = TreeRouteImport.update({
   path: '/tree',
   getParentRoute: () => rootRoute,
@@ -87,6 +99,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof TreeRouteImport
       parentRoute: typeof rootRoute
     }
+    '/devices': {
+      id: '/devices'
+      path: '/devices'
+      fullPath: '/devices'
+      preLoaderRoute: typeof DevicesImport
+      parentRoute: typeof rootRoute
+    }
+    '/labs': {
+      id: '/labs'
+      path: '/labs'
+      fullPath: '/labs'
+      preLoaderRoute: typeof LabsImport
+      parentRoute: typeof rootRoute
+    }
     '/tree/$treeId': {
       id: '/tree/$treeId'
       path: '/$treeId'
@@ -156,6 +182,8 @@ export const routeTree = rootRoute.addChildren({
     }),
     TreeIndexRoute,
   }),
+  DevicesRoute,
+  LabsRoute,
 })
 
 /* prettier-ignore-end */
@@ -167,7 +195,9 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/tree"
+        "/tree",
+        "/devices",
+        "/labs"
       ]
     },
     "/": {
@@ -180,6 +210,12 @@ export const routeTree = rootRoute.addChildren({
         "/tree/"
       ]
     },
+    "/devices": {
+      "filePath": "devices.tsx"
+    },
+    "/labs": {
+      "filePath": "labs.tsx"
+    },
     "/tree/$treeId": {
       "filePath": "tree/$treeId/route.tsx",
       "parent": "/tree",

dashboard/src/routes/devices.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+import { UnderDevelopment } from '@/components/UnderDevelopment';
+
+export const Route = createFileRoute('/devices')({
+  component: () => <UnderDevelopment />,
+});

dashboard/src/routes/labs.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+import { UnderDevelopment } from '@/components/UnderDevelopment';
+
+export const Route = createFileRoute('/labs')({
+  component: () => <UnderDevelopment />,
+});