sergio/saladeaula.digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-05-08 10:59:30 -03:00
parent e3447431f7
commit 11dd53a9eb
2 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
superpage/src/components/Course/BuyDropdown.astro
View File

@@ -6,9 +6,10 @@ const currency = new Intl.NumberFormat("pt-BR", {
}).format(course.unit_price); }).format(course.unit_price);
--- ---
<details class:list={["group", Astro.props.class]}> <details class:list={["group/dropdown", Astro.props.class]}>
<summary <summary
class="flex bg-black hover:bg-white hover:text-black group-open:text-black group-open:bg-white font-semibold py-2.5 px-3 rounded-md cursor-pointer transition" class="flex bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer transition
group-open/dropdown:text-black group-open/dropdown:bg-white"
> >
Contratar agora Contratar agora
</summary> </summary>

23
superpage/src/components/Course/FlyoutMenu.astro
View File

@@ -12,12 +12,13 @@ const relatedCourses = data?.relatedCourses
: null; : null;
--- ---
<flyout-menu> <flyout-menu class="group/menu">
<nav class="sticky bg-lime-400 top-0 z-10 drop-shadow shadow-sm"> <nav class="sticky bg-lime-400 top-0 z-10 drop-shadow shadow-sm">
<Container class="flex items-center relative py-3"> <Container class="flex items-center relative py-3">
<button <button
data-toggle="menu" 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" 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"> <div class="truncate max-w-36 sm:max-w-72">
{title} {title}
@@ -91,7 +92,7 @@ const relatedCourses = data?.relatedCourses
class FlyoutMenu extends HTMLElement { class FlyoutMenu extends HTMLElement {
constructor() { constructor() {
super(); super();
this._open = false; this._isOpen = false;
} }
connectedCallback() { connectedCallback() {
@@ -108,13 +109,13 @@ const relatedCourses = data?.relatedCourses
}); });
button.addEventListener("click", () => { button.addEventListener("click", () => {
if (this._open) { if (this._isOpen) {
menu.close(); menu.close();
} else { } else {
menu.show(); menu.show();
} }
this._open = !this._open; this._setIsOpen(!this._isOpen);
}); });
menu.addEventListener("blur", () => { menu.addEventListener("blur", () => {
@@ -124,7 +125,7 @@ const relatedCourses = data?.relatedCourses
}); });
menu.addEventListener("close", () => { menu.addEventListener("close", () => {
this._open = false; this._setIsOpen(false);
}); });
document.addEventListener("touchstart", (e) => { document.addEventListener("touchstart", (e) => {
@@ -141,6 +142,16 @@ const relatedCourses = data?.relatedCourses
menu.close(); menu.close();
}); });
} }
_setIsOpen(value) {
this._isOpen = value;
if (value) {
this.setAttribute("open", "");
} else {
this.removeAttribute("open");
}
}
} }
customElements.define("flyout-menu", FlyoutMenu); customElements.define("flyout-menu", FlyoutMenu);