From a522f27bef94e1acf969410daa54eddd86647ce7 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Thu, 17 Apr 2025 10:29:05 +0200
Subject: [PATCH] Fix header styling

---
 web/src/components/header.tsx | 128 +++++++++++++---------------------
 1 file changed, 48 insertions(+), 80 deletions(-)

diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx
index f190f2fb..13b1ca96 100644
--- a/web/src/components/header.tsx
+++ b/web/src/components/header.tsx
@@ -1,44 +1,49 @@
-"use client"
+"use client";
 
-import { IconSubmissionForm } from "@/components/icon-submission-form"
-import { ThemeSwitcher } from "@/components/theme-switcher"
-import { REPO_PATH } from "@/constants"
-import { getIconsArray } from "@/lib/api"
-import type { IconWithName } from "@/types/icons"
-import { motion } from "framer-motion"
-import { Github, Menu, Search } from "lucide-react"
-import Link from "next/link"
-import { useEffect, useState } from "react"
-import { CommandMenu } from "./command-menu"
-import { HeaderNav } from "./header-nav"
-import { Button } from "./ui/button"
-import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"
+import { IconSubmissionForm } from "@/components/icon-submission-form";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { REPO_PATH } from "@/constants";
+import { getIconsArray } from "@/lib/api";
+import type { IconWithName } from "@/types/icons";
+import { motion } from "framer-motion";
+import { Github, Menu, Search } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { CommandMenu } from "./command-menu";
+import { HeaderNav } from "./header-nav";
+import { Button } from "./ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "./ui/tooltip";
 
 export function Header() {
-	const [iconsData, setIconsData] = useState<IconWithName[]>([])
-	const [isLoaded, setIsLoaded] = useState(false)
-	const [commandMenuOpen, setCommandMenuOpen] = useState(false)
+	const [iconsData, setIconsData] = useState<IconWithName[]>([]);
+	const [isLoaded, setIsLoaded] = useState(false);
+	const [commandMenuOpen, setCommandMenuOpen] = useState(false);
 
 	useEffect(() => {
 		async function loadIcons() {
 			try {
-				const icons = await getIconsArray()
-				setIconsData(icons)
-				setIsLoaded(true)
+				const icons = await getIconsArray();
+				setIconsData(icons);
+				setIsLoaded(true);
 			} catch (error) {
-				console.error("Failed to load icons:", error)
-				setIsLoaded(true)
+				console.error("Failed to load icons:", error);
+				setIsLoaded(true);
 			}
 		}
 
-		loadIcons()
-	}, [])
+		loadIcons();
+	}, []);
 
 	// Function to open the command menu
 	const openCommandMenu = () => {
-		setCommandMenuOpen(true)
-	}
+		setCommandMenuOpen(true);
+	};
 
 	return (
 		<motion.header
@@ -49,10 +54,15 @@ export function Header() {
 		>
 			<div className="px-4 md:px-12 flex items-center justify-between h-16 md:h-18">
 				<div className="flex items-center gap-2 md:gap-6">
-					<Link href="/" className="text-lg md:text-xl font-bold group">
-						<span className="transition-colors duration-300 group-hover:text-rose-500">Dashboard Icons</span>
+					<Link
+						href="/"
+						className="text-lg md:text-xl font-bold group hidden md:block"
+					>
+						<span className="transition-colors duration-300 group-hover:text-rose-500">
+							Dashboard Icons
+						</span>
 					</Link>
-					<div className="hidden md:block">
+					<div className="flex-nowrap">
 						<HeaderNav />
 					</div>
 				</div>
@@ -109,59 +119,17 @@ export function Header() {
 						</TooltipProvider>
 					</div>
 					<ThemeSwitcher />
-
-					{/* Mobile menu */}
-					<div className="md:hidden">
-						<Sheet>
-							<SheetTrigger asChild>
-								<Button
-									variant="ghost"
-									size="icon"
-									className="h-10 w-10 rounded-full cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 transition-all duration-300 focus:ring-2 focus:ring-rose-500/20"
-								>
-									<Menu className="h-5 w-5 transition-all duration-300" />
-									<span className="sr-only">Toggle menu</span>
-								</Button>
-							</SheetTrigger>
-							<SheetContent side="right" className="w-[280px] sm:w-[320px] p-0">
-								<div className="flex flex-col h-full py-6">
-									<div className="px-6 mb-6">
-										<h2 className="text-xl font-bold text-rose-500">Dashboard Icons</h2>
-									</div>
-
-									<div className="flex-1 overflow-auto px-6">
-										<nav className="space-y-6">
-											<HeaderNav />
-											<div className="border-t pt-6" />
-											<Button
-												variant="outline"
-												size="sm"
-												className="text-sm h-8 rounded-md cursor-pointer flex items-center gap-2 bg-background border-border hover:bg-rose-500/10 hover:text-rose-500 w-full justify-start transition-all duration-300"
-												onClick={openCommandMenu}
-											>
-												<Search className="h-3.5 w-3.5 transition-all duration-300" />
-												<span>Find and filter icons</span>
-											</Button>
-											<IconSubmissionForm />
-											<Link
-												href={REPO_PATH}
-												target="_blank"
-												className="flex items-center gap-2 text-sm font-medium text-rose-500 hover:text-rose-600 transition-all duration-300 cursor-pointer p-2 hover:bg-rose-500/5 rounded-md"
-											>
-												<Github className="h-4 w-4 transition-all duration-300" />
-												GitHub Repository
-											</Link>
-										</nav>
-									</div>
-								</div>
-							</SheetContent>
-						</Sheet>
-					</div>
 				</div>
 			</div>
 
 			{/* Single instance of CommandMenu */}
-			{isLoaded && <CommandMenu icons={iconsData} open={commandMenuOpen} onOpenChange={setCommandMenuOpen} />}
+			{isLoaded && (
+				<CommandMenu
+					icons={iconsData}
+					open={commandMenuOpen}
+					onOpenChange={setCommandMenuOpen}
+				/>
+			)}
 		</motion.header>
-	)
+	);
 }