haex/haex-hub-mirror
1
0
Fork 0
mirror of https://github.com/haexhub/haex-hub.git synced 2025-12-19 23:30:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

added settings page, cleanup

Browse Source
This commit is contained in:
Martin Drechsel
2025-05-19 12:29:37 +02:00
parent 6a1351752b
commit 0699dbef31
35 changed files with 889 additions and 653 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
src/layouts/app.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="w-full h-full flex flex-col min-w-min">
<div class="w-full h-full flex flex-col min-w-min relative overflow-hidden">
<nav
class="navbar bg-base-100 rounded-b max-sm:shadow border-b border-base-content/25 sm:z-20 relative px-2"
>
@ -14,7 +14,11 @@
ref="sidebarToogleRef"
>
<Icon
:name="isVisible ? 'tabler:layout-sidebar' : 'tabler:layout-sidebar-filled'"
:name="
isVisible
? 'tabler:layout-sidebar-filled'
: 'tabler:layout-sidebar'
"
size="28"
/>
</button>
@ -25,9 +29,12 @@
class="link text-base-content link-neutral text-xl font-semibold no-underline"
:to="{ name: 'vaultOverview' }"
>
<UiTextGradient class="text-nowrap">Haex Hub</UiTextGradient>
<UiTextGradient class="text-nowrap">{{
currentVaultName
}}</UiTextGradient>
</NuxtLinkLocale>
</div>
<div class="navbar-end flex items-center gap-4 me-4">
<div
class="dropdown relative inline-flex [--auto-close:inside] [--offset:8] [--placement:bottom-end]"
@ -45,7 +52,9 @@
v-show="notifications.length"
class="indicator-item bg-error size-2 rounded-full text-sm"
></span>
<span class="icon-[tabler--bell] text-base-content size-[1.375rem]"></span>
<span
class="icon-[tabler--bell] text-base-content size-[1.375rem]"
></span>
</div>
</button>
<div
@ -56,7 +65,7 @@
>
<div class="dropdown-header justify-center">
<h6 class="text-base-content text-base">
{{ t("notifications.label") }}
{{ t('notifications.label') }}
</h6>
</div>
<div
@ -70,7 +79,10 @@
:src="notification.image"
:alt="notification.alt ?? 'notification avatar'"
/>
<Icon v-else-if="notification.icon" :name="notification.icon" />
<Icon
v-else-if="notification.icon"
:name="notification.icon"
/>
</div>
</div>
<div class="w-60">
@ -85,80 +97,16 @@
</div>
<a href="#" class="dropdown-footer justify-center gap-1">
<span class="icon-[tabler--eye] size-4"></span>
{{ t("notifications.view_all") }}
{{ t('notifications.view_all') }}
</a>
</div>
</div>
<div
class="dropdown relative inline-flex [--auto-close:inside] [--offset:8] [--placement:bottom-end]"
>
<button
id="dropdown-scrollable"
type="button"
class="dropdown-toggle flex items-center"
aria-haspopup="menu"
aria-expanded="false"
aria-label="Dropdown"
>
<div class="avatar">
<div class="size-9.5 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar 1" />
</div>
</div>
</button>
<ul
class="dropdown-menu dropdown-open:opacity-100 hidden min-w-60"
role="menu"
aria-orientation="vertical"
aria-labelledby="dropdown-avatar"
>
<li class="dropdown-header gap-2">
<div class="avatar">
<div class="w-10 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<div>
<h6 class="text-base-content text-base font-semibold">John Doe</h6>
<small class="text-base-content/50">Admin</small>
</div>
</li>
<li>
<a class="dropdown-item" href="#">
<span class="icon-[tabler--user]"></span>
My Profile
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<span class="icon-[tabler--settings]"></span>
Settings
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<span class="icon-[tabler--receipt-rupee]"></span>
Billing
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<span class="icon-[tabler--help-triangle]"></span>
FAQs
</a>
</li>
<li class="dropdown-footer gap-2">
<button class="btn btn-error btn-soft btn-block" @click="onVaultCloseAsync">
<span class="icon-[tabler--logout]"></span>
{{ t("vault.close") }}
</button>
</li>
</ul>
</div>
<HaexMenuMain />
</div>
</nav>
<div class="flex h-full">
<div class="flex h-full overflow-hidden">
<aside
id="sidebar"
class="sm:shadow-none transition-all h-full overflow-hidden border-r border-base-300"
@ -179,7 +127,7 @@
</div>
</aside>
<main class="w-full">
<main class="w-full h-full overflow-scroll">
<NuxtPage :transition="{ name: 'fade' }" />
</main>
</div>
@ -187,32 +135,19 @@
</template>
<script setup lang="ts">
import { NuxtLinkLocale } from "#components";
const { t } = useI18n()
const { t } = useI18n();
const { menu, isVisible } = storeToRefs(useSidebarStore());
const sidebarToogleRef = useTemplateRef("sidebarToogleRef");
const { currentVaultName } = storeToRefs(useVaultStore())
/* onClickOutside(sidebarToogleRef, () => {
if (currentScreenSize.value === "xs") {
isVisible.value = false;
}
}); */
const { notifications } = storeToRefs(useNotificationStore());
const { menu, isVisible } = storeToRefs(useSidebarStore())
const { notifications } = storeToRefs(useNotificationStore())
const { extensionLinks } = storeToRefs(useExtensionsStore())
const { isActive } = useExtensionsStore();
const { closeAsync } = useVaultStore();
const { currentScreenSize } = storeToRefs(useUiStore());
const onExtensionSelectAsync = async (id: string) => {};
const { extensionLinks } = storeToRefs(useExtensionsStore());
const toogleSidebar = () => {
isVisible.value = !isVisible.value;
};
const onVaultCloseAsync = async () => {
await closeAsync();
await navigateTo(useLocalePath()({ name: "vaultOpen" }));
};
isVisible.value = !isVisible.value
}
</script>
<i18n lang="yaml">
@ -223,7 +158,7 @@ de:
vault:
close: Vault schließen
sidebar:
close: Sidebar schließen
close: Sidebar ausblenden
show: Sidebar anzeigen
en:
notifications: