Enable CMD/CTRL-click behavior for sidebar navigation (#174)

.gitignore

@@ -23,3 +23,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.idea/

src/components/Breadcrumbs/FFBreadcrumb.tsx

@@ -1,37 +1,61 @@
 import { Breadcrumbs, Link, Typography } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
 import { IFFBreadcrumb } from '../../interfaces';
 
 interface Props {
   breadcrumbs: IFFBreadcrumb[];
 }
 
 export const FFBreadcrumb: React.FC<Props> = ({ breadcrumbs }) => {
-  const navigate = useNavigate();
-
   return (
     <Breadcrumbs>
-      {breadcrumbs.map((b, idx) => (
-        <Link
-          key={idx}
-          underline={idx !== breadcrumbs.length - 1 ? 'hover' : 'none'}
-          color={idx !== breadcrumbs.length - 1 ? 'inherit' : 'text.primary'}
-          sx={{
-            cursor: idx !== breadcrumbs.length - 1 ? 'pointer' : 'default',
-          }}
-          onClick={b.link ? () => navigate(b.link ?? '') : undefined}
-        >
-          <Typography
-            variant="h5"
+      {breadcrumbs.map((b, idx) => {
+        const isLast = idx === breadcrumbs.length - 1;
+        const link = b.link;
+        if (link && !isLast) {
+          return (
+            <Link
+              key={idx}
+              component={RouterLink}
+              to={link}
+              underline="hover"
+              color="inherit"
+              sx={{ cursor: 'pointer' }}
+            >
+              <Typography
+                variant="h5"
+                sx={{
+                  fontWeight: 'bold',
+                  fontSize: '14',
+                }}
+              >
+                {b.content}
+              </Typography>
+            </Link>
+          );
+        }
+
+        return (
+          <Link
+            key={idx}
+            underline={!isLast ? 'hover' : 'none'}
+            color={!isLast ? 'inherit' : 'text.primary'}
             sx={{
-              fontWeight: 'bold',
-              fontSize: '14',
+              cursor: 'default',
             }}
           >
-            {b.content}
-          </Typography>
-        </Link>
-      ))}
+            <Typography
+              variant="h5"
+              sx={{
+                fontWeight: 'bold',
+                fontSize: '14',
+              }}
+            >
+              {b.content}
+            </Typography>
+          </Link>
+        );
+      })}
     </Breadcrumbs>
   );
 };

src/components/Navigation/ActivityNav.tsx

@@ -17,14 +17,13 @@
 import { InsertChartOutlined } from '@mui/icons-material';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { ApplicationContext } from '../../contexts/ApplicationContext';
 import { FF_NAV_PATHS, INavItem } from '../../interfaces';
 import { NavSection } from './NavSection';
 
 export const ActivityNav = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const { selectedNamespace } = useContext(ApplicationContext);
   const { pathname } = useLocation();
 
@@ -36,22 +35,22 @@ export const ActivityNav = () => {
   const navItems: INavItem[] = [
     {
       name: t('timeline'),
-      action: () => navigate(timelinePath),
+      to: timelinePath,
       itemIsActive: pathname === timelinePath,
     },
     {
       name: t('events'),
-      action: () => navigate(eventsPath),
+      to: eventsPath,
       itemIsActive: pathname === eventsPath,
     },
     {
       name: t('transactions'),
-      action: () => navigate(txPath),
+      to: txPath,
       itemIsActive: pathname.startsWith(txPath),
     },
     {
       name: t('operations'),
-      action: () => navigate(opsPath),
+      to: opsPath,
       itemIsActive: pathname === opsPath,
     },
   ];

src/components/Navigation/BlockchainNav.tsx

@@ -17,14 +17,13 @@
 import ViewInArIcon from '@mui/icons-material/ViewInAr';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { ApplicationContext } from '../../contexts/ApplicationContext';
 import { FF_NAV_PATHS, INavItem } from '../../interfaces';
 import { NavSection } from './NavSection';
 
 export const BlockchainNav = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const { selectedNamespace } = useContext(ApplicationContext);
   const { pathname } = useLocation();
 
@@ -38,27 +37,27 @@ export const BlockchainNav = () => {
   const navItems: INavItem[] = [
     {
       name: t('dashboard'),
-      action: () => navigate(blockchainPath),
+      to: blockchainPath,
       itemIsActive: pathname === blockchainPath,
     },
     {
       name: t('events'),
-      action: () => navigate(eventsPath),
+      to: eventsPath,
       itemIsActive: pathname === eventsPath,
     },
     {
       name: t('apis'),
-      action: () => navigate(apiPath),
+      to: apiPath,
       itemIsActive: pathname === apiPath,
     },
     {
       name: t('interfaces'),
-      action: () => navigate(interfacesPath),
+      to: interfacesPath,
       itemIsActive: pathname === interfacesPath,
     },
     {
       name: t('listeners'),
-      action: () => navigate(listenersPath),
+      to: listenersPath,
       itemIsActive: pathname === listenersPath,
     },
   ];

src/components/Navigation/MyNodeNav.tsx

@@ -17,14 +17,13 @@
 import HexagonIcon from '@mui/icons-material/Hexagon';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { ApplicationContext } from '../../contexts/ApplicationContext';
 import { FF_NAV_PATHS, INavItem } from '../../interfaces';
 import { NavSection } from './NavSection';
 
 export const MyNodeNav = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const { selectedNamespace } = useContext(ApplicationContext);
   const { pathname } = useLocation();
 
@@ -37,17 +36,17 @@ export const MyNodeNav = () => {
   const navItems: INavItem[] = [
     {
       name: t('dashboard'),
-      action: () => navigate(myNodePath),
+      to: myNodePath,
       itemIsActive: pathname === myNodePath,
     },
     {
       name: t('subscriptions'),
-      action: () => navigate(myNodeSubscriptionsPath),
+      to: myNodeSubscriptionsPath,
       itemIsActive: pathname === myNodeSubscriptionsPath,
     },
     {
       name: t('websockets'),
-      action: () => navigate(myNodeWebsocketsPath),
+      to: myNodeWebsocketsPath,
       itemIsActive: pathname === myNodeWebsocketsPath,
     },
   ];

src/components/Navigation/NavItem.tsx

@@ -21,26 +21,42 @@ import {
   ListItemText,
   Typography,
 } from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
 
 interface Props {
   name: string;
-  action: () => void;
-  icon?: JSX.Element;
   itemIsActive: boolean;
+  icon?: JSX.Element;
   rightIcon?: JSX.Element;
   isRoot?: boolean;
+  to?: string; // internal route (React Router)
+  href?: string; // external link
+  action?: () => void; // fallback click handler (legacy)
 }
-
 export const NavItem = ({
   name,
   action,
   icon,
   itemIsActive,
   rightIcon,
   isRoot = false,
+  to,
+  href,
 }: Props) => {
+  const linkProps =
+    to != null
+      ? { component: RouterLink, to }
+      : href != null
+      ? {
+          component: 'a' as const,
+          href,
+          target: '_blank',
+          rel: 'noopener noreferrer',
+        }
+      : {};
   return (
     <ListItemButton
+      {...linkProps}
       onClick={action}
       sx={{
         borderLeft: 6,

src/components/Navigation/NavSection.tsx

@@ -66,10 +66,13 @@ export const NavSection = ({ icon, navItems, title }: Props) => {
       <Collapse in={open} unmountOnExit>
         {navItems.map((item) => (
           <NavItem
+            key={item.name}
             name={item.name}
-            action={item.action}
+            icon={item.icon}
             itemIsActive={item.itemIsActive}
-            key={item.name}
+            to={item.to}
+            href={item.href}
+            action={item.action} // still supported as fallback
           />
         ))}
       </Collapse>

src/components/Navigation/Navigation.tsx

@@ -4,7 +4,7 @@ import MenuBookIcon from '@mui/icons-material/MenuBook';
 import { Drawer, List } from '@mui/material';
 import { default as React, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { ApplicationContext } from '../../contexts/ApplicationContext';
 import { FF_NAV_PATHS } from '../../interfaces';
 import { MenuLogo } from '../MenuLogo';
@@ -23,14 +23,13 @@ export const Navigation: React.FC = () => {
   const { selectedNamespace } = useContext(ApplicationContext);
   const { t } = useTranslation();
   const { pathname } = useLocation();
-  const navigate = useNavigate();
 
   const makeDrawerContents = (
     <>
       <NavItem
         name={t('dashboard')}
         icon={<DashboardOutlined />}
-        action={() => navigate(FF_NAV_PATHS.homePath(selectedNamespace))}
+        to={FF_NAV_PATHS.homePath(selectedNamespace)} // ← use `to` instead of action
         itemIsActive={pathname === FF_NAV_PATHS.homePath(selectedNamespace)}
         isRoot
       />
@@ -43,7 +42,7 @@ export const Navigation: React.FC = () => {
       <NavItem
         name={t('docs')}
         icon={<MenuBookIcon />}
-        action={() => window.open(FF_NAV_PATHS.docsPath, '_blank')}
+        href={FF_NAV_PATHS.docsPath} // ← external URL
         itemIsActive={false}
         rightIcon={<LaunchIcon />}
         isRoot

src/components/Navigation/NetworkNav.tsx

@@ -17,14 +17,13 @@
 import LanguageIcon from '@mui/icons-material/Language';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { ApplicationContext } from '../../contexts/ApplicationContext';
 import { FF_NAV_PATHS, INavItem } from '../../interfaces';
 import { NavSection } from './NavSection';
 
 export const NetworkNav = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const { selectedNamespace } = useContext(ApplicationContext);
   const { pathname } = useLocation();
 
@@ -37,27 +36,27 @@ export const NetworkNav = () => {
   const navItems: INavItem[] = [
     {
       name: t('dashboard'),
-      action: () => navigate(networkPath),
+      to: networkPath,
       itemIsActive: pathname === networkPath,
     },
     {
       name: t('organizations'),
-      action: () => navigate(orgPath),
+      to: orgPath,
       itemIsActive: pathname === orgPath,
     },
     {
       name: t('nodes'),
-      action: () => navigate(nodePath),
+      to: nodePath,
       itemIsActive: pathname === nodePath,
     },
     {
       name: t('identities'),
-      action: () => navigate(identitiesPath),
+      to: identitiesPath,
       itemIsActive: pathname === identitiesPath,
     },
     {
       name: t('namespaces'),
-      action: () => navigate(namespacesPath),
+      to: namespacesPath,
       itemIsActive: pathname === namespacesPath,
     },
   ];