Category: Blog

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 {window.removeEventListener('resize', handleResize);};}, []);consttoggleDropdown= () => {setIsDropdownOpen(!isDropdownOpen);};return ( Logo Home About Services Contact {isDropdownOpen && ( {isSmallScreen && ( Home About Services Contact )} Profile Settings Logout )} );};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

Category: Blog

Responsive Header with avatar/menu dropdown in React or css

test

Learn and Earn with CODIFY.

Quick Links

Support

Resources

Table of Contents