Responsive Header with Avatar Dropdownwithout any package installed Header.jsimport React, { useState, useEffect } from 'react';import './Header.css'; // Import your CSS file for stylingconst Header = () => {const [isDropdownOpen, setIsDropdownOpen] =useState(false);const [isSmallScreen, setIsSmallScreen] =useState(false);useEffect(() => {consthandleResize= () => {setIsSmallScreen(window.innerWidth<=768);};handleResize(); // Initial checkwindow.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
