Navbar Links, Dropdowns & React Icons

Navbar Enhancement and Adding More Features

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.

---

3. Implement Dropdown Menus with React State

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 (
    ...

d. Toggle Dropdown Visibility with onClick

• 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>

e. Conditionally Render Dropdown Menus

• 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.