Adds tooltips to social media icons

cypress.config.js

@@ -8,6 +8,6 @@ module.exports = defineConfig({
     setupNodeEvents(on, config) {
       return require('./cypress/plugins/index.js')(on, config);
     },
-    baseUrl: 'http://localhost:4200',
+    baseUrl: 'http://localhost:3000',
   },
 });

cypress/e2e/check-sub-navigation.cy.js

@@ -7,11 +7,11 @@ describe('Detect sub navigation', () => {
     cy.get(selector).should('exist');
   });
 
-  it('should not show sub navigation', () => {
+  it('should show sub navigation on homepage', () => {
     cy.visit('/');
 
     const selector = '[data-testid="sub-navigation"]';
 
-    cy.get(selector).should('not.exist');
+    cy.get(selector).should('exist');
   });
 });

package.json

@@ -38,8 +38,8 @@
     "prebuild": "npm run clean",
     "build": "run-s fetch-repos fetch content && webpack --config webpack.prod.mjs --define-process-env-node-env production && run-s printable content && webpack --config webpack.ssg.mjs --define-process-env-node-env production --env ssg",
     "postbuild": "npm run sitemap",
-    "build-test": "npm run build && http-server --port 4200 dist/",
-    "serve-dist": "http-server --port 4200 dist/",
+    "build-test": "npm run build && http-server --port 3000 dist/",
+    "serve-dist": "http-server --port 3000 dist/",
     "test": "npm run lint",
     "lint": "run-s lint:*",
     "lint:js": "npm run lint-js .",

src/components/Navigation/Navigation.jsx

@@ -1,15 +1,10 @@
-// Import External Dependencies
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { DocSearch } from '@docsearch/react';
 import { Link as ReactDOMLink, NavLink, useLocation } from 'react-router-dom';
-
-// Import Components
 import Link from '../Link/Link';
 import Logo from '../Logo/Logo';
 import Dropdown from '../Dropdown/Dropdown';
-
-// Load Styling
 import '@docsearch/css';
 
 import GithubIcon from '../../styles/icons/github.svg';
@@ -18,23 +13,18 @@ import StackOverflowIcon from '../../styles/icons/stack-overflow.svg';
 import Hamburger from '../../styles/icons/hamburger.svg';
 import HelloDarkness from '../HelloDarkness';
 
-NavigationItem.propTypes = {
-  children: PropTypes.node.isRequired,
-  url: PropTypes.string.isRequired,
-  isactive: PropTypes.func,
-};
-
-function NavigationItem({ children, url, isactive }) {
+// NavigationItem Component
+function NavigationItem({ children, url, isActive }) {
   let obj = {};
-  // decide if the link is active or not by providing a function
-  // otherwise we'll let react-dom makes the decision for us
-  if (isactive) {
+  if (isActive) {
     obj = {
-      isactive,
+      isActive,
     };
   }
+
   const classes =
     'text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200';
+
   if (url.startsWith('http') || url.startsWith('//')) {
     return (
       <a
@@ -47,6 +37,7 @@ function NavigationItem({ children, url, isactive }) {
       </a>
     );
   }
+
   return (
     <NavLink
       {...obj}
@@ -60,40 +51,45 @@ function NavigationItem({ children, url, isactive }) {
   );
 }
 
-NavigationIcon.propTypes = {
+NavigationItem.propTypes = {
   children: PropTypes.node.isRequired,
-  to: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  isActive: PropTypes.func,
 };
+
+// NavigationIcon component with tooltip
 function NavigationIcon({ children, to, title }) {
   return (
-    <Link
-      to={to}
-      className="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200"
-      title={`webpack on ${title}`}
-    >
-      {children}
-    </Link>
+    <div className="relative group inline-flex flex-col items-center">
+      <Link
+        to={to}
+        className="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200"
+        title={`webpack on ${title}`}
+      >
+        {children}
+      </Link>
+      {/* Tooltip */}
+      <div className="absolute top-full mt-2 px-3 py-1 bg-blue-500 text-white text-sm rounded shadow-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
+        {title}
+      </div>
+    </div>
   );
 }
+
+NavigationIcon.propTypes = {
+  children: PropTypes.node.isRequired,
+  to: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
 const navigationIconProps = {
   'aria-hidden': true,
   fill: 'currentColor',
   width: 16,
 };
 
-Navigation.propTypes = {
-  pathname: PropTypes.string,
-  hash: PropTypes.string,
-  links: PropTypes.array,
-  toggleSidebar: PropTypes.func,
-  theme: PropTypes.string,
-  switchTheme: PropTypes.func,
-};
-
 function Navigation({ links, pathname, hash = '', toggleSidebar }) {
   const [locationHash, setLocationHash] = useState(hash);
-
   const location = useLocation();
 
   useEffect(() => {
@@ -123,6 +119,7 @@ function Navigation({ links, pathname, hash = '', toggleSidebar }) {
                 {content}
               </NavigationItem>
             ))}
+            {/* Social Media Icons with Tooltips */}
             {[
               {
                 to: 'https://github.com/webpack/webpack',
@@ -188,18 +185,12 @@ function Navigation({ links, pathname, hash = '', toggleSidebar }) {
             />
           </div>
         </div>
-        {/* sub navigation */}
+        {/* Sub navigation */}
         {links
-          .filter((link) => {
-            // only those with children are displayed
-            return link.children;
-          })
+          .filter((link) => link.children)
           .map((link) => {
-            if (link.isactive) {
-              // hide the children if the link is not active
-              if (!link.isactive({}, location)) {
-                return null;
-              }
+            if (link.isActive && !link.isActive({}, location)) {
+              return null;
             }
             return (
               <div
@@ -240,4 +231,11 @@ function Navigation({ links, pathname, hash = '', toggleSidebar }) {
   );
 }
 
+Navigation.propTypes = {
+  pathname: PropTypes.string,
+  hash: PropTypes.string,
+  links: PropTypes.array,
+  toggleSidebar: PropTypes.func,
+};
+
 export default Navigation;