115 lines
3.2 KiB
Vue
115 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { addNote, setActiveNote, rootNote } from '@/composables/useNotes'
|
|
import { user } from '@/composables/useFirebase'
|
|
import { initialized } from '@/composables/useFirebase'
|
|
|
|
const loading = inject<boolean>('loading')
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
sideBarCollapsed: boolean
|
|
height?: number
|
|
}>(),
|
|
{
|
|
height: 52
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
toggleSideBar: []
|
|
}>()
|
|
|
|
const searchActive = ref<boolean>(false)
|
|
|
|
// const authUI: any = inject('firebaseAuthUI')
|
|
// const authPending = ref<boolean>(authUI.isPendingRedirect())
|
|
|
|
const handleSignIn = async (close: () => Promise<boolean>) => {
|
|
await close()
|
|
// authPending.value = false
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="z-[500] flex items-end bg-primary" :class="searchActive && 'search-active'">
|
|
<div
|
|
class="mx-auto flex w-full max-w-app items-center py-2.5 text-white"
|
|
:style="{ height: `${props.height}px` }"
|
|
>
|
|
<div
|
|
class="search-active-hide flex items-center pl-3"
|
|
:class="sideBarCollapsed ? 'w-fit' : 'max-sm:w-fit md:w-sidebar md:pr-3'"
|
|
>
|
|
<Hamburger
|
|
:side-bar-collapsed="props.sideBarCollapsed"
|
|
@toggle-side-bar="emit('toggleSideBar')"
|
|
/>
|
|
<Logo
|
|
class="ml-auto pl-5 text-2xl hover:drop-shadow"
|
|
id="logo"
|
|
@click="setActiveNote(rootNote?.id)"
|
|
/>
|
|
</div>
|
|
<div class="flex h-full flex-grow flex-row items-center gap-2 pl-5 pr-3">
|
|
<template v-if="!loading">
|
|
<SearchBar @active="(active) => (searchActive = active)" />
|
|
<UIButton
|
|
size="sm"
|
|
variant="outline"
|
|
class="search-active-hide topbar-button text-white"
|
|
@click="addNote('Untitled new note', '', true)"
|
|
>
|
|
<i class="fa-fw fa-solid fa-plus-circle scale-[115%]" />
|
|
</UIButton>
|
|
<UIModal v-if="initialized && !user">
|
|
<template #activator="{ open }">
|
|
<UIButton
|
|
size="sm"
|
|
variant="outline"
|
|
class="search-active-hide topbar-button py-1 text-white"
|
|
@click="open"
|
|
>
|
|
Sign in
|
|
</UIButton>
|
|
</template>
|
|
<template #title>Sign in</template>
|
|
<template #default="{ close }">
|
|
<Auth @signedIn="handleSignIn(close)" />
|
|
</template>
|
|
<template #actions="{ close }">
|
|
<UIButton size="sm" @click="close">Close</UIButton>
|
|
</template>
|
|
</UIModal>
|
|
<Settings v-else-if="user" />
|
|
</template>
|
|
<SkeletonTopBar v-else />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
#logo {
|
|
@apply cursor-pointer transition-all duration-200 active:text-primary;
|
|
}
|
|
@media (hover: hover) and (pointer: fine) {
|
|
#logo:hover {
|
|
text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white;
|
|
@apply text-primary;
|
|
}
|
|
}
|
|
#logo:active {
|
|
text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white;
|
|
}
|
|
.topbar-button {
|
|
&:active {
|
|
@apply border-white bg-white text-primary;
|
|
}
|
|
@apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
|
|
}
|
|
|
|
.search-active {
|
|
.search-active-hide {
|
|
@apply max-sm:hidden;
|
|
}
|
|
}
|
|
</style>
|