Here are steps: –
1. import userSelecter from ‘react-redux’
2. Define user State
const {currentUser}=useSelector(state=>state.user)
3. Add condition in Header.jsx –
{
currentUser ?(
<Dropdown arrowIcon={false} inline label={<Avatar alt=‘user’ img={currentUser.profilePicture} rounded/>}>
<Dropdown.Header>
<span className=‘block text-sm’>@{currentUser.username}</span>
<span className=‘block text-sm font-medium truncate’>{currentUser.email}</span>
</Dropdown.Header>
<Link to={‘/dashboard?tab=profile’}>
<Dropdown.Item>Profile</Dropdown.Item>
</Link>
<Dropdown.Divider/>
<Dropdown.Item>
Sign Out
</Dropdown.Item>
</Dropdown>
):(
<Link to=‘/signin’>
<Button className=‘bg-gradient-to-r from-fuchsia-500 to-cyan-500’>Sign In</Button>
</Link>
)
}
Complete “Header.jsx” Code:-
import { Avatar, Button, Dropdown, Navbar, TextInput } from ‘flowbite-react’
import React from ‘react’
import {AiOutlineSearch} from ‘react-icons/ai’
import {FaMoon} from ‘react-icons/fa’
import { Link, useLocation } from ‘react-router-dom’
import {useSelector} from ‘react-redux’
const Header = () => {
const path=useLocation().pathname;
const {currentUser}=useSelector(state=>state.user)
return (
<div>
<Navbar className=‘border-b-2’>
<Link to=‘/’>
<span className=‘bg-gradient-to-r from-fuchsia-500 to-cyan-500 text-white px-1 py-1 font-semibold rounded’>Krishan’s</span>
Blog
</Link>
<form>
<TextInput type=‘text’ placeholder=‘Search…’ rightIcon={AiOutlineSearch} className=‘hidden lg:inline’/>
</form>
<Button className=‘lg:hidden’ color=‘gray’ pill><AiOutlineSearch/></Button>
<div className=‘flex gap-2 md:order-2’>
<Button className=‘hidden sm:inline’ color=‘gray’ pill><FaMoon/></Button>
{
currentUser ?(
<Dropdown arrowIcon={false} inline label={<Avatar alt=‘user’ img={currentUser.profilePicture} rounded/>}>
<Dropdown.Header>
<span className=‘block text-sm’>@{currentUser.username}</span>
<span className=‘block text-sm font-medium truncate’>{currentUser.email}</span>
</Dropdown.Header>
<Link to={‘/dashboard?tab=profile’}>
<Dropdown.Item>Profile</Dropdown.Item>
</Link>
<Dropdown.Divider/>
<Dropdown.Item>
Sign Out
</Dropdown.Item>
</Dropdown>
):(
<Link to=‘/signin’>
<Button className=‘bg-gradient-to-r from-fuchsia-500 to-cyan-500’>Sign In</Button>
</Link>
)
}
<Navbar.Toggle/>
</div>
<Navbar.Collapse>
<Navbar.Link active={path===‘/’} as={‘div’}>
<Link to=‘/’>Home</Link>
</Navbar.Link>
<Navbar.Link active={path===‘/about’} as={‘div’}>
<Link to=‘/about’>About</Link>
</Navbar.Link>
<Navbar.Link active={path===‘/projects’} as={‘div’}>
<Link to=‘/projects’>Projects</Link>
</Navbar.Link>
</Navbar.Collapse>
</Navbar>
</div>
)
}
export default Header
Video Tutorial:
