DesktopMenu

Code

"use client"

import { CaretDown, Heart, MagnifyingGlass } from "@phosphor-icons/react"
import * as DropdownMenu from "@radix-ui/react-dropdown-menu"

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"

const DesktopMenu = () => (
	<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>
)

export default DesktopMenu