fix dropdown behaviour

unimib-datAI · Aug 1, 2024 · f90a982 · f90a982
1 parent 82698f3
commit f90a982
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 6 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,5 +1,6 @@
 ---
 import MenuItem from "@components/MenuItem.astro";
+import { DropdownMenu } from "./ui/dropdown-menu";
 ---
 
 <header class="bg-background sticky top-0 z-20">
@@ -47,7 +48,7 @@ import MenuItem from "@components/MenuItem.astro";
               id="dropdownNavbarLink"
               data-dropdown-toggle="dropdownNavbar"
               class="flex items-center justify-between w-full py-2 px-3 text-foreground rounded md:border-0 md:hover:text-purple-500 md:p-0 md:w-auto"
-              >Dropdown <svg
+              >Our works <svg
                 class="w-2.5 h-2.5 ms-2.5"
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
@@ -68,7 +69,7 @@ import MenuItem from "@components/MenuItem.astro";
               class="z-10 hidden font-normal divide-y divide-gray-100 rounded-lg shadow w-44 bg-dropdownBackground dark:divide-gray-600"
             >
               <ul
-                class="py-2 text-smtext-foreground"
+                class="py-2 text-sm text-foreground w-full"
                 aria-labelledby="dropdownLargeButton"
               >
                 <li>
@@ -102,7 +103,11 @@ import MenuItem from "@components/MenuItem.astro";
 </header>
 
 <script>
-  const collapse = document.querySelector("[data-collapse-toggle]");
+  import { Dropdown, type DropdownOptions } from "flowbite";
+
+  const collapse = document.querySelector(
+    "[data-collapse-toggle='navbar-default']"
+  );
 
   const toggleNavbar = () => {
     if (!collapse) return;
@@ -125,4 +130,34 @@ import MenuItem from "@components/MenuItem.astro";
   if (collapse) {
     collapse.addEventListener("click", toggleNavbar);
   }
+
+  // set the dropdown menu element
+  const $targetEl = document.getElementById("dropdownNavbar");
+
+  // set the element that trigger the dropdown menu on click
+  const $triggerEl = document.getElementById("dropdownNavbarLink");
+
+  const options: DropdownOptions = {
+    placement: "bottom",
+    triggerType: "click",
+    offsetSkidding: 0,
+    offsetDistance: 10,
+    delay: 300,
+    ignoreClickOutsideClass: false,
+  };
+
+  // instance options object
+  const instanceOptions = {
+    id: "dropdownNavbarLink",
+    override: true,
+  };
+
+  const dropdown = new Dropdown(
+    $targetEl,
+    $triggerEl,
+    options,
+    instanceOptions
+  );
+
+  const toggleDropdown = () => dropdown.toggle();
 </script>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -6,8 +6,6 @@ export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     extend: {
-
-
       backgroundSize: {
         "400%": "400%",
       },
@@ -30,7 +28,6 @@ export default {
         sans: ["Inter var", "Inter", ...defaultTheme.fontFamily.sans],
       },
       colors: ({ colors }) => ({
-
         background: "#0E0202",
         foreground: "#D9D9D9",
         gray: {
@@ -61,6 +58,7 @@ export default {
     },
   },
   plugins: [
+    require("flowbite/plugin"),
     plugin(function ({ matchUtilities, theme }) {
       matchUtilities(
         {