48 lines
1.3 KiB
Plaintext
48 lines
1.3 KiB
Plaintext
---
|
|
import { Dropdown as DropdownContainer, DropdownItems } from "astro-navbar";
|
|
const { title, lastItem, children } = Astro.props;
|
|
---
|
|
|
|
<li class="relative">
|
|
<DropdownContainer class="group">
|
|
<button
|
|
class="flex items-center gap-1 w-full lg:w-auto lg:px-3 py-2 text-gray-600 hover:text-gray-900">
|
|
<span>{title}</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>
|
|
<div
|
|
class:list={[
|
|
"lg:absolute w-full lg:w-48 z-10",
|
|
lastItem
|
|
? "lg:right-0 origin-top-right"
|
|
: "lg:left-0 origin-top-left",
|
|
]}>
|
|
<div
|
|
class="px-3 lg:py-2 lg:bg-white lg:rounded-md lg:shadow-sm lg:border flex flex-col">
|
|
{
|
|
children.map((item) => (
|
|
<a
|
|
href={item.path}
|
|
class="py-1 text-gray-600 hover:text-gray-900">
|
|
{item.title}
|
|
</a>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</DropdownItems>
|
|
</DropdownContainer>
|
|
</li>
|