72 lines
2.3 KiB
Vue
72 lines
2.3 KiB
Vue
<template>
|
|
<div class="relative border-b-2 border-gray-100 bg-white">
|
|
<div class="mx-auto max-w-7xl px-5">
|
|
<div
|
|
class="flex items-center justify-between py-5 md:justify-start md:space-x-10"
|
|
>
|
|
<div class="flex w-0 justify-start md:mr-4">
|
|
<router-link to="/"><HomeIcon class="h-8 w-8" /></router-link>
|
|
</div>
|
|
|
|
<div class="-my-2 -mr-2 md:hidden">
|
|
<button
|
|
type="button"
|
|
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-indigo-500"
|
|
aria-expanded="false"
|
|
>
|
|
<span class="sr-only">Open menu</span>
|
|
<Bars3Icon class="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
|
|
<nav class="hidden space-x-10 md:flex">
|
|
<Dropdown title="My Buildings">
|
|
<div class="relative bg-white pt-4 pb-4 sm:gap-5">
|
|
<template v-for="building of buildings">
|
|
<Building :building="building" />
|
|
</template>
|
|
</div>
|
|
</Dropdown>
|
|
<button
|
|
type="button"
|
|
:class="[
|
|
'text-gray-500',
|
|
'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>Groups</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<div class="hidden items-center justify-end md:flex md:flex-1 lg:w-0">
|
|
<UserPill :user="user" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
HomeIcon,
|
|
Bars3Icon,
|
|
ChevronDownIcon,
|
|
UserIcon,
|
|
} from '@heroicons/vue/24/outline';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useUserStore } from '../../store/user.store';
|
|
import UserPill from './UserPill.vue';
|
|
import Dropdown from './Dropdown.vue';
|
|
import Building from './Building.vue';
|
|
import { useBuildingStore } from '../../store/building.store';
|
|
import { onMounted } from 'vue';
|
|
const userStore = useUserStore();
|
|
const buildingsStore = useBuildingStore();
|
|
const { user } = storeToRefs(userStore);
|
|
const { buildings } = storeToRefs(buildingsStore);
|
|
|
|
onMounted(() => {
|
|
buildingsStore.getBuildings();
|
|
});
|
|
</script>
|