Responsive Header with Avatar Dropdown
without any package installed
Header.js
import React, { useState, useEffect } from ‘react’;
import ‘./Header.css’; // Import your CSS file for styling
const Header = () => {
const [isDropdownOpen, setIsDropdownOpen] =useState(false);
const [isSmallScreen, setIsSmallScreen] =useState(false);
useEffect(() => {
consthandleResize= () => {
setIsSmallScreen(window.innerWidth<=768);
};
handleResize(); // Initial check
window.addEventListener(‘resize’, handleResize);
return () => {
window.removeEventListener(‘resize’, handleResize);
};
}, []);
consttoggleDropdown= () => {
setIsDropdownOpen(!isDropdownOpen);
};
return (
<headerclassName=”header”>
<divclassName=”logo”>Logo</div>
<navclassName={`nav ${isSmallScreen ? ‘hidden’ : ”}`}>
<ulclassName=”menu”>
<liclassName=”menu-item”>Home</li>
<liclassName=”menu-item”>About</li>
<liclassName=”menu-item”>Services</li>
<liclassName=”menu-item”>Contact</li>
</ul>
</nav>
<divclassName=”avatar”onClick={toggleDropdown}>
<imgsrc=”avatar.jpg”alt=”Avatar”className=”avatar-img”/>
{isDropdownOpen && (
<ulclassName={`dropdown-menu ${isSmallScreen ? ‘center’ : ”}`}>
{isSmallScreen && (
<React.Fragment>
<liclassName=”dropdown-item”>Home</li>
<liclassName=”dropdown-item”>About</li>
<liclassName=”dropdown-item”>Services</li>
<liclassName=”dropdown-item”>Contact</li>
</React.Fragment>
)}
<liclassName=”dropdown-item”>Profile</li>
<liclassName=”dropdown-item”>Settings</li>
<liclassName=”dropdown-item”>Logout</li>
</ul>
)}
</div>
</header>
);
};
export default Header;
Header.css
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background-color: #333;
color: #fff;
}
.logo {
font-size: 1.5rem;
}
.nav {
display: flex;
}
.menu {
list-style-type: none;
display: flex;
}
.menu-item {
margin-right: 1rem;
cursor: pointer;
}
.avatar {
position: relative;
cursor: pointer;
}
.avatar-img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.dropdown-menu {
position: absolute;
top: 50px;
right: 0;
background-color: #fff;
border: 1pxsolid#ccc;
border-radius: 4px;
padding: 0.5rem;
box-shadow: 0px2px5pxrgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
min-width: 120px;
}
.dropdown-item {
padding: 0.5rem;
cursor: pointer;
color: black;
}
.dropdown-item:hover {
background-color: #f0f0f0;
color: black;
}
.hidden {
display: none;
}
.center {
margin-left: auto;
margin-right: auto;
}
That’s it 🙂 Happy Coding
