131 lines
5.0 KiB
Vue
131 lines
5.0 KiB
Vue
<template>
|
|
<!--
|
|
This example requires updating your template:
|
|
|
|
```
|
|
<html class="h-full bg-gray-100">
|
|
<body class="h-full">
|
|
```
|
|
-->
|
|
<div>
|
|
<TransitionRoot as="template" :show="sidebarOpen">
|
|
<Dialog
|
|
as="div"
|
|
class="relative z-40 md:hidden bg-white"
|
|
@close="sidebarOpen = false"
|
|
>
|
|
<TransitionChild
|
|
as="template"
|
|
enter="transition-opacity ease-linear duration-300"
|
|
enter-from="opacity-0"
|
|
enter-to="opacity-100"
|
|
leave="transition-opacity ease-linear duration-300"
|
|
leave-from="opacity-100"
|
|
leave-to="opacity-0"
|
|
>
|
|
<div class="fixed inset-0 bg-gray-600 bg-opacity-75" />
|
|
</TransitionChild>
|
|
|
|
<div class="fixed inset-0 flex z-40">
|
|
<TransitionChild
|
|
as="template"
|
|
enter="transition ease-in-out duration-300 transform"
|
|
enter-from="-translate-x-full"
|
|
enter-to="translate-x-0"
|
|
leave="transition ease-in-out duration-300 transform"
|
|
leave-from="translate-x-0"
|
|
leave-to="-translate-x-full"
|
|
>
|
|
<DialogPanel
|
|
class="relative flex-1 flex flex-col max-w-xs w-full"
|
|
>
|
|
<TransitionChild
|
|
as="template"
|
|
enter="ease-in-out duration-300"
|
|
enter-from="opacity-0"
|
|
enter-to="opacity-100"
|
|
leave="ease-in-out duration-300"
|
|
leave-from="opacity-100"
|
|
leave-to="opacity-0"
|
|
>
|
|
<div class="absolute top-0 right-0 -mr-12 pt-2">
|
|
<button
|
|
type="button"
|
|
class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
|
@click="sidebarOpen = false"
|
|
>
|
|
<span class="sr-only"
|
|
>Close sidebar</span
|
|
>
|
|
<XMarkIcon
|
|
class="h-6 w-6 text-white"
|
|
aria-hidden="true"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</TransitionChild>
|
|
<BaseNavSideBar1 :on-move="onMoveHandler" />
|
|
</DialogPanel>
|
|
</TransitionChild>
|
|
<div class="flex-shrink-0 w-14" aria-hidden="true">
|
|
<!-- Force sidebar to shrink to fit close icon -->
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</TransitionRoot>
|
|
|
|
<!-- Static sidebar for desktop -->
|
|
<div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
|
|
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
|
<div class="flex-1 flex flex-col min-h-0 bg-white">
|
|
<BaseNavSideBar1 :on-move="onMoveHandler" />
|
|
</div>
|
|
</div>
|
|
<div class="md:pl-64 flex flex-col flex-1">
|
|
<div
|
|
class="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3 bg-gray-100"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900"
|
|
@click="sidebarOpen = true"
|
|
>
|
|
<span class="sr-only">Open sidebar</span>
|
|
<Bars3Icon class="h-6 w-6" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
<main class="flex-1">
|
|
<!-- Replace with your content -->
|
|
<div class="mt-5 sm:px-3 lg:px-5"><slot /></div>
|
|
<!-- /End replace -->
|
|
</main>
|
|
<BaseModal1 />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
Dialog,
|
|
DialogPanel,
|
|
TransitionChild,
|
|
TransitionRoot,
|
|
} from '@headlessui/vue';
|
|
import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline';
|
|
|
|
useHead({
|
|
htmlAttrs: {
|
|
class: 'h-full bg-gray-50',
|
|
},
|
|
bodyAttrs: {
|
|
class: 'h-full',
|
|
},
|
|
});
|
|
|
|
const sidebarOpen = ref(false);
|
|
|
|
function onMoveHandler() {
|
|
sidebarOpen.value = false;
|
|
}
|
|
</script>
|