From 424c7cd529c7c311ca25e32bf29811ea7bc6a71a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sun, 27 Nov 2022 19:16:27 +0800
Subject: [PATCH] feat: user switch on mobile (#160)

---
 components/main/MainContent.vue | 16 ++++-------
 components/nav/NavUser.vue      | 47 +++++++++++++++++++++++++++++++++
 layouts/default.vue             |  2 +-
 3 files changed, 53 insertions(+), 12 deletions(-)
 create mode 100644 components/nav/NavUser.vue

diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index 2719175b..50969141 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -2,17 +2,20 @@
 defineProps<{
   back?: boolean
 }>()
+
+const nav = ref<HTMLDivElement>()
 </script>
 
 <template>
   <div relative>
     <div
+      ref="nav"
       sticky top-0 z10
       border="b base" bg-base
       :class="isZenMode ? 'op0 hover:op100 transition duration-300' : ''"
     >
       <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)">
             <div i-ri-arrow-left-line />
           </NuxtLink>
@@ -21,16 +24,7 @@ defineProps<{
         </div>
         <div flex items-center>
           <slot name="actions" />
-          <template v-if="currentUser">
-            <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>
+          <NavUser v-if="isSmallScreen" :nav="nav" />
         </div>
       </div>
       <slot name="header" />
diff --git a/components/nav/NavUser.vue b/components/nav/NavUser.vue
new file mode 100644
index 00000000..390b6511
--- /dev/null
+++ b/components/nav/NavUser.vue
@@ -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>
diff --git a/layouts/default.vue b/layouts/default.vue
index cb9c7021..eb9adeb1 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -13,7 +13,7 @@
           </slot>
         </div>
       </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">
         <slot />
       </div>