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/Navigation/ActivityNav.tsx

@@ -1,30 +1,13 @@
-// Copyright © 2022 Kaleido, Inc.
-//
-// SPDX-License-Identifier: Apache-2.0
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
 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 +19,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,44 @@ 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;
-}
 
+  // NEW:
+  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

@@ -30,7 +30,7 @@ export const Navigation: React.FC = () => {
       <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 +43,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,
     },
   ];

src/components/Navigation/OffChainNav.tsx

@@ -17,14 +17,13 @@
 import InventoryIcon from '@mui/icons-material/Inventory';
 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 OffChainNav = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const { pathname } = useLocation();
   const { selectedNamespace } = useContext(ApplicationContext);
 
@@ -38,32 +37,32 @@ export const OffChainNav = () => {
   const navItems: INavItem[] = [
     {
       name: t('dashboard'),
-      action: () => navigate(offchainPath),
+      to: offchainPath,
       itemIsActive: pathname === offchainPath,
     },
     {
       name: t('messages'),
-      action: () => navigate(messagesPath),
+      to: messagesPath,
       itemIsActive: pathname === messagesPath,
     },
     {
       name: t('data'),
-      action: () => navigate(dataPath),
+      to: dataPath,
       itemIsActive: pathname === dataPath,
     },
     {
       name: t('batches'),
-      action: () => navigate(batchesPath),
+      to: batchesPath,
       itemIsActive: pathname === batchesPath,
     },
     {
       name: t('datatypes'),
-      action: () => navigate(datatypesPath),
+      to: datatypesPath,
       itemIsActive: pathname === datatypesPath,
     },
     {
       name: t('groups'),
-      action: () => navigate(groupsPath),
+      to: groupsPath,
       itemIsActive: pathname === groupsPath,
     },
   ];

src/components/Navigation/TokensNav.tsx

@@ -17,14 +17,13 @@
 import AdjustIcon from '@mui/icons-material/Adjust';
 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 TokensNav = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const { pathname } = useLocation();
   const { selectedNamespace } = useContext(ApplicationContext);
 
@@ -37,27 +36,27 @@ export const TokensNav = () => {
   const navItems: INavItem[] = [
     {
       name: t('dashboard'),
-      action: () => navigate(blockchainPath),
+      to: blockchainPath,
       itemIsActive: pathname === blockchainPath,
     },
     {
       name: t('transfers'),
-      action: () => navigate(transfersPath),
+      to: transfersPath,
       itemIsActive: pathname === transfersPath,
     },
     {
       name: t('pools'),
-      action: () => navigate(poolsPath),
+      to: poolsPath,
       itemIsActive: pathname.startsWith(poolsPath),
     },
     {
       name: t('balances'),
-      action: () => navigate(balancesPath),
+      to: balancesPath,
       itemIsActive: pathname === balancesPath,
     },
     {
       name: t('approvals'),
-      action: () => navigate(approvalsPath),
+      to: approvalsPath,
       itemIsActive: pathname === approvalsPath,
     },
   ];