wg-ocp-frontend notus-svelte

src/components/Dropdowns/IndexDropdown.svelte

@@ -0,0 +1,112 @@
+<script>
+  import { link } from "svelte-routing";
+  // library for creating dropdown menu appear on click
+  import { createPopper } from "@popperjs/core";
+
+  // core components
+  let dropdownPopoverShow = false;
+
+  let btnDropdownRef;
+  let popoverDropdownRef;
+
+  const toggleDropdown = (event) => {
+    event.preventDefault();
+    if (dropdownPopoverShow) {
+      dropdownPopoverShow = false;
+    } else {
+      dropdownPopoverShow = true;
+      createPopper(btnDropdownRef, popoverDropdownRef, {
+        placement: "bottom-start",
+      });
+    }
+  };
+</script>
+
+<div>
+  <a
+    class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
+    href="#pablo"
+    bind:this="{btnDropdownRef}"
+    on:click="{toggleDropdown}"
+  >
+    Demo Pages
+  </a>
+  <div
+    bind:this="{popoverDropdownRef}"
+    class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
+  >
+    <span
+      class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
+    >
+      Admin Layout
+    </span>
+    <a
+      use:link
+      href="/admin/dashboard"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
+    >
+      Dashboard
+    </a>
+    <a
+      use:link
+      href="/admin/settings"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
+    >
+      Settings
+    </a>
+    <a
+      use:link
+      href="/admin/tables"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
+    >
+      Tables
+    </a>
+    <a
+      use:link
+      href="/admin/maps"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
+    >
+      Maps
+    </a>
+    <div class="h-0 mx-4 my-2 border border-solid border-blueGray-100" />
+    <span
+      class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
+    >
+      Auth Layout
+    </span>
+    <a
+      use:link
+      href="/auth/login"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
+    >
+      Login
+    </a>
+    <a
+      use:link
+      href="/auth/register"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
+    >
+      Register
+    </a>
+    <div class="h-0 mx-4 my-2 border border-solid border-blueGray-100" />
+    <span
+      class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
+    >
+      No Layout
+    </span>
+    <a
+      use:link
+      href="/landing"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
+    >
+      Landing
+    </a>
+    <a
+      use:link
+      href="/profile"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
+    >
+      Profile
+    </a>
+  </div>
+</div>