Navbar Links, Dropdowns & React Icons

1. Convert Static Links to Next.js Link Components

a. Import the Link Component

At the top of your Navbar file (e.g., components/Navbar.jsx), import Link from Next.js:
```
import Link from 'next/link';
```

b. Replace `<a>` Tags with `<Link>`

Locate all anchor tags in your Navbar markup.
For each link, change the opening tag from <a href="/somepage.html"> to:
```
<Link href="/somepage">
  <a>Some Page</a>
</Link>
```

Example: Replace the logo link:

<Link href="/">
  <a className="flex flex-shrink-0 items-center">
    <img className="h-10 w-auto" src="/images/logo-white.png" alt="PropertyPulse" />
    <span className="hidden md:block text-white text-2xl font-bold ml-2">PropertyPulse</span>
  </a>
</Link>

Update all other links similarly (e.g., Home, Properties, Add Property, Messages, Profile, etc.) ensuring you remove the ".html" extension for a cleaner URL structure.

2. Integrate React Icons for Stylish Visuals

a. Install React Icons Package

Open your terminal and run:
```
npm install react-icons
```

b. Import the Required Icon(s)

In your Navbar component, import the desired icon from the React Icons library. For example, to import the Google icon:
```
import { FaGoogle } from 'react-icons/fa';
```

c. Replace Font Awesome CDN Markup with React Icons

Locate the section where the Google icon is referenced (previously using an <i> tag).

// before 
<i className="fa-brands fa-google text-white mr-2"></i>

Replace it with the React icon component:

// after
<FaGoogle className="text-white mr-2" />

This provides a more React-friendly, customizable icon without relying on an external CDN.

a. Mark the Component as a Client Component

Since dropdown menus require interactivity (state management and event handling), add the "use client" directive at the top of your Navbar file:
```
"use client";
```

b. Import React Hooks

Import useState from React:

// component/Navbar.jsx
import { useState } from 'react';

c. Create State for Dropdowns

Inside your Navbar component function, create two state variables—one for the mobile menu and one for the profile dropdown:

//components/Navbar.jsx
...
export default function Navbar() {

  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
  
  return (
  ...

For the mobile menu button, add an onClick event that toggles the state:

<button
  type="button"
  id="mobile-dropdown-button"
  onClick={() => setIsMobileMenuOpen(prev => !prev)}
  className="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
  aria-controls="mobile-menu"
  aria-expanded={isMobileMenuOpen}
>
  <span className="sr-only">Open main menu</span>
  {/* SVG icon here */}
</button>

For the profile dropdown button (the one with the profile image), add a similar toggle:

<button
  type="button"
  onClick={() => setIsProfileMenuOpen(prev => !prev)}
  className="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
  id="user-menu-button"
  aria-expanded={isProfileMenuOpen}
  aria-haspopup="true"
>
  <span className="sr-only">Open user menu</span>
  <img className="h-8 w-8 rounded-full" src="/images/profile.png" alt="User Profile" />
</button>

Wrap the dropdown menus in a conditional render block. For example, for the mobile menu:

//{/* <!-- Mobile menu, show/hide based on menu state. --> */}
 
{isMobileMenuOpen && (
  <div id="mobile-menu" className="block">
    {/* Mobile menu links go here */}
  </div>
)}

Similarly, for the profile dropdown:

// {/* <!-- Profile hide/show dropdown --> */}

{isProfileMenuOpen && (
  <div
    id="user-menu"
    className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5"
    role="menu"
    aria-orientation="vertical"
    aria-labelledby="user-menu-button"
  >
    <Link href="/profile">
      <a className="block px-4 py-2 text-sm text-gray-700" role="menuitem">Your Profile</a>
    </Link>
    <Link href="/saved-properties">
      <a className="block px-4 py-2 text-sm text-gray-700" role="menuitem">Saved Properties</a>
    </Link>
    <button className="block w-full text-left px-4 py-2 text-sm text-gray-700" role="menuitem">
      Sign Out
    </button>
  </div>
)}

4. Testing and Finalizing

a. Save and Test

Save your changes and run your development server:
```
npm run dev
```
Open http://localhost:3000 to verify:
- The links navigate without full page reloads.
- The React icons (e.g., FaGoogle) appear as expected.
- Dropdown menus toggle when clicking the mobile menu button and the profile image.

b. Debug Any Issues

Check the browser console for errors (e.g., JSX attribute warnings, state issues).
Adjust CSS classes and component structure as needed to match your desired aesthetics.

Recap

Link Conversion: Replaced HTML anchor tags with Next.js’s <Link> for smoother client-side navigation.
React Icons: Installed and imported react-icons to replace the external Font Awesome CDN.
Dropdown Menus: Added interactive dropdowns for mobile and profile sections using React’s state hook and conditional rendering.
Testing: Verified the functionality in development mode and ensured no errors occur.

PreviousStart On The Navbar NextActive Links & Conditional Rendering

Last updated 3 months ago

Navbar Enhancement and Adding More Features