feat: user switch on mobile (#160)

zio/stable
三咲智子 Kevin Deng 2022-11-27 19:16:27 +08:00 committed by GitHub
parent e380e7d52c
commit 424c7cd529
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 53 additions and 12 deletions

View File

@ -2,17 +2,20 @@
defineProps<{ defineProps<{
back?: boolean back?: boolean
}>() }>()
const nav = ref<HTMLDivElement>()
</script> </script>
<template> <template>
<div relative> <div relative>
<div <div
ref="nav"
sticky top-0 z10 sticky top-0 z10
border="b base" bg-base border="b base" bg-base
:class="isZenMode ? 'op0 hover:op100 transition duration-300' : ''" :class="isZenMode ? 'op0 hover:op100 transition duration-300' : ''"
> >
<div flex justify-between px5 py4> <div flex justify-between px5 py4>
<div flex gap-3> <div flex gap-3 items-center>
<NuxtLink v-if="back" flex="~ gap1" items-center btn-text p-0 @click="$router.go(-1)"> <NuxtLink v-if="back" flex="~ gap1" items-center btn-text p-0 @click="$router.go(-1)">
<div i-ri-arrow-left-line /> <div i-ri-arrow-left-line />
</NuxtLink> </NuxtLink>
@ -21,16 +24,7 @@ defineProps<{
</div> </div>
<div flex items-center> <div flex items-center>
<slot name="actions" /> <slot name="actions" />
<template v-if="currentUser"> <NavUser v-if="isSmallScreen" :nav="nav" />
<NuxtLink md:hidden :to="`/@${currentUser.account?.username}`">
<AccountAvatar :account="currentUser.account" h="1.5em" />
</NuxtLink>
</template>
<template v-else>
<button md-hidden btn-solid text-sm px-2 py-1 text-center @click="openSigninDialog()">
Sign in
</button>
</template>
</div> </div>
</div> </div>
<slot name="header" /> <slot name="header" />

View File

@ -0,0 +1,47 @@
<script setup lang="ts">
import type { ComponentPublicInstance } from 'vue'
const avatar = ref<ComponentPublicInstance>()
const switcher = ref()
const router = useRouter()
const goProfile = () => {
router.push(`/@${currentUser.value!.account.username}`)
}
let showSwitcher = $ref(false)
onLongPress(avatar, () => {
showSwitcher = true
})
onClickOutside(avatar, () => {
showSwitcher = false
}, { ignore: [switcher] })
</script>
<template>
<VDropdown
v-if="currentUser"
v-model:shown="showSwitcher"
:triggers="[]"
:auto-hide="false"
>
<div style="-webkit-touch-callout: none;">
<AccountAvatar
ref="avatar"
:account="currentUser.account"
h="2em"
:draggable="false"
@click.stop="goProfile"
/>
</div>
<template #popper>
<UserSwitcher ref="switcher" />
</template>
</VDropdown>
<button v-else btn-solid text-sm px-2 py-1 text-center @click="openSigninDialog()">
Sign in
</button>
</template>

View File

@ -13,7 +13,7 @@
</slot> </slot>
</div> </div>
</aside> </aside>
<NavBottom v-if="isSmallScreen" md:hidden /> <NavBottom v-if="isSmallScreen" />
<div class="w-full mb14 md:(w-2/4 mb0) min-h-screen" border="l r base"> <div class="w-full mb14 md:(w-2/4 mb0) min-h-screen" border="l r base">
<slot /> <slot />
</div> </div>