menu

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