NavigationHeader
Header for the navigation
Code
import { useState } from "react"
import { CaretDown, Heart, MagnifyingGlass } from "@phosphor-icons/react"
import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
const NavigationHeader = () => {
const [isOpen, setIsOpen] = useState(false)
const DropdownMenuItemClass = "group text-[14px] leading-none rounded-[3px] flex items-center min-h-[25px] p-[12px] relative pl-[25px] select-none outline-none cursor-pointer"
return (
<div>
<div className="bg-white lg:hidden">
<div className={isOpen ? "block relative z-50" : "hidden relative z-40"} role="dialog" aria-modal="true">
<div className="fixed inset-0 bg-black bg-opacity-25"></div>
<div className="fixed inset-0 z-40 flex">
<div className="relative flex w-full max-w-xs flex-col overflow-y-auto bg-white pb-12 shadow-xl">
<div className="flex px-4 pb-2 pt-5">
<button type="button" className="-m-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400" onClick={() => setIsOpen(false)}>
<span className="sr-only">Close menu</span>
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div className="mt-2">
<div id="tabs-1-panel-1" className="space-y-12 px-4 pb-6 pt-10" aria-labelledby="tabs-1-tab-1" role="tabpanel" tab-index="0">
<div className="grid grid-cols-1 items-start gap-x-6 gap-y-10">
<div className="grid grid-cols-1 gap-x-6 gap-y-10">
<div>
<p id="mobile-featured-heading-0" className="font-medium text-gray-900">
Featured
</p>
<ul role="list" aria-labelledby="mobile-featured-heading-0" className="mt-6 space-y-6">
<li className="flex">
<a href="#" className="text-gray-500">
Spaces
</a>
</li>
<li className="flex">
<a href="/" className="text-gray-500">
Products
</a>
</li>
<li className="flex">
<a href="#" className="text-gray-500">
About
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<header className="relative z-40">
<nav aria-label="Top">
<div className="bg-white">
<div className="border-b border-gray-200">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="flex h-16 items-center justify-between">
<div className="flex flex-1 items-center lg:hidden">
<button type="button" className="-ml-2 rounded-md bg-white p-2 text-gray-400" onClick={() => setIsOpen(true)}>
<span className="sr-only">Open menu</span>
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
<a href="#" className="ml-2 p-2 text-gray-400 hover:text-gray-500">
<span className="sr-only">Search</span>
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
/>
</svg>
</a>
</div>
<a href="#" className="lg:hidden">
<span className="sr-only">Core</span>
<img src="https://a.storyblok.com/f/222232/289x320/09d8a4562e/core-logo.svg" alt="Logo" className="h-8 w-auto" />
</a>
<div className="flex flex-1 items-center justify-end">
<div className="flex items-center lg:ml-8">
<div className="flex items-center space-x-8">
<div className="flex">
<a href="/account" className="-m-2 p-2 text-gray-400 hover:text-gray-500">
<span className="sr-only">Account</span>
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
/>
</svg>
</a>
</div>
<div className="flex">
<a href="/wishlist" className="-m-2 p-2 text-gray-400 hover:text-gray-500">
<span className="sr-only">Wishlist</span>
<Heart size={23} />
</a>
</div>
</div>
<span className="mx-4 h-6 w-px bg-gray-200 lg:mx-6" aria-hidden="true"></span>
<div className="flow-root">
<a href="#" className="group -m-2 flex items-center p-2">
<svg
className="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
/>
</svg>
<span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
<span className="sr-only">items in cart, view bag</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
</div>
<header className="relative z-40 hidden lg:block">
<nav aria-label="Top">
<div className="bg-white">
<div className="border-b border-gray-200">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="flex h-16 items-center justify-between">
<div className="hidden lg:flex lg:items-center">
<a className="flex" href="/">
<span className="sr-only">Your Company</span>
<img width="20px" src="https://a.storyblok.com/f/222232/289x320/09d8a4562e/core-logo.svg" alt="Logo" />
<span className="font-bold ml-2">Core</span>
</a>
</div>
<div className="hidden h-full lg:flex">
<div className="ml-8">
<div className="flex h-full justify-center space-x-8">
<div className="flex">
<div className="relative flex">
<a href="#" className="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">
Spaces
</a>
</div>
</div>
<div className="flex">
<div className="relative flex">
<DropdownMenu.Root>
<DropdownMenu.Trigger className="outline-none cursor-pointer">
<div className="flex items-center outline-none">
<span className="pr-1 text-sm">Products</span>
<CaretDown size={14} weight="bold" />
</div>
</DropdownMenu.Trigger>
<DropdownMenu.Content className="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
<DropdownMenu.Item className={DropdownMenuItemClass}>Analytics</DropdownMenu.Item>
<DropdownMenu.Item className={DropdownMenuItemClass}>Engagement</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item className={DropdownMenuItemClass}>Security</DropdownMenu.Item>
<DropdownMenu.Item className={DropdownMenuItemClass}>Move to project</DropdownMenu.Item>
<DropdownMenu.Item className={DropdownMenuItemClass}>Move to folder</DropdownMenu.Item>
<DropdownMenu.Item className={DropdownMenuItemClass}>Advanced options</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
</div>
<div className="flex">
<div className="relative flex">
<a href="#" className="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">
About
</a>
</div>
</div>
</div>
</div>
</div>
<div className="flex flex-1 items-center justify-end">
<div className="flex items-center lg:ml-8">
<div className="flex items-center space-x-8">
<div className="hidden lg:flex">
<div className="relative flex">
<input
type="text"
name="searchTerm"
className="flex w-full rounded-sm border border-gray-300 py-2 px-4 focus:outline-none"
placeholder="Search"
/>
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center py-2 pr-4">
<MagnifyingGlass color="#9ca3af" size={20} />
</div>
</div>
</div>
<div className="flex">
<a href="/account" className="-m-2 p-2 text-gray-400 hover:text-gray-500">
<span className="sr-only">Account</span>
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
/>
</svg>
</a>
</div>
<div className="flex">
<a href="/wishlist" className="-m-2 p-2 text-gray-400 hover:text-gray-500">
<span className="sr-only">Wishlist</span>
<Heart size={23} />
</a>
</div>
</div>
<span className="mx-4 h-6 w-px bg-gray-200 lg:mx-6" aria-hidden="true"></span>
<div className="flow-root">
<a href="#" className="group -m-2 flex items-center p-2">
<svg
className="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
/>
</svg>
<span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
<span className="sr-only">items in cart, view bag</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
</div>
)
}
export default NavigationHeader