remove alpinejs in favor of astro-navbar
This commit is contained in:
Surjith S M
@@ -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>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import Container from "@components/container.astro";
|
||||
import Link from "@components/ui/link.astro";
|
||||
import Dropdown from "./dropdown.astro";
|
||||
import { Astronav, MenuItems, MenuIcon } from "astro-navbar";
|
||||
|
||||
const menuitems = [
|
||||
{
|
||||
@@ -33,74 +34,50 @@ const menuitems = [
|
||||
---
|
||||
|
||||
<Container>
|
||||
<header
|
||||
class="flex flex-col lg:flex-row justify-between items-center my-5"
|
||||
x-data="{ open: false }"
|
||||
x-init="$watch('open', value => console.log(value))">
|
||||
<div class="flex w-full lg:w-auto items-center justify-between">
|
||||
<a href="/" class="text-lg"
|
||||
><span class="font-bold text-slate-800">Astro</span><span
|
||||
class="text-slate-500">ship</span
|
||||
>
|
||||
</a>
|
||||
<div class="block lg:hidden">
|
||||
<button @click="open = !open" class="text-gray-800">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Menu</title>
|
||||
<path
|
||||
x-cloak
|
||||
x-show="open"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M18.278 16.864a1 1 0 01-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 01-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 011.414-1.414l4.829 4.828 4.828-4.828a1 1 0 111.414 1.414l-4.828 4.829 4.828 4.828z"
|
||||
></path>
|
||||
<path
|
||||
x-show="!open"
|
||||
fill-rule="evenodd"
|
||||
d="M4 5h16a1 1 0 010 2H4a1 1 0 110-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<header class="flex flex-col lg:flex-row justify-between items-center my-5">
|
||||
<Astronav>
|
||||
<div class="flex w-full lg:w-auto items-center justify-between">
|
||||
<a href="/" class="text-lg"
|
||||
><span class="font-bold text-slate-800">Astro</span><span
|
||||
class="text-slate-500">ship</span
|
||||
>
|
||||
</a>
|
||||
<div class="block lg:hidden">
|
||||
<MenuIcon class="w-4 h-4 text-gray-800" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0"
|
||||
:class="{ 'block': open, 'hidden': !open }"
|
||||
x-transition>
|
||||
<ul class="flex flex-col lg:flex-row lg:gap-3">
|
||||
{
|
||||
menuitems.map((item, index) => (
|
||||
<>
|
||||
{item.children && (
|
||||
<Dropdown
|
||||
title={item.title}
|
||||
children={item.children}
|
||||
lastItem={index === menuitems.length - 1}
|
||||
/>
|
||||
)}
|
||||
<MenuItems class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0">
|
||||
<ul class="flex flex-col lg:flex-row lg:gap-3">
|
||||
{
|
||||
menuitems.map((item, index) => (
|
||||
<>
|
||||
{item.children && (
|
||||
<Dropdown
|
||||
title={item.title}
|
||||
children={item.children}
|
||||
lastItem={index === menuitems.length - 1}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!item.children && (
|
||||
<li>
|
||||
<a
|
||||
href={item.path}
|
||||
class="flex lg:px-3 py-2 text-gray-600 hover:text-gray-900">
|
||||
{item.title}
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<div class="lg:hidden flex items-center mt-3 gap-4">
|
||||
<Link href="#" style="muted" block size="md">Log in</Link>
|
||||
<Link href="#" size="md" block>Sign up</Link>
|
||||
</div>
|
||||
</nav>
|
||||
{!item.children && (
|
||||
<li>
|
||||
<a
|
||||
href={item.path}
|
||||
class="flex lg:px-3 py-2 text-gray-600 hover:text-gray-900">
|
||||
{item.title}
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<div class="lg:hidden flex items-center mt-3 gap-4">
|
||||
<Link href="#" style="muted" block size="md">Log in</Link>
|
||||
<Link href="#" size="md" block>Sign up</Link>
|
||||
</div>
|
||||
</MenuItems>
|
||||
</Astronav>
|
||||
<div>
|
||||
<div class="hidden lg:flex items-center gap-4">
|
||||
<a href="#">Log in</a>
|
||||
|
||||
Reference in New Issue
Block a user