This commit is contained in:
2025-05-08 12:59:46 -03:00
parent 11dd53a9eb
commit ea1f2f0f0e
6 changed files with 160 additions and 130 deletions

View File

@@ -26,7 +26,7 @@ const relatedCourses = data?.relatedCourses
<Icon
name="chevron-down"
aria-hidden="true"
class="size-4 mt-1"
class="size-4 mt-1 transition group-open/menu:-rotate-180"
/>
</button>
@@ -38,7 +38,8 @@ const relatedCourses = data?.relatedCourses
>
<div class="text-black bg-lime-400 rounded-xl lg:rounded-2xl">
<button
class="border border-black absolute rounded-full top-2.5 max-lg:right-5 right-2.5 cursor-pointer outline-none"
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" />
@@ -90,9 +91,11 @@ const relatedCourses = data?.relatedCourses
<script>
class FlyoutMenu extends HTMLElement {
private isOpen: boolean;
constructor() {
super();
this._isOpen = false;
this.isOpen = false;
}
connectedCallback() {
@@ -109,13 +112,13 @@ const relatedCourses = data?.relatedCourses
});
button.addEventListener("click", () => {
if (this._isOpen) {
if (this.isOpen) {
menu.close();
} else {
menu.show();
}
this._setIsOpen(!this._isOpen);
this.setIsOpen(!this.isOpen);
});
menu.addEventListener("blur", () => {
@@ -125,7 +128,7 @@ const relatedCourses = data?.relatedCourses
});
menu.addEventListener("close", () => {
this._setIsOpen(false);
this.setIsOpen(false);
});
document.addEventListener("touchstart", (e) => {
@@ -143,8 +146,8 @@ const relatedCourses = data?.relatedCourses
});
}
_setIsOpen(value) {
this._isOpen = value;
private setIsOpen(value: boolean) {
this.isOpen = value;
if (value) {
this.setAttribute("open", "");