mariosant/mariosant.dev
1
0
Fork 0
Code Issues Pull Requests Actions Activity

remove alpinejs in favor of astro-navbar

Browse Source
This commit is contained in:
Surjith S M
2023-01-02 19:40:29 +05:30
parent 49d8294aaf
commit b5941f1a72
5 changed files with 94 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/navbar/dropdown.astro
View File

@@ -1,42 +1,47 @@
---
import { Dropdown, DropdownItems } from "astro-navbar";
const { title, lastItem, children } = Astro.props;
---
<li @click.away="open = false" class="relative" x-data="{ open: false }">
<button
@click="open = !open"
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"
:class="{'rotate-180': open, 'rotate-0': !open}">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
</svg>
</button>
<div
x-cloak
x-show="open"
class:list={[
"lg:absolute w-full lg:w-48",
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 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>
<li class="relative">
<Dropdown 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",
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 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>
</Dropdown>
</li>