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