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

fix menu

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-05-08 10:44:46 -03:00
parent 9b713e5783
commit e3447431f7
5 changed files with 155 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
superpage/src/components/Course/Contact.jsx
View File

@@ -4,8 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
import clsx from "clsx"; import clsx from "clsx";
import { z } from "zod"; import { z } from "zod";
// const N8N_URL = "https://n8n.eduseg.com.br/webhook/eduseg"; const N8N_URL = "https://n8n.eduseg.com.br/webhook/eduseg";
const N8N_URL = "https://n8n.eduseg.com.br/webhook-test/eduseg";
const schema = z.object({ const schema = z.object({
name: z.string().nonempty({ message: "Deve preencher o nome" }), name: z.string().nonempty({ message: "Deve preencher o nome" }),

147
superpage/src/components/Course/FlyoutMenu.astro Normal file
View File

@@ -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>

111
superpage/src/components/Course/HeroNav.astro
View File

@@ -1,111 +0,0 @@
---
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;
---
<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"
data-target="#heromenu"
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
id="heromenu"
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">
<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>
<script>
const button = document.querySelector(
"[data-toggle=menu]",
) as HTMLButtonElement;
button?.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
const target = button.dataset.target as string;
const menu = document.querySelector(target) as HTMLDialogElement;
const close = menu.querySelector("[data-dismiss]") as HTMLButtonElement;
document.documentElement.classList.toggle("overflow-hidden");
menu.show();
menu.addEventListener(
"close",
() => {
document.documentElement.classList.toggle("overflow-hidden");
},
{ once: true },
);
close?.addEventListener(
"click",
() => {
menu.close();
},
{ once: true },
);
});
</script>

4
superpage/src/pages/[slug].astro
View File

@@ -4,7 +4,7 @@ import { Picture } from "astro:assets";
import { Icon } from "astro-icon/components"; import { Icon } from "astro-icon/components";
import Layout from "~/layouts/Layout.astro"; import Layout from "~/layouts/Layout.astro";
import Container from "~/components/Container.astro"; import Container from "~/components/Container.astro";
import HeroNav from "~/components/Course/HeroNav.astro"; import FlyoutMenu from "~/components/Course/FlyoutMenu.astro";
import BuyButton from "./_components/BuyButton.astro"; import BuyButton from "./_components/BuyButton.astro";
import placeholder from "~/assets/placeholder.png"; import placeholder from "~/assets/placeholder.png";
@@ -34,7 +34,7 @@ const { Content } = await render(course);
</Fragment> </Fragment>
<Fragment slot="nav"> <Fragment slot="nav">
<HeroNav {...data} /> <FlyoutMenu {...data} />
</Fragment> </Fragment>
<section class="space-y-6 lg:space-y-24"> <section class="space-y-6 lg:space-y-24">

6
superpage/src/styles/global.css
View File

@@ -11,10 +11,14 @@ body {
@apply text-white bg-black antialiased; @apply text-white bg-black antialiased;
} }
html:not(.overflow-hidden) { html:not(:has(dialog[open])) {
@apply scroll-pt-22 lg:scroll-pt-32; @apply scroll-pt-22 lg:scroll-pt-32;
} }
html:has(dialog[open]) {
@apply overflow-hidden;
}
/* Pagefind */ /* Pagefind */
.pagefind-ui__form { .pagefind-ui__form {
@apply flex; @apply flex;