155 lines
4.2 KiB
Plaintext
155 lines
4.2 KiB
Plaintext
---
|
|
import { Icon } from "astro-icon/components";
|
|
import Container from "../Container.astro";
|
|
import BuyDropdown from "./BuyDropdown.astro";
|
|
import Trends from "~/components/Trends.astro";
|
|
import Search from "~/components/Search.astro";
|
|
|
|
import { getEntries } from "astro:content";
|
|
const { title, ...data } = Astro.props;
|
|
const relatedCourses = data?.relatedCourses
|
|
? await getEntries(data.relatedCourses)
|
|
: null;
|
|
---
|
|
|
|
<flyout-menu class="group/menu">
|
|
<nav class="sticky bg-lime-400 top-0 z-10 drop-shadow shadow-sm">
|
|
<Container class="flex items-center relative py-3">
|
|
<button
|
|
data-toggle="menu"
|
|
class="text-black font-medium cursor-pointer lg:bg-white/15 hover:outline
|
|
lg:border border-black lg:py-0.5 lg:px-2.5 rounded-lg transition
|
|
flex items-center gap-1 lg:group-open/menu:outline"
|
|
>
|
|
<div class="truncate max-w-36 sm:max-w-72">
|
|
{title}
|
|
</div>
|
|
<Icon
|
|
name="chevron-down"
|
|
aria-hidden="true"
|
|
class="size-4 mt-1 transition group-open/menu:-rotate-180"
|
|
/>
|
|
</button>
|
|
|
|
<BuyDropdown class="ml-auto" {...Astro.props} />
|
|
|
|
<dialog
|
|
class="absolute top-full translate-y-1 w-full bg-transparent max-lg:px-2.5"
|
|
closedby="any"
|
|
>
|
|
<div class="text-black bg-lime-400 rounded-xl lg:rounded-2xl">
|
|
<button
|
|
class="border border-black absolute rounded-full cursor-pointer outline-none
|
|
top-2.5 lg:top-5 right-5"
|
|
data-dismiss
|
|
>
|
|
<Icon name="x-mark" class="size-4 p-0.5" />
|
|
</button>
|
|
<div class="lg:w-1/2 mx-auto p-5 lg:py-24">
|
|
<search class="space-y-5">
|
|
<label class="block">
|
|
<h1 class="text-pretty font-semibold text-3xl lg:text-4xl">
|
|
Digite o curso para ver todos detalhes
|
|
</h1>
|
|
</label>
|
|
|
|
<Search />
|
|
</search>
|
|
|
|
<div class="space-y-1.5">
|
|
<h2 class="font-bold text-xl flex gap-1">
|
|
{
|
|
relatedCourses ? (
|
|
<>
|
|
<Icon name="puzzle-piece" class="size-6" />
|
|
<span>Cursos relacionados</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Icon name="arrow-trending-up" class="size-6" />
|
|
<span>Cursos mais procurados</span>
|
|
</>
|
|
)
|
|
}
|
|
</h2>
|
|
|
|
<Trends relatedCourses={relatedCourses} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
</Container>
|
|
</nav>
|
|
</flyout-menu>
|
|
|
|
<script>
|
|
class FlyoutMenu extends HTMLElement {
|
|
private isOpen: boolean;
|
|
|
|
constructor() {
|
|
super();
|
|
this.isOpen = false;
|
|
}
|
|
|
|
connectedCallback() {
|
|
const menu = this.querySelector("dialog") as HTMLDialogElement;
|
|
const button = this.querySelector(
|
|
"button[data-toggle=menu]",
|
|
) as HTMLButtonElement;
|
|
const close = this.querySelector(
|
|
"button[data-dismiss]",
|
|
) as HTMLButtonElement;
|
|
|
|
close.addEventListener("click", () => {
|
|
menu.close();
|
|
});
|
|
|
|
button.addEventListener("click", () => {
|
|
if (this.isOpen) {
|
|
menu.close();
|
|
} else {
|
|
menu.show();
|
|
}
|
|
|
|
this.setIsOpen(!this.isOpen);
|
|
});
|
|
|
|
menu.addEventListener("blur", () => {
|
|
if (!menu.contains(document.activeElement)) {
|
|
menu.close();
|
|
}
|
|
});
|
|
|
|
menu.addEventListener("close", () => {
|
|
this.setIsOpen(false);
|
|
});
|
|
|
|
document.addEventListener("touchstart", (e) => {
|
|
const target = e.target as HTMLElement;
|
|
|
|
if (menu.contains(target)) {
|
|
return;
|
|
}
|
|
|
|
if (target.closest("button[data-toggle=menu]")) {
|
|
return;
|
|
}
|
|
|
|
menu.close();
|
|
});
|
|
}
|
|
|
|
private setIsOpen(value: boolean) {
|
|
this.isOpen = value;
|
|
|
|
if (value) {
|
|
this.setAttribute("open", "");
|
|
} else {
|
|
this.removeAttribute("open");
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define("flyout-menu", FlyoutMenu);
|
|
</script>
|