"use client"; import * as React from "react"; import Link from "next/link"; import { Button } from "@/components/ui/button"; import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, } from "@/components/ui/navigation-menu"; import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, } from "@/components/ui/sheet"; import { Code, Book, PieChart, DollarSign, Fingerprint, Bell, Menu, X, } from "lucide-react"; import { cn } from "@/lib/utils"; import { ChevronDown } from "lucide-react"; const features = [ { icon: Code, title: "Open source", description: "This Pokemon's cry is very loud and distracting", }, { icon: DollarSign, title: "Free for everyone", description: "The fluid of Smeargle's tail secretions changes", }, { icon: Book, title: "Documentation", description: "Yanma is capable of seeing 360 degrees without", }, { icon: Fingerprint, title: "Security", description: "The shell's rounded shape and the grooves on its", }, { icon: PieChart, title: "Analytics", description: "This Pokémon uses its flying ability to quickly chase", }, { icon: Bell, title: "Notifications", description: "Combusken battles with the intensely hot flames it spews", }, ]; export default function MantineHeader() { const [open, setOpen] = React.useState(false); const [showFeatures, setShowFeatures] = React.useState(false); return (

Mantine Home Features

Features

View all

{features.map((feature, index) => (

{feature.title}

{feature.description}

))}

Get started

Their food sources have decreased, and their numbers

Learn Academy

Navigation

setOpen(false)} > Home {showFeatures && (

{features.map((feature, index) => ( setOpen(false)} >

{feature.title}

{feature.description}

))}

)} setOpen(false)} > Learn setOpen(false)} > Academy

); }

Site Headers(3)

Simple Header without Simple Menu

Mantine Header with Mega Menu

Vercel Fixed Header with Mega Menu