cdricms/latosa-escrima
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added backdrop on nav

Browse Source
This commit is contained in:
cdricms
2025-02-13 10:42:44 +01:00
parent 2fa6e0b21d
commit c62fbcf85c
2 changed files with 42 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/components/nav-bar.css Normal file
View File

@@ -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);
}
}

141
frontend/components/nav-bar.tsx
View File

@@ -1,14 +1,8 @@
"use client"; "use client";
import { Book, Menu, Sunset, Trees, Zap } from "lucide-react"; import { Menu } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { Button, buttonVariants } from "@/components/ui/button"; import { Button, buttonVariants } from "@/components/ui/button";
import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"; import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
import { import {
@@ -22,53 +16,27 @@ import Link from "next/link";
import { deleteCookie, getCookie } from "cookies-next"; import { deleteCookie, getCookie } from "cookies-next";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { ThemeSwitcher } from "./theme-switcher"; import { ThemeSwitcher } from "./theme-switcher";
import "./nav-bar.css";
const subMenuItemsOne = [ const Href: React.FC<React.PropsWithChildren<{ href: string }>> = ({
{ href,
title: "Blog", children,
description: "The latest industry news, updates, and info", }) => {
icon: <Book className="size-5 shrink-0" />, return (
}, <Link
{ className={cn(
title: "Compnay", "text-foreground font-bold",
description: "Our mission is to innovate and empower the world", navigationMenuTriggerStyle,
icon: <Trees className="size-5 shrink-0" />, buttonVariants({
}, variant: "ghost",
{ }),
title: "Careers", )}
description: "Browse job listing and discover our workspace", href={href}
icon: <Sunset className="size-5 shrink-0" />, >
}, {children}
{ </Link>
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 Navbar = () => { const Navbar = () => {
const [cookie, setCookie] = useState<string | null>(null); const [cookie, setCookie] = useState<string | null>(null);
@@ -77,7 +45,7 @@ const Navbar = () => {
setCookie(_cookie?.toString() ?? null); setCookie(_cookie?.toString() ?? null);
}, []); }, []);
return ( 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> <div>
<nav className="hidden justify-between lg:flex"> <nav className="hidden justify-between lg:flex">
<div className="flex items-center gap-6"> <div className="flex items-center gap-6">
@@ -92,66 +60,11 @@ const Navbar = () => {
</span> </span>
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<Link <Href href="/">Accueil</Href>
className={cn( <Href href="/planning">Planning</Href>
"text-muted-foreground", <Href href="/about">À propos</Href>
navigationMenuTriggerStyle, <Href href="/gallery">Gallerie</Href>
buttonVariants({ <Href href="/blogs">Blog</Href>
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>
</div> </div>
</div> </div>
<div className="flex gap-2 animate-in ease-in-out"> <div className="flex gap-2 animate-in ease-in-out">