88 lines
2.5 KiB
Vue
88 lines
2.5 KiB
Vue
<template>
|
|
<header
|
|
class="flex items-center justify-between border-b border-divider px-6 py-4 bg-primary shadow-lg"
|
|
>
|
|
<div class="flex items-center">
|
|
<HoppButtonSecondary
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
title="Open navigation"
|
|
:icon="IconMenu"
|
|
class="transform !md:hidden mr-2"
|
|
@click="isOpen = true"
|
|
/>
|
|
<HoppButtonSecondary
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
:title="isExpanded ? 'Collapse sidebar' : 'Expand sidebar'"
|
|
:icon="isExpanded ? IconSidebarClose : IconSidebarOpen"
|
|
class="transform"
|
|
@click="expandSidebar"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<div v-if="currentUser" class="relative">
|
|
<tippy
|
|
interactive
|
|
trigger="click"
|
|
theme="popover"
|
|
arrow
|
|
:on-shown="() => tippyActions!.focus()"
|
|
>
|
|
<HoppSmartPicture
|
|
v-if="currentUser.photoURL"
|
|
v-tippy="{
|
|
theme: 'tooltip',
|
|
}"
|
|
:url="currentUser.photoURL"
|
|
:alt="currentUser.displayName ?? 'No Name'"
|
|
:title="currentUser.displayName ?? currentUser.email ?? 'No Name'"
|
|
/>
|
|
<HoppSmartPicture
|
|
v-else
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
:title="currentUser.displayName ?? currentUser.email ?? 'No Name'"
|
|
:initial="currentUser.displayName ?? currentUser.email"
|
|
/>
|
|
<template #content="{ hide }">
|
|
<div
|
|
ref="tippyActions"
|
|
class="flex flex-col focus:outline-none"
|
|
tabindex="0"
|
|
@keyup.escape="hide()"
|
|
>
|
|
<div>
|
|
<AppLogout ref="logout" @click="hide()" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</tippy>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { TippyComponent } from 'vue-tippy';
|
|
import { useReadonlyStream } from '~/composables/stream';
|
|
import { useSidebar } from '~/composables/useSidebar';
|
|
import { auth } from '~/helpers/auth';
|
|
import IconMenu from '~icons/lucide/menu';
|
|
import IconSidebarOpen from '~icons/lucide/sidebar-open';
|
|
import IconSidebarClose from '~icons/lucide/sidebar-close';
|
|
|
|
const { isOpen, isExpanded } = useSidebar();
|
|
|
|
const currentUser = useReadonlyStream(
|
|
auth.getProbableUserStream(),
|
|
auth.getProbableUser()
|
|
);
|
|
|
|
const expandSidebar = () => {
|
|
isExpanded.value = !isExpanded.value;
|
|
};
|
|
|
|
// Template refs
|
|
const tippyActions = ref<TippyComponent | null>(null);
|
|
</script>
|