1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-29 10:06:37 +00:00
homebox/frontend/components/App/Header.vue

124 lines
3 KiB
Vue
Raw Normal View History

2022-09-01 22:32:03 +00:00
<script lang="ts" setup>
import { useAuthStore } from "~~/stores/auth";
2022-09-01 22:32:03 +00:00
const authStore = useAuthStore();
const api = useUserApi();
async function logout() {
const { error } = await authStore.logout(api);
if (error) {
return;
}
navigateTo("/");
2022-09-01 22:32:03 +00:00
}
const links = [
{
name: "Home",
href: "/home",
2022-09-01 22:32:03 +00:00
},
{
name: "Items",
href: "/items",
},
2022-09-01 22:32:03 +00:00
{
name: "Logout",
2022-09-01 22:32:03 +00:00
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 = [
{
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
},
},
{
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" />
<div class="bg-neutral absolute shadow-xl top-0 h-[20rem] max-h-96 -z-10 w-full"></div>
2022-09-03 09:17:57 +00:00
<BaseContainer cmp="header" class="py-6 max-w-none">
2022-09-03 09:17:57 +00:00
<BaseContainer>
<NuxtLink to="/home">
<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" />
x
</h2>
</NuxtLink>
2022-09-03 09:17:57 +00:00
<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"
:key="link.name"
2022-09-03 09:17:57 +00:00
class="hover:text-base-content transition-color duration-200 italic"
:to="link.href"
>
{{ link.name }}
</NuxtLink>
<button
v-else
:key="link.name + 'link'"
for="location-form-modal"
2022-09-03 09:17:57 +00:00
class="hover:text-base-content transition-color duration-200 italic"
@click="link.action"
2022-09-03 09:17:57 +00:00
>
{{ link.name }}
</button>
<span v-if="!link.last" :key="link.name"> / </span>
2022-09-03 09:17:57 +00:00
</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" :key="btn.name">
2022-09-03 09:17:57 +00:00
<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>