From c62fbcf85c82b93a400dadc4448a69ba1171657e Mon Sep 17 00:00:00 2001
From: cdricms <36056008+cdricms@users.noreply.github.com>
Date: Thu, 13 Feb 2025 10:42:44 +0100
Subject: [PATCH] Added backdrop on nav

---
 frontend/components/nav-bar.css |  15 ++++
 frontend/components/nav-bar.tsx | 141 ++++++--------------------------
 2 files changed, 42 insertions(+), 114 deletions(-)
 create mode 100644 frontend/components/nav-bar.css

diff --git a/frontend/components/nav-bar.css b/frontend/components/nav-bar.css
new file mode 100644
index 0000000..4883708
--- /dev/null
+++ b/frontend/components/nav-bar.css
@@ -0,0 +1,15 @@
+.animate-header-slide-down-fade {
+	animation: header-slide-down-fade 1s ease-in-out;
+}
+
+@keyframes header-slide-down-fade {
+	0% {
+		opacity: 0;
+		transform: translateY(-16px);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
diff --git a/frontend/components/nav-bar.tsx b/frontend/components/nav-bar.tsx
index cd12f56..db463c3 100644
--- a/frontend/components/nav-bar.tsx
+++ b/frontend/components/nav-bar.tsx
@@ -1,14 +1,8 @@
 "use client";
-import { Book, Menu, Sunset, Trees, Zap } from "lucide-react";
+import { Menu } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-} from "@/components/ui/accordion";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
 import {
@@ -22,53 +16,27 @@ import Link from "next/link";
 import { deleteCookie, getCookie } from "cookies-next";
 import { useEffect, useState } from "react";
 import { ThemeSwitcher } from "./theme-switcher";
+import "./nav-bar.css";
 
-const subMenuItemsOne = [
-	{
-		title: "Blog",
-		description: "The latest industry news, updates, and info",
-		icon: <Book className="size-5 shrink-0" />,
-	},
-	{
-		title: "Compnay",
-		description: "Our mission is to innovate and empower the world",
-		icon: <Trees className="size-5 shrink-0" />,
-	},
-	{
-		title: "Careers",
-		description: "Browse job listing and discover our workspace",
-		icon: <Sunset className="size-5 shrink-0" />,
-	},
-	{
-		title: "Support",
-		description:
-			"Get in touch with our support team or visit our community forums",
-		icon: <Zap className="size-5 shrink-0" />,
-	},
-];
-
-const subMenuItemsTwo = [
-	{
-		title: "Help Center",
-		description: "Get all the answers you need right here",
-		icon: <Zap className="size-5 shrink-0" />,
-	},
-	{
-		title: "Contact Us",
-		description: "We are here to help you with any questions you have",
-		icon: <Sunset className="size-5 shrink-0" />,
-	},
-	{
-		title: "Status",
-		description: "Check the current status of our services and APIs",
-		icon: <Trees className="size-5 shrink-0" />,
-	},
-	{
-		title: "Terms of Service",
-		description: "Our terms and conditions for using our services",
-		icon: <Book className="size-5 shrink-0" />,
-	},
-];
+const Href: React.FC<React.PropsWithChildren<{ href: string }>> = ({
+	href,
+	children,
+}) => {
+	return (
+		<Link
+			className={cn(
+				"text-foreground font-bold",
+				navigationMenuTriggerStyle,
+				buttonVariants({
+					variant: "ghost",
+				}),
+			)}
+			href={href}
+		>
+			{children}
+		</Link>
+	);
+};
 
 const Navbar = () => {
 	const [cookie, setCookie] = useState<string | null>(null);
@@ -77,7 +45,7 @@ const Navbar = () => {
 		setCookie(_cookie?.toString() ?? null);
 	}, []);
 	return (
-		<section className="sticky top-0 z-50 bg-background p-4">
+		<section className="sticky top-0 z-50 bg-background/50 border-b border-b-white/10 backdrop-blur-md p-4 transition duration-200 ease-in-out animate-header-slide-down-fade">
 			<div>
 				<nav className="hidden justify-between lg:flex">
 					<div className="flex items-center gap-6">
@@ -92,66 +60,11 @@ const Navbar = () => {
 							</span>
 						</div>
 						<div className="flex items-center">
-							<Link
-								className={cn(
-									"text-muted-foreground",
-									navigationMenuTriggerStyle,
-									buttonVariants({
-										variant: "ghost",
-									}),
-								)}
-								href="/"
-							>
-								Accueil
-							</Link>
-							<a
-								className={cn(
-									"text-muted-foreground",
-									navigationMenuTriggerStyle,
-									buttonVariants({
-										variant: "ghost",
-									}),
-								)}
-								href="/planning"
-							>
-								Planning
-							</a>
-							<a
-								className={cn(
-									"text-muted-foreground",
-									navigationMenuTriggerStyle,
-									buttonVariants({
-										variant: "ghost",
-									}),
-								)}
-								href="/about"
-							>
-								A propos
-							</a>
-							<a
-								className={cn(
-									"text-muted-foreground",
-									navigationMenuTriggerStyle,
-									buttonVariants({
-										variant: "ghost",
-									}),
-								)}
-								href="/gallery"
-							>
-								Gallerie
-							</a>
-							<a
-								className={cn(
-									"text-muted-foreground",
-									navigationMenuTriggerStyle,
-									buttonVariants({
-										variant: "ghost",
-									}),
-								)}
-								href="/blogs"
-							>
-								Blog
-							</a>
+							<Href href="/">Accueil</Href>
+							<Href href="/planning">Planning</Href>
+							<Href href="/about">À propos</Href>
+							<Href href="/gallery">Gallerie</Href>
+							<Href href="/blogs">Blog</Href>
 						</div>
 					</div>
 					<div className="flex gap-2 animate-in ease-in-out">