MobileMenu

Code

"use client"

import { Heart } from "@phosphor-icons/react"
import { useState } from "react"

const MobileMenu = () => {
	const [isOpen, setIsOpen] = useState(true)

	return (
		<div className="bg-white">
			<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">
										<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="">
										<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>
	)
}

export default MobileMenu