Use NavLink in the navigation elements (#623)

trento-project · Jun 7, 2022 · f6aaab2 · f6aaab2
1 parent 7cfd163
commit f6aaab2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/assets/js/components/Layout/Layout.jsx b/assets/js/components/Layout/Layout.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { Link, Outlet, useLocation } from 'react-router-dom';
+import { NavLink, Outlet } from 'react-router-dom';
 
 import {
   EOS_HOME_OUTLINED,
@@ -52,8 +52,6 @@ const navigation = [
 ];
 
 const Layout = () => {
-  const { pathname } = useLocation();
-  const isCurrentRoute = (route) => pathname === route;
   const [isCollapsed, setCollapsed] = useState(
     localStorage.getItem('sidebar-collapsed')
   );
@@ -89,13 +87,15 @@ const Layout = () => {
                 <div>
                   {navigation.map((item, index) => {
                     return (
-                      <Link
+                      <NavLink
                         key={index}
-                        className={`tn-menu-item w-full text-gray-800 dark:text-white flex items-center pl-6 p-2 my-2 transition-colors duration-200 justify-start ${
-                          isCurrentRoute(item.href)
-                            ? 'border-l-4 border-jungle-green-500'
-                            : 'hover:border-l-4 hover:border-jungle-green-500'
-                        }`}
+                        className={({ isActive }) =>
+                          `tn-menu-item w-full text-gray-800 dark:text-white flex items-center pl-6 p-2 my-2 transition-colors duration-200 justify-start ${
+                            isActive
+                              ? 'border-l-4 border-jungle-green-500'
+                              : 'hover:border-l-4 hover:border-jungle-green-500'
+                          }`
+                        }
                         to={item.href}
                       >
                         <span className="text-left">
@@ -104,7 +104,7 @@ const Layout = () => {
                         <span className="mx-2 text-sm font-normal">
                           {item.name}
                         </span>
-                      </Link>
+                      </NavLink>
                     );
                   })}
                 </div>

diff --git a/test/e2e/cypress/integration/host_details.js b/test/e2e/cypress/integration/host_details.js
@@ -14,6 +14,12 @@ context('Host Details', () => {
   });
 
   describe('Detailed view for a specific host should be available', () => {
+    it('should highlight the hosts sidebar entry', () => {
+      cy.get('.tn-menu-item[href="/hosts"]')
+        .invoke('attr', 'aria-current')
+        .should('eq', 'page');
+    });
+
     it('should show the host I clicked on in the overview', () => {
       cy.get('.grid-flow-col > :nth-child(1) > :nth-child(2) > span').should(
         'contain',

diff --git a/test/e2e/cypress/integration/hosts_overview.js b/test/e2e/cypress/integration/hosts_overview.js
@@ -12,6 +12,11 @@ context('Hosts Overview', () => {
   });
 
   describe('Registered Hosts are shown in the list', () => {
+    it('should highlight the hosts sidebar entry', () => {
+      cy.get('.tn-menu-item[href="/hosts"]')
+        .invoke('attr', 'aria-current')
+        .should('eq', 'page');
+    });
     it('should show 10 of the 27 registered hosts', () => {
       cy.get('.tn-hostname').its('length').should('eq', 10);
     });