1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-24 07:46:30 +00:00
homebox/frontend/components/App/Header.vue

116 lines
2.8 KiB
Vue
Raw Normal View History

2022-09-01 22:32:03 +00:00
<script lang="ts" setup>
import { useAuthStore } from '~~/stores/auth';
const authStore = useAuthStore();
const api = useUserApi();
async function logout() {
const { error } = await authStore.logout(api);
if (error) {
return;
}
navigateTo('/');
}
const links = [
{
name: 'Home',
href: '/home',
},
{
name: 'Logout',
action: logout,
last: true,
},
];
2022-09-02 01:52:40 +00:00
const modals = reactive({
2022-09-02 17:46:20 +00:00
item: false,
2022-09-02 01:52:40 +00:00
location: false,
label: false,
});
2022-09-01 22:32:03 +00:00
const dropdown = [
{
2022-09-02 17:46:20 +00:00
name: 'Item / Asset',
2022-09-01 22:32:03 +00:00
action: () => {
2022-09-02 17:46:20 +00:00
modals.item = true;
2022-09-01 22:32:03 +00:00
},
},
{
2022-09-02 17:46:20 +00:00
name: 'Location',
2022-09-02 01:52:40 +00:00
action: () => {
2022-09-02 17:46:20 +00:00
modals.location = true;
2022-09-02 01:52:40 +00:00
},
2022-09-01 22:32:03 +00:00
},
{
name: 'Label',
2022-09-02 01:52:40 +00:00
action: () => {
modals.label = true;
},
2022-09-01 22:32:03 +00:00
},
];
</script>
<template>
2022-09-02 01:52:40 +00:00
<!--
Confirmation Modal is a singleton used by all components so we render
it here to ensure it's always available. Possibly could move this further
up the tree
-->
2022-09-01 22:32:03 +00:00
<ModalConfirm />
2022-09-02 17:46:20 +00:00
<ItemCreateModal v-model="modals.item" />
2022-09-02 01:52:40 +00:00
<LabelCreateModal v-model="modals.label" />
<LocationCreateModal v-model="modals.location" />
2022-09-03 09:17:57 +00:00
<div class="bg-neutral absolute shadow-xl top-0 h-[50vh] max-h-96 sm:h-[28vh] -z-10 w-full"></div>
<BaseContainer is="header" class="py-6 max-w-none">
<BaseContainer>
<h2 class="mt-1 text-4xl font-bold tracking-tight text-neutral-content sm:text-5xl lg:text-6xl flex">
HomeB
<AppLogo class="w-12 -mb-4" style="padding-left: 3px; padding-right: 2px" />
x
</h2>
<div class="ml-1 mt-2 text-lg text-neutral-content/75 space-x-2">
<template v-for="link in links">
<NuxtLink
v-if="!link.action"
class="hover:text-base-content transition-color duration-200 italic"
:to="link.href"
>
{{ link.name }}
</NuxtLink>
<button
for="location-form-modal"
v-else
@click="link.action"
class="hover:text-base-content transition-color duration-200 italic"
>
{{ link.name }}
</button>
<span v-if="!link.last"> / </span>
</template>
</div>
<div class="flex mt-6">
<div class="dropdown">
<label tabindex="0" class="btn btn-primary btn-sm">
<span>
<Icon name="mdi-plus" class="mr-1 -ml-1" />
</span>
Create
</label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
<li v-for="btn in dropdown">
<button @click="btn.action">
{{ btn.name }}
</button>
</li>
</ul>
</div>
2022-09-01 22:32:03 +00:00
</div>
2022-09-03 09:17:57 +00:00
</BaseContainer>
2022-09-01 22:32:03 +00:00
</BaseContainer>
</template>