113 lines
3.0 KiB
Svelte
113 lines
3.0 KiB
Svelte
<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>
|