import { Link } from "react-router-dom";
Imports Link component from react-router-dom for navigation
between routes.
import { useState } from "react";
Imports the useState hook to manage the state of the menu (open
or closed).
import { FaSearch, FaShoppingBag, FaSignInAlt,
FaUser, FaSignOutAlt } from "react-icons/fa";
Imports icon components for search, shopping bag, sign-in, user,
and sign-out from the react-icons library.
const user = { _id: "wejhwe", role: "admin" }
Defines a mock user object representing a logged-in user with an
ID and a role (admin).
const Header = () => {
const [isOpen, setIsOpen] =
useState<boolean>(false);
Defines the Header component and initializes state isOpen to
manage the visibility of the user menu (initially false).
return (
<nav className="header">
Returns a navigation bar (nav element) with a class header.
<Link onClick={()=> setIsOpen(false)}
to={"/search"}> <FaSearch/> </Link>
A Link to the search page (/search), clicking it closes the user
menu (setIsOpen(false)), with a search icon inside.
<Link onClick={()=> setIsOpen(false)} to={"/"}> Home </Link>
A Link to the home page (/), closes the user menu on click.
<Link onClick={()=> setIsOpen(false)} to={"/cart"}>
<FaShoppingBag/> </Link>
A Link to the cart page (/cart), closes the user menu on click, with
a shopping bag icon.
{user?._id ? (
Checks if user._id exists, i.e., if the user is logged in.
<>
Opens a fragment to return multiple elements.
<button onClick={() => setIsOpen((prev) => !prev)}>
<FaUser />
</button>
A button that toggles the isOpen state to show/hide the user menu,
with a user icon.
<dialog open={isOpen}>
A dialog element that will open based on the isOpen state.
<div>
Starts a div to group the menu items inside the dialog.
{[Link] === "admin" && (
Checks if the user has an "admin" role.
<Link to="/admin/dashboard"> Admin </Link>
If the user is an admin, a link to the admin dashboard is shown.
)}
Closes the admin role check block.
<Link to="/orders">Orders</Link>
A link to the orders page (/orders), available to all logged-in
users.
<button>
<FaSignOutAlt />
</button>
A button with a sign-out icon (FaSignOutAlt), but the sign-out
functionality is not implemented here.
</div>
Closes the div inside the dialog.
</dialog>
Closes the dialog element.
</>
Closes the fragment.
) : (
If no user is logged in (i.e., user._id is falsy), renders the
following:
<Link to={"/login"}>
<FaSignInAlt />
</Link>
A Link to the login page (/login) with a sign-in icon.
)}
Closes the conditional rendering block.
</nav>
Closes the nav element for the header.
);
Closes the Header component's return statement.
};
export default Header;
Exports the Header component for use in other parts of the
application.
@include in SCSS
A mixin in SCSS is a reusable block of CSS code that can be included in
different parts of your stylesheet using @include. It can accept arguments
to make it flexible.
Example:
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.container {
@include flex-center;
}
This will apply the flex-center styles to .container.