> 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/active-links-and-conditional-rendering.md).
# Active Links & Conditional Rendering
## Active Links & Conditional Rendering
### 1. Implement Active Link Styling
#### a. Import the `usePathname` Hook
* In your Navbar component, import the `usePathname` hook from Next.js’ navigation module. This hook lets you determine the current route: components/Navbar.jsx
```jsx
import { usePathname } from 'next/navigation';
```
#### b. Retrieve the Current Pathname
* Inside your Navbar component function just below Navbar function, initialize a constant to hold the current pathname:
```jsx
const pathname = usePathname();
```
#### c. Apply Conditional Styling to Each Link
* For *each navigation link*, adjust the `className` dynamically using a template literal and a ternary operator.
* **Example for the Home Link(/):**
```jsx
Home
```
* **Example for the Properties Link(/properties):**
```jsx
className={`${pathname === '/properties' ? 'bg-black' : ''} px-3 py-2 text-white hover:bg-gray-900 rounded-md`}
>
Properties
```
* **Example for the Properties Add Link(/properties/add):**
```jsx
className={`${pathname === '/properties/add' ? 'bg-black' : ''} px-3 py-2 text-white hover:bg-gray-900 rounded-md`}
>
Add Properties
```
* **Repeat the process** for all navigation links (including mobile menu links) so that the active page is highlighted (e.g., with a black background).
***
### 2. Implement Conditional Rendering Based on Authentication State
#### a. Set Up Authentication State
* Since the login system isn’t fully implemented yet, use a piece of state (e.g., `isLoggedIn`) to simulate a user being logged in or not.
* Import the `useState` hook and initialize the state:
```jsx
"use client";
import { useState } from 'react';
// Inside your component function:
const [isLoggedIn, setIsLoggedIn] = useState(false); // Change to true to simulate a logged-in user
```
#### b. Conditionally Render Navbar Items
* **For Desktop Navigation:**
* **Show “****Add Property****” Link Only When ****Logged In****:**
```jsx
{isLoggedIn && (
className={`${pathname === '/property/add' ? 'bg-black' : ''} px-3 py-2 text-white hover:bg-gray-900 rounded-md`}
>
Add Property
)}
```
* **Toggle Between “****Login or Register****” (when logged out) and Profile Dropdown (when logged in):**
```javascriptreact
{/* */}
```
```jsx
{!isLoggedIn ? (
) }
{/* */}
{isLoggedIn && (
{' '}
2
{/* */}
{/* */}
{/* */}
{isProfileMenuOpen && (
Your Profile
Saved Properties
Sign Out
)}
)}
```
* **For Mobile Navigation:**
* Apply the same conditional logic to show/hide links in the mobile menu.
* **Example:**
```jsx
{/* Apply the same conditional logic to show/hide links in the mobile menu. */}
{isLoggedIn ? (
className={`${pathname === '/property/add' ? 'bg-black' : ''} block rounded-md px-3 py-2 text-base font-medium`}
>
Add Property
)}
{!isLoggedIn && (
)}
```
***
### 3. Testing and Final Adjustments
#### a. Run Your Development Server
* Start your Next.js application:
```bash
npm run dev
```
* Navigate to and verify that:
* The active link styling correctly highlights the current page.
* The Navbar conditionally displays the appropriate links based on the simulated `isLoggedIn` state.
Result
{% tabs %}
{% tab title="isUserLoggedIn(true)" %}
{% endtab %}
{% tab title="isUserLoggedIn(false)" %}
{% endtab %}
{% endtabs %}
#### b. Toggle the `isLoggedIn` State
* Change the value of `isLoggedIn` (e.g., set it to `true` or `false`) and observe the changes in the Navbar for both desktop and mobile views.
#### c. Debug and Refine CSS Classes
* Adjust Tailwind CSS classes as needed to achieve the desired aesthetics and responsiveness.
***
### Recap
* **Active Link Styling:**\
Use the `usePathname` hook to dynamically apply CSS classes based on the current route, ensuring that the active page is visually highlighted.
* **Conditional Rendering:**\
Use React state (`isLoggedIn`) to conditionally render components like the "Add Property" link, login button, and profile dropdown. This approach sets the foundation for future authentication integration.