update

superpage/src/components/Course/HeaderNav.astro

@@ -0,0 +1,130 @@
+---
+import { Icon } from "astro-icon/components";
+import Container from "../Container.astro";
+
+import { getCollection } from "astro:content";
+const courses = await getCollection(
+    "courses",
+    ({ data }) => data.draft != true,
+);
+---
+
+<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"
+>
+    <Container class="flex items-center">
+        <button
+            class="text-black font-semibold cursor-pointer flex items-center gap-1 hover:outline-2 rounded"
+            x-bind:aria-expanded="open"
+            x-on:click="open = true"
+            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
+            </div>
+            <Icon name="chevron-down" aria-hidden="true" class="size-4" />
+        </button>
+
+        <button
+            class="bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer ml-auto transition duration-150"
+        >
+            Contratar agora
+        </button>
+    </Container>
+
+    <!-- Dropdown Menu -->
+    <div
+        x-cloak
+        x-show="open"
+        x-on:click.outside="open = false"
+        x-transition:enter="transition ease-linear duration-150"
+        x-transition:enter-start="opacity-0"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="transition ease-in duration-100"
+        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"
+        style="display: none;"
+    >
+        <Container class="text-black relative xl:w-10/12 2xl:w-5xl">
+            <button
+                class="absolute border border-black cursor-pointer rounded-full -top-3.5 2xl:-top-21.5 right-2.5"
+                aria-labelledby="Fechar"
+                aria-hidden={true}
+                x-on:click="open = false"
+            >
+                <Icon name="x-mark" />
+            </button>
+
+            <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
+                </h1>
+            </div>
+
+            <div class="flex max-lg:flex-col gap-2.5 justify-between mb-3.5">
+                <h6 class="font-medium text-xl lg:text-2xl">
+                    Conheça outros cursos da EDUSEG&reg;
+                </h6>
+
+                <div class="flex max-lg:flex-col gap-0.5 lg:gap-4">
+                    <!-- Search -->
+                    <label class="flex gap-1 items-center">
+                        <span class="text-nowrap max-lg:w-2/5 text-right"
+                            >Buscar por</span
+                        >
+                        <div
+                            class="flex items-center border rounded px-1.5 py-0.5 lg:px-2 lg:py-1 bg-white/20 focus-within:bg-white w-full transition duration-150"
+                        >
+                            <input class="outline-none w-full" />
+                            <Icon name="magnifying-glass" class="size-5" />
+                        </div>
+                    </label>
+                    <!-- Search End -->
+
+                    <!-- Filter -->
+                    <label class="flex gap-1 items-center">
+                        <span class="text-nowrap max-lg:w-2/5 text-right"
+                            >Exibir apenas</span
+                        >
+                        <div class="relative w-full lg:w-30 bg-white/20">
+                            <select
+                                class="flex border items-center justify-between gap-0.5 border-black rounded px-1.5 py-0.5 lg:px-2 lg:py-1 appearance-none focus:outline-none w-full lowercase"
+                            >
+                                <option value="formacao">Formação</option>
+                                <option value="reciclagem">Reciclagem</option>
+                            </select>
+                            <Icon
+                                name="chevron-down"
+                                class="absolute top-2.5 right-2.5 pointer-events-none size-3.5"
+                            />
+                        </div>
+                    </label>
+                    <!-- Filder End -->
+                </div>
+            </div>
+
+            <ul class="list-disc list-inside max-lg:[&_li]:truncate">
+                {
+                    courses.map(({ data: { title, slug } }) => {
+                        return (
+                            <li>
+                                <a
+                                    href={`/${slug}`}
+                                    class="font-bold hover:underline"
+                                >
+                                    {title}
+                                </a>
+                            </li>
+                        );
+                    })
+                }
+            </ul>
+        </Container>
+    </div>
+    <!-- Dropdown Menu End -->
+</nav>