feat: user switch on mobile (#160)

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" />

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>

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>