fix menu

superpage/src/components/Course/FlyoutMenu.astro

@@ -0,0 +1,147 @@
+---
+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>
+    <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"
+            >
+                <div class="truncate max-w-36 sm:max-w-72">
+                    {title}
+                </div>
+                <Icon
+                    name="chevron-down"
+                    aria-hidden="true"
+                    class="size-4 mt-1"
+                />
+            </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 top-2.5 max-lg:right-5 right-2.5 cursor-pointer outline-none"
+                        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 for="search" 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 {
+        constructor() {
+            super();
+            this._open = 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._open) {
+                    menu.close();
+                } else {
+                    menu.show();
+                }
+
+                this._open = !this._open;
+            });
+
+            menu.addEventListener("blur", () => {
+                if (!menu.contains(document.activeElement)) {
+                    menu.close();
+                }
+            });
+
+            menu.addEventListener("close", () => {
+                this._open = 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();
+            });
+        }
+    }
+
+    customElements.define("flyout-menu", FlyoutMenu);
+</script>