+
{children}
)
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 11d0070..0005bfd 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -2,6 +2,9 @@
import Image from "next/image"
import Link from "next/link"
+import React from "react"
+import { FiArrowUpRight, FiChevronDown, FiChevronRight, FiGlobe, FiMenu, FiMoon, FiUser, FiX } from "react-icons/fi"
+import { Glass } from "@/components/glass"
import {
NavigationMenu,
NavigationMenuContent,
@@ -12,137 +15,245 @@ import {
navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"
+// --- Custom Hook for Media Query ---
+function useMediaQuery(query: string): boolean {
+ const [matches, setMatches] = React.useState(false)
+
+ React.useEffect(() => {
+ const media = window.matchMedia(query)
+ if (media.matches !== matches) {
+ setMatches(media.matches)
+ }
+ const listener = () => setMatches(media.matches)
+ media.addEventListener("change", listener)
+ return () => media.removeEventListener("change", listener)
+ }, [matches, query])
+
+ return matches
+}
+
+// --- Navigation Menu Data ---
const components: {
title: string
href?: string
- menu: { title: string; href: string }[] | null
+ menu: { title: string; href: string; icon: React.ElementType }[] | null
}[] = [
{
title: "Resources",
menu: [
- {
- title: "Materials",
- href: "#",
- },
- {
- title: "Guides",
- href: "#",
- },
- {
- title: "Computer Recs",
- href: "#",
- },
- {
- title: "FAQs",
- href: "#",
- },
- {
- title: "Rankings",
- href: "#",
- },
- {
- title: "Tol Project",
- href: "#",
- },
+ { title: "Materials", href: "#", icon: FiChevronRight },
+ { title: "Guides", href: "#", icon: FiChevronRight },
+ { title: "Computer Recs", href: "#", icon: FiChevronRight },
+ { title: "FAQs", href: "#", icon: FiChevronRight },
+ { title: "Rankings", href: "#", icon: FiArrowUpRight },
+ { title: "Tol Project", href: "#", icon: FiArrowUpRight },
],
},
{
title: "Community",
menu: [
- {
- title: "Groups",
- href: "#",
- },
- {
- title: "Projects",
- href: "#",
- },
- {
- title: "Freshman",
- href: "#",
- },
- {
- title: "Associations",
- href: "#",
- },
+ { title: "Groups", href: "#", icon: FiChevronRight },
+ { title: "Projects", href: "#", icon: FiChevronRight },
+ { title: "Freshman", href: "#", icon: FiChevronRight },
+ { title: "Associations", href: "#", icon: FiChevronRight },
],
},
{
title: "About",
menu: [
- {
- title: "About us",
- href: "#",
- },
- {
- title: "Join us",
- href: "#",
- },
- {
- title: "Contact us",
- href: "#",
- },
+ { title: "About us", href: "#", icon: FiChevronRight },
+ { title: "Join us", href: "#", icon: FiChevronRight },
+ { title: "Contact us", href: "#", icon: FiChevronRight },
],
},
]
-export const HEADER_HEIGHT = "4.5rem"
+// --- Icon Button Handlers ---
+function handleUserIconClick() {
+ console.log("User icon clicked")
+}
+
+function handleGlobeIconClick() {
+ console.log("Globe icon clicked")
+}
+
+function handleMoonIconClick() {
+ console.log("Moon icon clicked")
+}
+
+// --- PoliNetwork Logo ---
+const Logo = () => (
+
+
+
PoliNetwork
+
+)
+
+const IconButtonsMobile = () => (
+ <>
+
+
+
+
+
+
+
+
+
+
+)
+
+const IconButtonsDesktop = ({ removeHoverClass }: { removeHoverClass: string }) => (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+)
+
+// --- Mobile Layout ---
+const MobileLayout = () => {
+ const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false)
-export function Header() {
return (
-
-
- {/* Disable hover effect on the logo */}
-
-
-
-
-
PoliNetwork
-
-
-
- {components.map((component) => (
-
- {component.menu ? (
- <>
-
+
+
+
+
+
+
+ {mobileMenuOpen && (
+
+ )}
+
)
}
-function ListItem({ title, href, ...props }: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
+// --- Desktop Layout ---
+const DesktopLayout = () => {
+ const removeDefaultHoverEffectClass = "hover:bg-transparent! focus:bg-transparent! bg-transparent!"
+ const customHoverEffectClass = "hover:underline focus:underline decoration-1 decoration-blue-secondary "
+
return (
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ {components.map((component) => (
+
+ {component.menu ? (
+ <>
+
+
+ {component.title}
+
+
+
+
+
+
+ {component.menu.map((item) => {
+ const Icon = item.icon
+ return (
+
+
+
+ {item.title}
+
+
+
+
+ )
+ })}
+
+
+
+
+ ) : (
+
+
+ {component.title}
+
+
+ )}
+
+ ))}
+
+
+
+
+
+
+
)
}
+
+// --- Main Header Component ---
+export function Header() {
+ const isMobile = useMediaQuery("(max-width: 768px)") // TODO: Adjust breakpoint
+
+ return isMobile ? :
+}
+
+export const HEADER_HEIGHT = "4.5rem"
From ef4ca0efa71f1a61fbe2b0fe63cfaea21d8ceed2 Mon Sep 17 00:00:00 2001
From: Ita_simo <118686320+Itasimo@users.noreply.github.com>
Date: Thu, 2 Apr 2026 17:59:06 +0200
Subject: [PATCH 4/7] fix: refactor header component for improved
responsiveness and layout consistency
---
src/components/glass.tsx | 2 +-
src/components/header.tsx | 48 ++++++++++++++++-----------
src/components/ui/navigation-menu.tsx | 10 +++---
3 files changed, 34 insertions(+), 26 deletions(-)
diff --git a/src/components/glass.tsx b/src/components/glass.tsx
index d338d4d..6be30a1 100644
--- a/src/components/glass.tsx
+++ b/src/components/glass.tsx
@@ -6,7 +6,7 @@ export function Glass({ children, ...props }: GlassProps) {
return (
{children}
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 0005bfd..2aa513b 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -21,13 +21,11 @@ function useMediaQuery(query: string): boolean {
React.useEffect(() => {
const media = window.matchMedia(query)
- if (media.matches !== matches) {
- setMatches(media.matches)
- }
+ setMatches(media.matches)
const listener = () => setMatches(media.matches)
media.addEventListener("change", listener)
return () => media.removeEventListener("change", listener)
- }, [matches, query])
+ }, [query])
return matches
}
@@ -83,9 +81,9 @@ function handleMoonIconClick() {
// --- PoliNetwork Logo ---
const Logo = () => (
-
+
- PoliNetwork
+ PoliNetwork
)
@@ -128,8 +126,8 @@ const MobileLayout = () => {
const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false)
return (
-
-
+
+