marco/contexted-v3
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

fix jumpy safari

Browse Source
This commit is contained in:
Marco Crapts
2023-05-21 13:28:02 +02:00
parent b7c38a8b2a
commit 7eeedd0eeb
5 changed files with 41 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/TopBar.vue
View File

@@ -11,6 +11,8 @@ const emit = defineEmits<{
toggleSideBar: []
}>()
const searchActive = ref(false)
const signOut = async (close: () => Promise<boolean>) => {
await firebaseSignOut()
close()
@@ -20,9 +22,15 @@ const authUI: any = inject('firebaseAuthUI')
const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
</script>
<template>
<div class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
<div
class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary"
:class="searchActive && 'search-active'"
>
<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'">
<div
class="flex items-center pl-3 search-active-hide"
:class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"
>
<Hamburger
:side-bar-collapsed="props.sideBarCollapsed"
@toggle-side-bar="emit('toggleSideBar')"
@@ -35,16 +43,16 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
</div>
<div class="flex h-full flex-grow flex-row items-center gap-2 pl-5 pr-3">
<template v-if="initialized">
<SearchBar />
<SearchBar @active="(active) => (searchActive = active)" />
<button
class="btn-outline btn-sm btn py-1 text-white"
class="btn-outline btn-sm btn py-1 text-white search-active-hide"
@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>
<button class="btn-outline btn-sm btn py-1 text-white search-active-hide" @click="open">Sign in</button>
</template>
<template #title>Sign in</template>
<template #default="{ close }">
@@ -55,7 +63,7 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
</template>
</Modal>
<template v-else-if="user">
<div class="dropdown-end dropdown">
<div class="dropdown-end dropdown search-active-hide">
<label tabindex="0" class="btn-outline btn-sm btn py-1 text-white">
<i class="fa-fw fa-solid fa-user-gear" />
</label>
@@ -88,7 +96,7 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
</div>
</div>
</template>
<style lang="css">
<style lang="scss">
#logo {
@apply cursor-pointer transition-all duration-200 hover:text-primary;
}
@@ -98,4 +106,10 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
.btn-outline {
@apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
}
.search-active {
.search-active-hide {
@apply max-sm:hidden;
}
}
</style>