232 lines
No EOL
14 KiB
PHP
232 lines
No EOL
14 KiB
PHP
<!--
|
|
Mobile menu
|
|
|
|
Off-canvas menu for mobile, show/hide based on off-canvas menu state.
|
|
-->
|
|
<div class="relative z-40 lg:hidden" role="dialog" aria-modal="true" x-show="mobileMenuOpen" x-cloak>
|
|
<!--
|
|
Off-canvas menu backdrop, show/hide based on off-canvas menu state.
|
|
|
|
Entering: "transition-opacity ease-linear duration-300"
|
|
From: "opacity-0"
|
|
To: "opacity-100"
|
|
Leaving: "transition-opacity ease-linear duration-300"
|
|
From: "opacity-100"
|
|
To: "opacity-0"
|
|
-->
|
|
<div class="fixed inset-0 bg-black/50" aria-hidden="true"
|
|
x-show="mobileMenuOpen"
|
|
@click.stop="mobileMenuOpen = false"
|
|
x-transition:enter="transition-opacity ease-linear duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition-opacity ease-linear duration-300"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"></div>
|
|
|
|
<div class="fixed inset-0 z-40 flex" x-show="mobileMenuOpen" @mousedown.away="mobileMenuOpen = false">
|
|
<!--
|
|
Off-canvas menu, show/hide based on off-canvas menu state.
|
|
|
|
Entering: "transition ease-in-out duration-300 transform"
|
|
From: "-translate-x-full"
|
|
To: "translate-x-0"
|
|
Leaving: "transition ease-in-out duration-300 transform"
|
|
From: "translate-x-0"
|
|
To: "-translate-x-full"
|
|
-->
|
|
<div class="relative flex w-full max-w-xs flex-col overflow-y-auto bg-white pb-12 shadow-xl"
|
|
x-show="mobileMenuOpen"
|
|
@click.away="mobileMenuOpen = false"
|
|
x-transition:enter="transition ease-in-out duration-300 transform"
|
|
x-transition:enter-start="-translate-x-full"
|
|
x-transition:enter-end="translate-x-0"
|
|
x-transition:leave="transition ease-in-out duration-300 transform"
|
|
x-transition:leave-start="translate-x-0"
|
|
x-transition:leave-end="-translate-x-full">
|
|
<div class="flex px-4 pt-5 pb-2">
|
|
<button type="button" class="-m-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400 pointer-events-auto cursor-pointer" @click="mobileMenuOpen = false">
|
|
<span class="sr-only">Close menu</span>
|
|
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Links -->
|
|
<div class="space-y-6 border-t border-gray-200 px-4 py-4">
|
|
<div class="flow-root">
|
|
<a href="#" class="-m-2 block p-3 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-100 rounded-md">Start</a>
|
|
</div>
|
|
<div class="flow-root">
|
|
<a href="#" class="-m-2 block p-3 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-100 rounded-md">About</a>
|
|
</div>
|
|
<div class="flow-root">
|
|
<a href="#" class="-m-2 block p-3 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-100 rounded-md">Company</a>
|
|
</div>
|
|
<div class="flow-root">
|
|
<a href="#" class="-m-2 block p-3 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-100 rounded-md">Stores</a>
|
|
</div>
|
|
<div class="flow-root">
|
|
<a href="#" class="-m-2 block p-3 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-100 rounded-md">Contact</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6 border-t border-gray-200 px-4 py-6">
|
|
<div class="flow-root">
|
|
<a href="#" class="-m-2 block p-2 font-semibold text-white rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create an account</a>
|
|
</div>
|
|
<div class="flow-root">
|
|
<a href="{{ config('domains.domain_admin_url') }}/login" class="-m-2 block p-2 font-semibold text-white rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign in</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6 border-t border-gray-200 px-4 py-6">
|
|
<!-- Currency selector -->
|
|
<form>
|
|
<div class="-ml-2 inline-grid grid-cols-1">
|
|
<div class="flex items-center">
|
|
<svg class="size-6 text-gray-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<select id="mobile-currency" name="currency" aria-label="Currency" class="w-full appearance-none rounded-md bg-white py-0.5 pr-7 pl-2 text-base font-medium text-gray-700 group-hover:text-gray-800 focus:outline-2 sm:text-sm/6">
|
|
<option>DE</option>
|
|
<option>EN</option>
|
|
</select>
|
|
<svg class="pointer-events-none -ml-6 size-5 fill-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
|
|
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<header class="relative z-10">
|
|
<nav aria-label="Top">
|
|
<!-- Top navigation -->
|
|
<div class="bg-gray-900">
|
|
<div class="mx-auto flex h-10 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
|
|
<!-- Currency selector -->
|
|
<form class="hidden lg:block lg:flex-1">
|
|
<div class="-ml-2 inline-grid grid-cols-1">
|
|
<div class="flex items-center">
|
|
<svg class="size-6 text-gray-300 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<select id="desktop-currency" name="currency" aria-label="Currency" class="w-full appearance-none rounded-md bg-gray-900 py-0.5 pr-7 pl-2 text-left text-base font-medium text-white focus:outline-2 focus:-outline-offset-1 focus:outline-white sm:text-sm/6">
|
|
<option>DE</option>
|
|
<option>EN</option>
|
|
</select>
|
|
<svg class="pointer-events-none -ml-6 size-5 fill-gray-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
|
|
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<p class="flex-1 text-center text-sm font-medium text-white lg:flex-none">Get free delivery on orders over $100</p>
|
|
|
|
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
|
|
<a href="#" class="text-sm font-medium text-white hover:text-gray-100">Create an account</a>
|
|
<span class="h-6 w-px bg-gray-600" aria-hidden="true"></span>
|
|
<a href="{{ config('domains.domain_admin_url') }}" class="text-sm font-medium text-white hover:text-gray-100">Sign in</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Secondary navigation -->
|
|
<div class="bg-white">
|
|
<div class="border-b border-gray-200">
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div class="flex h-16 items-center justify-between">
|
|
<!-- Logo (lg+) -->
|
|
<div class="hidden lg:flex lg:items-center">
|
|
<a href="#">
|
|
<span class="sr-only">Your Company</span>
|
|
<img class="h-8 w-auto" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="">
|
|
</a>
|
|
</div>
|
|
|
|
<div class="hidden h-full lg:flex">
|
|
<!-- Mega menus -->
|
|
<div class="ml-8 my-2">
|
|
<div class="flex h-full justify-center space-x-8">
|
|
<a href="#" class="flex items-center text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md px-2 py-1">Start</a>
|
|
<a href="#" class="flex items-center text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md px-2 py-1">About</a>
|
|
<a href="#" class="flex items-center text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md px-2 py-1">Company</a>
|
|
<a href="#" class="flex items-center text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md px-2 py-1">Stores</a>
|
|
<a href="#" class="flex items-center text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md px-2 py-1">Contact</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile menu and search (lg-) -->
|
|
<div class="flex flex-1 items-center lg:hidden">
|
|
<!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
|
|
<button type="button" class="-ml-2 rounded-md bg-white p-2 text-gray-400 pointer-events-auto cursor-pointer" @click="mobileMenuOpen = true">
|
|
<span class="sr-only">Open menu</span>
|
|
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Search -->
|
|
<a href="#" class="ml-2 p-2 text-gray-400 hover:text-gray-500">
|
|
<span class="sr-only">Search</span>
|
|
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Logo (lg-) -->
|
|
<a href="#" class="lg:hidden">
|
|
<span class="sr-only">Your Company</span>
|
|
<img src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="" class="h-8 w-auto">
|
|
</a>
|
|
|
|
<div class="flex flex-1 items-center justify-end">
|
|
<div class="flex items-center lg:ml-8">
|
|
<div class="flex space-x-8">
|
|
<div class="hidden lg:flex">
|
|
<a href="#" class="-m-2 p-2 text-gray-400 hover:text-gray-500">
|
|
<span class="sr-only">Search</span>
|
|
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<a href="#" class="-m-2 p-2 text-gray-400 hover:text-gray-500">
|
|
<span class="sr-only">Account</span>
|
|
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="mx-4 h-6 w-px bg-gray-200 lg:mx-6" aria-hidden="true"></span>
|
|
|
|
<div class="flow-root">
|
|
<a href="#" class="group -m-2 flex items-center p-2">
|
|
<svg class="size-6 shrink-0 text-gray-400 group-hover:text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
|
|
</svg>
|
|
<span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
|
|
<span class="sr-only">items in cart, view bag</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header> |