menu

superpage/astro.config.mjs

@@ -10,7 +10,6 @@ import react from "@astrojs/react";
 import mdx from "@astrojs/mdx";
 import pagefind from "astro-pagefind";
 
-
 // https://astro.build/config
 export default defineConfig({
   site: "https://eduseg.com.br",

superpage/src/components/Course/HeaderNav.astro

@@ -7,12 +7,15 @@ const courses = await getCollection(
     "courses",
     ({ data }) => data.draft != true,
 );
+
+const { title } = Astro.props;
 ---
 
 <nav
     class="bg-lime-400 sticky top-0 z-10 py-3 drop-shadow shadow-sm"
     x-data="{ open: false }"
     x-on:keydown.esc.prevent.stop="open = false"
+    x-effect="document.documentElement.classList.toggle('overflow-hidden', open)"
 >
     <Container class="flex items-center">
         <button
@@ -22,7 +25,7 @@ const courses = await getCollection(
             aria-haspopup="true"
         >
             <div class="truncate max-w-36 sm:max-w-72 md:max-w-124">
-                NR-18 PEMT Plataforma Elevatória Móvel de Trabalho
+                {title}
             </div>
             <Icon name="chevron-down" aria-hidden="true" class="size-4" />
         </button>
@@ -38,15 +41,8 @@ const courses = await getCollection(
     <div
         x-cloak
         x-show="open"
-        x-on:click.outside="open = false"
-        x-transition:enter="transition ease-linear duration-50"
-        x-transition:enter-start="opacity-0"
-        x-transition:enter-end="opacity-100 "
-        x-transition:leave="transition ease-in duration-50"
-        x-transition:leave-start="opacity-100"
-        x-transition:leave-end="opacity-0"
         role="menu"
-        class="absolute top-0 bg-lime-400 w-full py-6 2xl:py-24 rounded-b-2xl drop-shadow shadow-sm"
+        class="absolute top-0 bg-lime-400 w-full py-6 2xl:py-24 rounded-b-2xl drop-shadow shadow-sm max-h-screen overflow-auto"
         style="display: none;"
     >
         <Container class="text-black relative xl:w-10/12 2xl:w-5xl">
@@ -61,7 +57,7 @@ const courses = await getCollection(
             <div class="border-b border-black pb-6 lg:pb-12 mb-6 lg:mb-12">
                 <span>Curso de formação</span>
                 <h1 class="text-xl lg:text-2xl">
-                    NR-18 PEMT Plataforma Elevatória Móvel de Trabalho
+                    {title}
                 </h1>
             </div>
 
@@ -107,21 +103,46 @@ const courses = await getCollection(
                 </div>
             </div>
 
-            <ul
-                class="list-disc list-inside max-lg:[&_li]:truncate font-medium"
-            >
-                {
-                    courses.map(({ data: { title, slug } }) => {
-                        return (
-                            <li>
-                                <a href={`/${slug}`} class="hover:underline">
-                                    {title}
-                                </a>
-                            </li>
-                        );
-                    })
-                }
-            </ul>
+            <div x-data="{ expanded: false }">
+                <div class="relative">
+                    <div
+                        x-show="! expanded"
+                        class="absolute bottom-0 h-16 w-full bg-gradient-to-t from-lime-400 to-lime-400/30"
+                    >
+                    </div>
+                    <ul
+                        class="list-disc list-inside max-lg:[&_li]:truncate font-medium overflow-hidden"
+                        :class="expanded ? 'h-none' : 'h-36'"
+                    >
+                        {
+                            courses.map(({ data: { title, slug } }) => {
+                                return (
+                                    <li>
+                                        <a
+                                            href={`/${slug}`}
+                                            class=" hover:underline p-0.5"
+                                        >
+                                            {title}
+                                        </a>
+                                    </li>
+                                );
+                            })
+                        }
+                    </ul>
+                </div>
+                <button
+                    :aria-expanded="expanded"
+                    x-on:click="expanded = ! expanded"
+                    class="border border-black rounded-full px-5 py-1 cursor-pointer mt-2.5"
+                    aria-expanded="false"
+                >
+                    <span
+                        x-text="expanded ? 'Ocultar' : 'Exibir todos os cursos'"
+                    >
+                        Exibir todos os cursos
+                    </span>
+                </button>
+            </div>
         </Container>
     </div>
     <!-- Dropdown Menu End -->

superpage/src/pages/[slug].astro

@@ -33,7 +33,7 @@ const { Content } = await render(course);
     </Fragment>
 
     <Fragment slot="nav">
-        <HeaderNav />
+        <HeaderNav {...data} />
     </Fragment>
 
     <section class="space-y-6 lg:space-y-24">

superpage/src/pages/index.astro

@@ -3,11 +3,11 @@ import { Picture } from "astro:assets";
 import { Icon } from "astro-icon/components";
 import Layout from "~/layouts/Layout.astro";
 import Container from "~/components/Container.astro";
-import { Clients } from "~/components/Course";
 import Search from "./_components/Search.astro";
+import { Clients } from "~/components/Course";
 
 import mulhercomepi from "~/assets/mulher-com-epi.png";
-const treands = [
+const trends = [
     {
         label: "NR-18 PEMT Plataforma Móvel de Trabalho Aéreo",
         href: "nr-18-plataforma-de-trabalho-aereo",
@@ -48,7 +48,7 @@ const treands = [
                             </h2>
                             <ul class="list-disc list-inside font-medium">
                                 {
-                                    treands.map(({ label, href }) => (
+                                    trends.map(({ label, href }) => (
                                         <li>
                                             <a href={href}>{label}</a>
                                         </li>

superpage/src/queryClient.js

@@ -1,3 +0,0 @@
-import { QueryClient } from "@tanstack/react-query";
-
-export const queryClient = new QueryClient();