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

fix space

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-05-15 14:07:45 -03:00
parent f33e0782a8
commit d988dcd278
92 changed files with 4062 additions and 4154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,154 +8,146 @@ 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;
? 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
<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>
>
<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} />
<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
<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>
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>
<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>
<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>
<Trends relatedCourses={relatedCourses} />
</div>
</div>
</div>
</dialog>
</Container>
</nav>
</flyout-menu>
<script>
class FlyoutMenu extends HTMLElement {
private isOpen: boolean;
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");
}
}
constructor() {
super();
this.isOpen = false;
}
customElements.define("flyout-menu", FlyoutMenu);
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>