101 lines
3.6 KiB
Vue
101 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { addNote, setActiveNote, rootNote } from '@/composables/useNotes'
|
|
import { user, signOut as firebaseSignOut } from '@/composables/useFirebase'
|
|
import { initialized } from '@/composables/useFirebase'
|
|
import firebase from 'firebase/compat/app'
|
|
import * as firebaseui from 'firebaseui'
|
|
|
|
const props = defineProps<{
|
|
sideBarCollapsed: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
toggleSideBar: []
|
|
}>()
|
|
|
|
const signOut = async (close: () => Promise<boolean>) => {
|
|
await firebaseSignOut()
|
|
close()
|
|
}
|
|
|
|
const authModalInitialStateOpen = ref(
|
|
(
|
|
firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
|
|
).isPendingRedirect()
|
|
)
|
|
</script>
|
|
<template>
|
|
<div class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
|
|
<div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
|
|
<div class="flex items-center pl-3" :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar 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="initialized">
|
|
<SearchBar />
|
|
<button
|
|
class="btn-outline btn-sm btn py-1 text-white"
|
|
@click="addNote('Untitled new note', '', true)"
|
|
>
|
|
<i class="fas fa-plus-circle text-[1.1rem]" />
|
|
</button>
|
|
<Modal v-if="initialized && !user" :open="authModalInitialStateOpen">
|
|
<template #activator="{ open }">
|
|
<button class="btn-outline btn-sm btn py-1 text-white" @click="open">Sign in</button>
|
|
</template>
|
|
<template #default="{ close }">
|
|
<Auth @signedIn="close" />
|
|
</template>
|
|
<template #actions="{ close }">
|
|
<button class="btn-sm btn" @click="close">Close</button>
|
|
</template>
|
|
</Modal>
|
|
<template v-else-if="user">
|
|
<div class="dropdown-end dropdown">
|
|
<label tabindex="0" class="btn-outline btn-sm btn py-1 text-white">
|
|
<!-- {{ user.displayName || user.email }} -->
|
|
<i class="fa-fw fa-solid fa-user-gear" />
|
|
</label>
|
|
<ul
|
|
tabindex="0"
|
|
class="dropdown-content menu rounded-box menu-compact mt-1 w-52 bg-base-100 p-2 text-base-content shadow"
|
|
>
|
|
<Modal>
|
|
<template #activator="{ open }">
|
|
<li @click="open" class="text-base"><a><i class="fa-fw fa-solid fa-right-from-bracket" />Sign out</a></li>
|
|
</template>
|
|
<template #default>Are you sure want to signout?</template>
|
|
<template #actions="{ close }">
|
|
<button class="btn-sm btn" @click="close">Close</button>
|
|
<button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
|
|
</template>
|
|
</Modal>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<SkeletonTopBar v-else />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="css">
|
|
#logo {
|
|
@apply cursor-pointer transition-all duration-200 hover:text-primary;
|
|
}
|
|
#logo:hover {
|
|
text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white;
|
|
}
|
|
.btn-outline {
|
|
@apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
|
|
}
|
|
</style>
|