Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix navbar mobile responsiveness #297

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix navbar mobile responsiveness #297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
250 changes: 212 additions & 38 deletions src/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,16 @@ import { FaQuestionCircle } from "react-icons/fa";

import ScrollToTop from "./ScrollToTop";
import { useGoogleLogin } from "@react-oauth/google";
import avatar from './avatar.png';
import avatar from "./avatar.png";

const Header = () => {
const [isLoggedIn, setisLoggedIn] = useState(true);
const [isMenuOpen, setIsMenuOpen] = useState(false); // Track whether the menu is open
const [isProfileOpen, setisProfileOpen] = useState(false);
const [userInfo, setUserInfo] = useState({
name:"",
picture:"",
email:""
name: "",
picture: "",
email: "",
});

const isOnline = useOnline();
Expand All @@ -45,11 +45,11 @@ const Header = () => {
}

const data = await response.json();
const {name, email, picture} = data;
const { name, email, picture } = data;
setUserInfo({
name:name,
email:email,
picture:picture
name: name,
email: email,
picture: picture,
});
} catch (error) {
console.error("Error fetching user info:", error);
Expand Down Expand Up @@ -80,10 +80,6 @@ const Header = () => {
setIsMenuOpen(!isMenuOpen);
};

// Function to close the menu
const closeMenu = () => {
setIsMenuOpen(false);
};
//For retrieving the accessToken on page referesh
useEffect(() => {
if (localStorage.getItem("accessToken")) {
Expand All @@ -96,25 +92,184 @@ const Header = () => {
<>
<ScrollToTop />
<div className="shadow-md fixed bg-white w-full z-50 sm:pr-4">
<div className="flex justify-between container mx-auto py-1 px-4 md:flex md:justify-between md:items-center">
<div className="flex items-center -ml-5 sm:ml-0 justify-between">
<Link to="/">
<img
data-testid="logo"
className="h-12 md:h-20"
src={LOGO_URL}
alt="Logo"
/>
</Link>
<div className="flex items-center">
<div className="flex justify-between container mx-auto py-1 px-4 md:flex md:justify-between md:items-center">
<div className="flex items-center -ml-5 sm:ml-0 justify-between">
<Link to="/">
<img
data-testid="logo"
className="h-12 md:h-20"
src={LOGO_URL}
alt="Logo"
/>
</Link>
</div>
<div className="hidden md:flex justify-end mr-10 w-full items-center">
<ul className="flex text-[10px] sm:text-[16px] font-semibold md:font-normal items-center space-x-2 sm:space-x-3 md:space-x-4">
<NavLink
to="/"
className={({ isActive }) =>
isActive ? "text-orange-400 " : "text-black"
}
>
<li className="hover:text-orange-400 transition-all duration-300 ease-in-out flex items-center gap-2">
<span className="hidden md:block">
<HiHome />
</span>
Home
</li>
</NavLink>
<NavLink
to="/About"
className={({ isActive }) =>
isActive ? "text-orange-400 " : "text-black"
}
>
<li className="hover:text-orange-400 transition-all duration-300 ease-in-out flex items-center gap-2">
<span className="hidden md:block">
<HiBuildingOffice />
</span>
About
</li>
</NavLink>
<NavLink
to="/Contact"
className={({ isActive }) =>
isActive ? "text-orange-400 " : "text-black"
}
>
<li className="hover:text-orange-400 transition-all duration-300 ease-in-out flex items-center gap-2">
<span className="hidden md:block">
<HiPhone />
</span>
Contact
</li>
</NavLink>
<NavLink
to="/Help"
className={({ isActive }) =>
isActive ? "text-orange-400 " : "text-black"
}
>
<li className="hover:text-orange-400 transition-all duration-300 ease-in-out flex items-center gap-2">
<span className="hidden md:block">
<FaQuestionCircle />
</span>
Help
</li>
</NavLink>
<NavLink
to="/Cart"
className={({ isActive }) =>
isActive ? "text-orange-400 " : "text-black"
}
>
<div className="relative flex items-center hover:text-orange-400 transition-all duration-300 ease-in-out sm:mr-4">
<FontAwesomeIcon
icon={faShoppingCart}
className="w-4 h-4 sm:w-5 sm:h-5"
/>
<span
className="absolute top-[-50%] right-[-20%] sm:top-[-20%] sm:right-[-32%] inline-flex items-center justify-center w-3 h-3.5 bg-orange-500 text-white rounded-full text-xs"
data-testid="cart"
>
{cartItems.length}
</span>
</div>
</NavLink>

{/* Will enable login feature once i setup google client ID */}
{isLoggedIn ? (
<button
className="text-xs font-medium shadow-md px-2 py-2 outline-none m-2 right-10 rounded border border-gray-300 hover:border-gray-500 transition-all duration-200 ease-in-out text-gray-700 cursor-pointer"
onClick={() => {
login();
}}
>
Login
</button>
) : (
<>
<button
className="text-xs font-medium shadow-md px-2 py-2 outline-none m-2 rounded border border-gray-300 hover:border-gray-500 transition-all duration-200 ease-in-out text-gray-700 cursor-pointer"
onClick={() => logout()}
>
Logout
</button>
<button
className="outline-none m-2 right-10 transition-all duration-200 ease-in-out cursor-pointer"
onClick={() => {
setisProfileOpen(!isProfileOpen);
}}
>
<img
src={userInfo.picture ? userInfo.picture : avatar}
alt="pic"
className="w-9 h-9 right-10 rounded-full"
/>
</button>
</>
)}
</ul>
</div>
</div>
<div className="mr-4 flex md:hidden">
<button
type="button"
onClick={toggleMenu}
className="inline-flex items-center justify-center p-2 rounded-md text-orange-400 hover:text-white hover:bg-orange-400 focus:outline-none focus:text-orange-400 focus:text-white transition duration-150 ease-in-out"
aria-label="Menu"
aria-expanded={isMenuOpen}
style={{ width: "32px", height: "32px" }}
>
<svg
className={`${isMenuOpen ? "hidden" : "block"} h-5 w-5`}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
<svg
className={`${isMenuOpen ? "block" : "hidden"} h-5 w-5`}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<ul className="flex text-[10px] sm:text-[16px] font-semibold md:font-normal items-center space-x-2 sm:space-x-3 md:space-x-4">
</div>
<div
className={`${
isMenuOpen ? "block" : "hidden"
} md:hidden bg-white w-full transition-all duration-300 ease-in-out`}
>
{/**mobile navlinks */}
<ul className="flex flex-col items-start space-y-2 p-4">
<NavLink
to="/"
className={({ isActive }) =>
isActive ? "text-orange-400 " : "text-black"
}
>
<li className="hover:text-orange-400 transition-all duration-300 ease-in-out flex items-center gap-2">

<span className="hidden md:block">
<HiHome />
</span>
Expand All @@ -127,7 +282,8 @@ const Header = () => {
isActive ? "text-orange-400 " : "text-black"
}
>
<li className="hover:text-orange-400 transition-all duration-300 ease-in-out flex items-center gap-2">
<li className="hover:text-orange-400 transition-all duration-300 ease-in-out flex items-center gap-2">

<span className="hidden md:block">
<HiBuildingOffice />
</span>
Expand Down Expand Up @@ -183,7 +339,7 @@ const Header = () => {
{/* Will enable login feature once i setup google client ID */}
{isLoggedIn ? (
<button
className="text-xs font-medium shadow-md px-2 py-2 outline-none m-2 right-10 rounded border border-gray-300 hover:border-gray-500 transition-all duration-200 ease-in-out text-gray-700 cursor-pointer"
className="text-xs font-medium shadow-md px-2 py-2 outline-none my-2 right-10 rounded border border-gray-300 hover:border-gray-500 transition-all duration-200 ease-in-out text-gray-700 cursor-pointer"
onClick={() => {
login();
}}
Expand All @@ -200,35 +356,53 @@ const Header = () => {
</button>
<button
className="outline-none m-2 right-10 transition-all duration-200 ease-in-out cursor-pointer"
onClick={() => {setisProfileOpen(!isProfileOpen)}}
onClick={() => {
setisProfileOpen(!isProfileOpen);
}}
>
<img src={userInfo.picture?userInfo.picture:avatar} alt="pic" className="w-9 h-9 right-10 rounded-full" />
<img
src={userInfo.picture ? userInfo.picture : avatar}
alt="pic"
className="w-9 h-9 right-10 rounded-full"
/>
</button>
</>
)}

</ul>
</div>
</div>
{isProfileOpen && !isLoggedIn? (
{isProfileOpen && !isLoggedIn ? (
<div className="flex items-center justify-center fixed h-full right-5 sm:right-20 z-20">
<div className="w-50 h-2/3 bg-white p-10 rounded shadow-lg flex flex-col justify-evenly ">
<div className="flex items-center justify-center w-full">
<img src={userInfo.picture?userInfo.picture:avatar} alt="pic" className="w-1/2 h-100 rounded-full" />
<img
src={userInfo.picture ? userInfo.picture : avatar}
alt="pic"
className="w-1/2 h-100 rounded-full"
/>
</div>
<hr />
<div className="text-0.5rem font-semibold justify-start my-5" v>Name: {userInfo.name}</div>
<div className="text-0.5rem font-semibold justify-start my-5" v>
Name: {userInfo.name}
</div>
<hr />
<div className="text-0.5rem font-semibold justify-start my-5">Email: {userInfo.email}</div>
<div className="text-blue-500 text-0.5rem justify-start my-5" onClick={() => {
logout();
login();
}}>switch account</div>
<div className="text-0.5rem font-semibold justify-start my-5">
Email: {userInfo.email}
</div>
<div
className="text-blue-500 text-0.5rem justify-start my-5"
onClick={() => {
logout();
login();
}}
>
switch account
</div>
</div>
</div>
) : (
) : (
<div></div>
)}
)}
</>
);
};
Expand Down
Loading