From a54b5c8e82c9d56c1673345d7211f1962c6a453b Mon Sep 17 00:00:00 2001 From: sarans-h Date: Tue, 7 Oct 2025 20:39:17 +0530 Subject: [PATCH 1/2] Refactor GitHub link handling in Header component for improved structure and mobile responsiveness --- src/components/Header/Header.jsx | 96 +++++++++++++++++++------------- 1 file changed, 58 insertions(+), 38 deletions(-) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index c320cd1..814d31b 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -46,14 +46,15 @@ function Header({notice }) { link: "/resources", icon: , }, - { - name: "Github", - link: "https://github.com/devvsakib/github-error-solve", - icon: , - isExternalURL: true, - }, ]; + const githubLink = { + name: "Github", + link: "https://github.com/devvsakib/github-error-solve", + icon: , + isExternalURL: true, + }; + return (
@@ -66,12 +67,32 @@ function Header({notice }) { /> - {/* Menu icon */} -
setOpen((val) => !val)} - className="cursor-pointer md:hidden" - > - {open ? : } + {/* GitHub, theme toggle and menu icon for mobile */} +
+ +
+ + {githubLink.icon} + + { + countStar && ( +
+ {countStar} +
+ ) + } +
+ +
+ + +
+
setOpen((val) => !val)} + className="cursor-pointer" + > + {open ? : } +
{/* Nav link items */} @@ -88,34 +109,33 @@ function Header({notice }) { ${open ? (theme === "dark" ? "bg-dark/90" : "bg-white/90") : ""} ${open ? "top-14" : "top-[-490px]"}`} > - {navLink.map((link, index) => { - return ( -
- {link?.isExternalURL ? ( - -
- - {link.icon} - - { - countStar && ( -
- {countStar} -
- ) - } + {navLink.map((link, index) => ( +
+ + {/* {link.icon} */} + {link.name} + +
+ ))} + {/* GitHub link for desktop */} +
+ +
+ + {githubLink.icon} + + { + countStar && ( +
+ {countStar}
- - ) : ( - - {/* {link.icon} */} - {link.name} - - )} + ) + }
- ); - })} -
+ +
+ {/* Theme toggle for desktop */} +
From ffea29580970a22a04b3773ce3ae27e876dc0860 Mon Sep 17 00:00:00 2001 From: sarans-h Date: Wed, 8 Oct 2025 23:47:52 +0530 Subject: [PATCH 2/2] Enhance Header component with mobile menu functionality and dynamic styles; update Layout component for consistent spacing --- src/components/Header/Header.jsx | 84 ++++++++++++++++++++------------ src/components/Layout/Layout.jsx | 2 +- 2 files changed, 55 insertions(+), 31 deletions(-) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 814d31b..5aa76f8 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -25,6 +25,18 @@ function Header({notice }) { .catch((error) => console.error("Error fetching GitHub stars:", error)); }, []); + // Handle window resize to close mobile menu when switching to desktop + useEffect(() => { + const handleResize = () => { + if (window.innerWidth >= 768 && open) { // 768px is md breakpoint + setOpen(false); + } + }; + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, [open]); + const navLink = [ { name: "Home", @@ -55,9 +67,30 @@ function Header({notice }) { isExternalURL: true, }; + // Dynamic styles for cleaner code + const mobileMenuClasses = ` + md:flex md:items-center md:gap-6 md:static md:opacity-100 md:visible md:bg-transparent md:flex-row md:justify-end md:h-auto md:w-auto + ${open ? + 'fixed inset-0 w-full h-screen flex flex-col items-center justify-center gap-8 z-40 backdrop-blur-md opacity-100 visible' : + 'fixed inset-0 w-full h-screen flex flex-col items-center justify-center gap-8 z-40 opacity-0 invisible pointer-events-none' + } + transition-opacity duration-500 ease-in-out + md:pointer-events-auto md:relative md:inset-auto + `; + + const mobileMenuStyle = { + backgroundColor: open ? (theme === "dark" ? "rgba(2, 0, 14, 0.95)" : "rgba(209, 203, 244, 0.95)") : "transparent", + backgroundImage: open ? (theme === "dark" + ? "radial-gradient(rgba(133, 138, 227, 0.1) 2px, transparent 0)" + : "radial-gradient(rgba(25, 25, 31, 0.1) 2px, transparent 0)" + ) : "none", + backgroundSize: "30px 30px", + backgroundPosition: "-5px -5px" + }; + return ( -
-
+
+
{/* Logo */} {/* GitHub, theme toggle and menu icon for mobile */} -