150 lines
5.4 KiB
Vue
150 lines
5.4 KiB
Vue
<template>
|
|
<Popover class="relative border-b-2 border-gray-100 bg-white">
|
|
<div class="mx-auto max-w-7xl px-6">
|
|
<div class="flex items-center py-6 md:justify-start md:space-x-8">
|
|
<div class="mr-auto flex md:mr-0">
|
|
<div class="mr-auto flex justify-start md:mr-0">
|
|
<router-link to="/"><HomeIcon class="h-8 w-8" /></router-link>
|
|
</div>
|
|
</div>
|
|
<div class="-my-2 -mr-2 md:hidden">
|
|
<PopoverButton
|
|
class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
|
|
>
|
|
<span class="sr-only">Open menu</span>
|
|
<Bars3Icon class="h-6 w-6" aria-hidden="true" />
|
|
</PopoverButton>
|
|
</div>
|
|
<PopoverGroup as="nav" class="hidden space-x-6 md:flex">
|
|
<Popover class="relative" v-slot="{ open }">
|
|
<PopoverButton
|
|
:class="[
|
|
open ? 'text-gray-900' : 'text-gray-500',
|
|
'group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
|
|
]"
|
|
>
|
|
<span>Buildings</span>
|
|
<ChevronDownIcon
|
|
:class="[
|
|
open ? 'text-gray-600' : 'text-gray-400',
|
|
'ml-2 h-5 w-5 group-hover:text-gray-500',
|
|
]"
|
|
aria-hidden="true"
|
|
/>
|
|
</PopoverButton>
|
|
|
|
<transition
|
|
enter-active-class="transition ease-out duration-200"
|
|
enter-from-class="opacity-0 translate-y-1"
|
|
enter-to-class="opacity-100 translate-y-0"
|
|
leave-active-class="transition ease-in duration-150"
|
|
leave-from-class="opacity-100 translate-y-0"
|
|
leave-to-class="opacity-0 translate-y-1"
|
|
>
|
|
<PopoverPanel
|
|
class="absolute z-10 -ml-4 mt-3 w-screen max-w-md transform px-2 sm:px-0"
|
|
>
|
|
<div
|
|
class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5"
|
|
>
|
|
<div class="relative bg-white pt-4 pb-4 sm:gap-5">
|
|
<template v-for="building of buildings">
|
|
<Building :building="building" />
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</PopoverPanel>
|
|
</transition>
|
|
</Popover>
|
|
|
|
<a
|
|
href="#"
|
|
class="text-base font-medium text-gray-500 hover:text-gray-900"
|
|
>Groups</a
|
|
>
|
|
</PopoverGroup>
|
|
<div class="hidden items-center justify-end md:flex md:flex-1 lg:w-0">
|
|
<UserPill :user="user" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<transition
|
|
enter-active-class="duration-200 ease-out"
|
|
enter-from-class="opacity-0 scale-95"
|
|
enter-to-class="opacity-100 scale-100"
|
|
leave-active-class="duration-100 ease-in"
|
|
leave-from-class="opacity-100 scale-100"
|
|
leave-to-class="opacity-0 scale-95"
|
|
>
|
|
<PopoverPanel
|
|
focus
|
|
class="absolute inset-x-0 top-0 z-50 origin-top-right transform p-2 transition md:hidden"
|
|
>
|
|
<div
|
|
class="divide-y-2 divide-gray-50 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"
|
|
>
|
|
<div class="px-5 pt-5 pb-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<router-link to="/"><HomeIcon class="h-8 w-8" /></router-link>
|
|
</div>
|
|
<div class="-mr-2">
|
|
<PopoverButton
|
|
class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
|
|
>
|
|
<span class="sr-only">Close menu</span>
|
|
<XMarkIcon class="h-6 w-6" aria-hidden="true" />
|
|
</PopoverButton>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6">
|
|
<span class="text-lg font-bold">Buildings</span>
|
|
<div class="-mx-5">
|
|
<template v-for="building of buildings">
|
|
<Building :building="building" />
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-6 py-6 px-5">
|
|
<div class="flex justify-center">
|
|
<UserPill :user="user" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PopoverPanel>
|
|
</transition>
|
|
</Popover>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
Popover,
|
|
PopoverButton,
|
|
PopoverGroup,
|
|
PopoverPanel,
|
|
} from '@headlessui/vue';
|
|
import {
|
|
HomeIcon,
|
|
Bars3Icon,
|
|
ChevronDownIcon,
|
|
XMarkIcon,
|
|
} from '@heroicons/vue/24/outline';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useUserStore } from '../../store/user.store';
|
|
import UserPill from './UserPill.vue';
|
|
import Building from './Building.vue';
|
|
import { useBuildingStore } from '../../store/building.store';
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
const userStore = useUserStore();
|
|
const buildingsStore = useBuildingStore();
|
|
const { user } = storeToRefs(userStore);
|
|
const { buildings } = storeToRefs(buildingsStore);
|
|
|
|
onMounted(() => {
|
|
buildingsStore.getBuildings();
|
|
});
|
|
</script>
|