Use NavLink in the navigation elements

trento-project · Jun 2, 2022 · 8df874e · 8df874e
1 parent 7b3101f
commit 8df874e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 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,10 +87,10 @@ 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)
+                        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'
                         }`}
@@ -104,7 +102,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,10 @@ 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,9 @@ 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);
     });