# 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://reactjs.koida.tech/backend-frameworks-next.js/hands-on-practice-2/navbar-links-dropdowns-and-react-icons.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.