57 lines
2.3 KiB
Vue
57 lines
2.3 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
|
|
import NewFolderModal from "./NewFolderModal.vue";
|
|
import UploadFiles from "./UploadFiles.vue";
|
|
import UploadFolder from "./UploadFolder.vue";
|
|
|
|
const newFolderModalActive = ref(false);
|
|
|
|
const toggleNewFolderModal = (bool) => {
|
|
newFolderModalActive.value = bool;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Menu as="div" class="relative inline-block text-left">
|
|
<div>
|
|
<MenuButton
|
|
class="inline-flex w-full justify-center rounded-md bg-green-600/80 px-5 py-3 font-medium text-white hover:bg-green-600/40"
|
|
>
|
|
+ New
|
|
</MenuButton>
|
|
</div>
|
|
|
|
<transition
|
|
enter-active-class="transition duration-100 ease-out"
|
|
enter-from-class="transform scale-95 opacity-0"
|
|
enter-to-class="transform scale-100 opacity-100"
|
|
leave-active-class="transition duration-75 ease-in"
|
|
leave-from-class="transform scale-100 opacity-100"
|
|
leave-to-class="transform scale-95 opacity-0"
|
|
>
|
|
<MenuItems
|
|
class="border border-gray-300 dark:border-gray-700 absolute left-0 mt-2 w-56 divide-y divide-gray-700 rounded-md bg-zinc-900 focus:outline-none"
|
|
>
|
|
<div class="px-1 py-1">
|
|
<MenuItem v-slot="{ active }"
|
|
><a
|
|
href="#"
|
|
@click.prevent="toggleNewFolderModal(true)"
|
|
class="block w-full items-center rounded-md py-2 border border-zinc-900 block w-full pl-3 pr-4 py-2 text-left text-base font-medium text-gray-600 dark:text-zinc-100 hover:border-sky-500 dark:hover:border-sky-600 hover:ring-sky-500 dark:hover:ring-sky-600transition duration-150 ease-in-out"
|
|
>New Folder</a
|
|
></MenuItem
|
|
>
|
|
</div>
|
|
<div class="px-1 py-1">
|
|
<UploadFiles />
|
|
<UploadFolder />
|
|
</div>
|
|
</MenuItems>
|
|
</transition>
|
|
</Menu>
|
|
<NewFolderModal
|
|
v-model="newFolderModalActive"
|
|
@close="toggleNewFolderModal(false)"
|
|
/>
|
|
</template>
|