220 lines
8.4 KiB
Plaintext
220 lines
8.4 KiB
Plaintext
---
|
|
import {
|
|
Astronav,
|
|
MenuItems,
|
|
MenuIcon,
|
|
Dropdown,
|
|
DropdownItems,
|
|
DropdownSubmenu,
|
|
} from "astro-navbar";
|
|
---
|
|
|
|
<header class="lg:flex justify-between p-5 gap-5 mx-auto container">
|
|
<Astronav closeOnClick>
|
|
<div class="flex w-full lg:w-auto justify-between">
|
|
<a>Your Logo</a>
|
|
<div class="block lg:hidden">
|
|
<MenuIcon class="w-4 h-4 text-gray-800" />
|
|
</div>
|
|
</div>
|
|
<MenuItems class="hidden lg:flex">
|
|
<ul class="flex flex-col lg:flex-row lg:gap-5">
|
|
<li>
|
|
<a href="/">Home</a>
|
|
</li>
|
|
<li>
|
|
<Dropdown class="group">
|
|
<button class="flex items-center">
|
|
<span> About</span>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="3"
|
|
stroke="currentColor"
|
|
class="w-3 h-3 mt-0.5 group-open:rotate-180">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
|
|
</svg>
|
|
</button>
|
|
<DropdownItems class="relative">
|
|
<div
|
|
class="lg:absolute bg-white top-2 w-40 border shadow rounded p-2">
|
|
<ul>
|
|
<li>
|
|
<a href="#">Menu 1</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Menu 2</a>
|
|
</li>
|
|
<li>
|
|
<DropdownSubmenu class="group/submenu">
|
|
<button class="flex w-full items-center justify-between">
|
|
<span> Dropdown</span>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="3"
|
|
stroke="currentColor"
|
|
class="w-3 h-3 mt-0.5 group-open/submenu:rotate-180">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
|
|
</svg>
|
|
</button>
|
|
<DropdownItems class="relative">
|
|
<ul
|
|
class="lg:absolute bg-white top-0 left-full w-40 border shadow rounded p-2">
|
|
<li>
|
|
<a href="#">Submenu 1</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Submenu 2</a>
|
|
</li>
|
|
<li>
|
|
<DropdownSubmenu class="group/nestedsubmenu">
|
|
<button
|
|
class="flex w-full items-center justify-between">
|
|
<span> Dropdown</span>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="3"
|
|
stroke="currentColor"
|
|
class="w-3 h-3 mt-0.5 group-open/nestedsubmenu:rotate-180">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
|
|
</svg>
|
|
</button>
|
|
<DropdownItems class="relative">
|
|
<ul
|
|
class="lg:absolute bg-white top-0 left-full w-40 border shadow rounded p-2">
|
|
<li>
|
|
<a href="#">Submenu 1</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Submenu 2</a>
|
|
</li>
|
|
</ul>
|
|
</DropdownItems>
|
|
</DropdownSubmenu>
|
|
</li>
|
|
</ul>
|
|
</DropdownItems>
|
|
</DropdownSubmenu>
|
|
</li>
|
|
<li>
|
|
<DropdownSubmenu class="group/submenu">
|
|
<button class="flex w-full items-center justify-between">
|
|
<span> Dropdown</span>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="3"
|
|
stroke="currentColor"
|
|
class="w-3 h-3 mt-0.5 group-open/submenu:rotate-180">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
|
|
</svg>
|
|
</button>
|
|
<DropdownItems class="relative">
|
|
<ul
|
|
class="lg:absolute bg-white top-0 left-full w-40 border shadow rounded p-2">
|
|
<li>
|
|
<a href="#">Submenu 1</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Submenu 2</a>
|
|
</li>
|
|
</ul>
|
|
</DropdownItems>
|
|
</DropdownSubmenu>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</DropdownItems>
|
|
</Dropdown>
|
|
</li>
|
|
<li>
|
|
<Dropdown class="group">
|
|
<button class="flex items-center">
|
|
<span> Services</span>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="3"
|
|
stroke="currentColor"
|
|
class="w-3 h-3 mt-0.5 group-open:rotate-180">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
|
|
</svg>
|
|
</button>
|
|
<DropdownItems class="relative">
|
|
<div
|
|
class="lg:absolute bg-white top-2 w-40 border shadow rounded p-2">
|
|
<ul>
|
|
<li>
|
|
<a href="#">Menu 1</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Menu 2</a>
|
|
</li>
|
|
<li>
|
|
<DropdownSubmenu class="group/submenu">
|
|
<button class="flex w-full items-center justify-between">
|
|
<span> Dropdown</span>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="3"
|
|
stroke="currentColor"
|
|
class="w-3 h-3 mt-0.5 group-open/submenu:rotate-180">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
|
|
</svg>
|
|
</button>
|
|
<DropdownItems class="relative">
|
|
<ul
|
|
class="lg:absolute bg-white top-0 left-full w-40 border shadow rounded p-2">
|
|
<li>
|
|
<a href="#">Submenu 1</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Submenu 2</a>
|
|
</li>
|
|
</ul>
|
|
</DropdownItems>
|
|
</DropdownSubmenu>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</DropdownItems>
|
|
</Dropdown>
|
|
<li>
|
|
<a href="#">Pricing</a>
|
|
</li>
|
|
<li>
|
|
<a href="/contact">Contact</a>
|
|
</li>
|
|
</li>
|
|
</ul>
|
|
</MenuItems>
|
|
</Astronav>
|
|
</header>
|