> For the complete documentation index, see [llms.txt](https://reactjs.koida.tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reactjs.koida.tech/backend-frameworks-next.js/hands-on-practice-2/navbar-links-dropdowns-and-react-icons.md). # 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: ```jsx import Link from 'next/link'; ``` #### b. Replace `` Tags with `` * Locate all anchor tags in your Navbar markup. * For each link, change the opening tag from `` to: ```jsx Some Page ``` * **Example:**\ Replace the logo link: ```jsx PropertyPulse PropertyPulse ``` * 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: ```bash 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: ```jsx 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 `` tag). ```jsx // before ``` * Replace it with the React icon component: ```jsx // after ``` * 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: ```jsx "use client"; ``` #### b. Import React Hooks * Import `useState` from React: ```jsx // 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: ```jsx //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: ```jsx ``` * For the profile dropdown button (the one with the profile image), add a similar toggle: ```jsx ``` #### e. Conditionally Render Dropdown Menus * Wrap the dropdown menus in a conditional render block. For example, for the mobile menu: ```jsx //{/* */} {isMobileMenuOpen && (
{/* Mobile menu links go here */}
)} ``` * 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: ```bash npm run dev ``` * Open 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 `` 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.