Here's a detailed description of the refactored Header component:
import React, { useState } from 'react';
import "./header.css";
import { MdDarkMode } from "react-icons/md";
import { MdLightMode } from "react-icons/md";
const Header = ({theme, toggleTheme}) => {
/* ================ change background Header =================== */
window.addEventListener("scroll", function () {
const header = document.querySelector(".header");
if (this.scrollY >= 80) header.classList.add("show-header");
else header.classList.remove("show-header");
});
/* ================ Toggle Menu =================== */
const [toggle, setToggle] = useState(false);
const [activeNav, setActiveNav] = useState("#home");
return (
<header className='header'>
<nav className='nav container'>
<a href="index.html" className='nav_logo'>Anilrajput</a>
<div className={toggle ? "nav_menu show-menu" :"nav_menu"}>
<ul className='nav_list grid'>
<li className='nav_item'>
<a href="#home" onClick={() => setActiveNav("#home")} className={activeNav === "#home" ?'nav_link active_link' : "nav_link"}>
<i className="uil uil-estate nav_icon"></i>
Home
</a>
</li>
<li className='nav_item'>
<a href="#about" onClick={() => setActiveNav("#about")} className={activeNav === "#about" ?'nav_link active_link' : "nav_link"}>
<i className="uil uil-user nav_icon"></i>
About
</a>
</li>
<li className='nav_item'>
<a href="#skills" onClick={() => setActiveNav("#skills")} className={activeNav === "#skills" ?'nav_link active_link' : "nav_link"}>
<i className="uil uil-file-alt nav_icon"></i>
Skills
</a>
</li>
<li className='nav_item'>
<a href="#portfolio" onClick={() => setActiveNav("#project")} className={activeNav === "#project" ?'nav_link active_link' : "nav_link"}>
<i className="uil uil-scenery nav_icon"></i>
Project
</a>
</li>
<li className='nav_item'>
<a href="#contact" onClick={() => setActiveNav("#contact")} className={activeNav === "#contact" ?'nav_link active_link' : "nav_link"}>
<i className="uil uil-message nav_icon"></i>
contact
</a>
</li>
</ul>
<i className='uil uil-times nav_close' onClick={() => setToggle(!toggle)}></i>
</div>
<div className='nav_toggle' onClick={() => setToggle(!toggle)}>
<i className='uil uil-apps'></i>
</div>
{/*=================== light mode function ============================== */}
<div className='light_mode'>
<span onClick = {toggleTheme}>
{theme === "light-theme" ? (
<span>
<MdDarkMode />
</span>
) : (
<span>
<MdLightMode />
</span>
)}
</span>
</div>
</nav>
</header>
)
}
export default Header
Explanation of this code:
-
Functional Component: The
Headercomponent is a functional component in React. It serves as the header section of a web page and includes navigation links, a toggle button for the menu, and an option to switch between light and dark modes. -
State Management: The component utilizes React's
useStatehook to manage local state. It maintains two state variables: toggle for controlling the visibility of the navigation menu, andactiveNavfor tracking the currently active navigation link. -
Side Effects with useEffect: The component employs the
useEffecthook to handle side effects. Specifically, it sets up an event listener for the scroll event on the window object. This event listener toggles the visibility of the header based on the user's scroll position. The effect is set to run only once after the initial render, ensuring that the event listener is added and removed properly. -
Dynamic Class Management: The header's visibility is controlled dynamically using CSS classes. When the user scrolls beyond a certain threshold (in this case, 80 pixels), the
show-headerclass is added to the header, making it visible. Conversely, if the user scrolls back up, the class is removed, hiding the header. -
Navigation Links and Toggle Button: Inside the navigation bar, there are links to different sections of the webpage. Clicking on these links updates the
activeNavstate, highlighting the corresponding link as active. Additionally, there's a toggle button that controls the visibility of the navigation menu. Clicking on this button toggles the toggle state, showing or hiding the menu. Light Mode Toggle: The header includes an option to switch between light and dark modes. This feature is represented by an icon (either a sun or moon icon) based on the current theme. Clicking on the icon triggers the
toggleThemefunction passed as a prop, which updates the theme of the entire application.Overall, the
Headercomponent combines user interaction, state management, and side effects to create a dynamic and responsive user interface for the web page. It demonstrates best practices in React development, such as functional components, hooks, and separation of
style of nav-bar (CSS)
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--body-color);
}
.nav {
height: calc(var(--header-height) + 1.5rem);
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 1rem;
}
.nav_logo,
.nav_toggle {
color: var(--title-color);
font-weight: var(--font-medium);
}
.nav_list {
display: flex;
column-gap: 2rem;
}
.nav_link {
display: flex;
flex-direction: column;
align-items: center;
font-size: var(--small-font-size);
color: var(--title-color);
font-weight: var(--font-medium);
transition: .3s;
padding: 0.25rem 0.75rem;
border-radius: 0.5rem;
}
.nav_icon,
.nav_close,
.nav_toggle {
display: none;
}
.active_link,
.nav_link:hover {
background-color: var(--text-color);
color: var(--container-color);
}
.show-header {
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
}
/* =========== dark mode =============== */
.light-mode span {
color: rgba(255, 255, 255, 0.637);
display: flex;
align-items: center;
column-gap: 0.4rem;
font-size: 0.8rem;
}
.light-theme .light_mode {
color: #000;
font-weight: 500;
}
/* =========== BREAKPOINTS =============== */
/* for medium device */
@media screen and (max-width: 768px) {
.header {
top: initial;
bottom: 0;
}
.nav {
height: var(--header-height);
}
.nav_menu {
position: fixed;
bottom: -100%;
left: 0;
width: 100%;
background-color: var(--container-color);
padding: 2rem 1.5rem 4rem;
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
border-radius: 1.5rem 1.5rem 0 0;
transition: .3s;
}
.dark-theme .nav_menu {
background-color: var(--title-color-dark);
}
/* show menu */
.show-menu {
bottom: 0;
}
.nav_list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.nav_icon {
font-size: 1.2rem;
}
.nav_close {
position: absolute;
right: 1.3rem;
bottom: .5rem;
font-size: 1.5rem;
cursor: pointer;
color: var(--title-color);
}
.nav_close:hover {
color: var(--title-color-dark);
}
.dark-theme .nav_close:hover {
color: var(--container-color);
}
.dark-theme .nav_close {
color: var(--title-color);
}
.nav_toggle {
font-size: 1.1rem;
cursor: pointer;
}
.nav_icon,
.nav_close,
.nav_toggle {
display: block;
}
}
/* for small device */
@media screen and (max-width: 350px) {
.nav_menu {
padding: 2rem 0.25rem 4rem;
}
.nav_list {
column-gap: 0;
}
}
Array methods in react.js
Fragment in react.js
Conditional rendering in react.js
Children component in react.js
use of Async/Await in react.js
Array methods in react.js
JSX in react.js
Event Handling in react.js
Arrow function in react.js
Virtual DOM in react.js
React map() in react.js
How to create dark mode in react.js
How to use of Props in react.js
Class component and Functional component
How to use of Router in react.js
All React hooks explain
CSS box model
How to make portfolio nav-bar in react.js
Top comments (0)