homemanager-fe/src/components/header/Header.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>