feat: add mobile navigation (#78)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>

components/main/MainContent.vue

@@ -14,8 +14,13 @@
             </NuxtLink>
           </slot>
         </div>
-        <div flex>
+        <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>
         </div>
       </div>
       <slot name="header" />

components/nav/NavBottom.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <nav h-14 fixed bottom-0 left-0 right-0 z-50 border="t base" backdrop="blur-10px brightness-120 dark:brightness-80" flex flex-row>
+    <template v-if="currentUser">
+      <NuxtLink to="/home" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1>
+        <div i-ri:home-5-line />
+      </NuxtLink>
+      <NuxtLink to="/notifications" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1>
+        <div i-ri:notification-4-line />
+      </NuxtLink>
+    </template>
+    <NuxtLink to="/explore" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1>
+      <div i-ri:hashtag />
+    </NuxtLink>
+    <NuxtLink group to="/public/local" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1>
+      <div i-ri:group-2-line />
+    </NuxtLink>
+    <NuxtLink to="/public" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1>
+      <div i-ri:earth-line />
+    </NuxtLink>
+    <template v-if="currentUser">
+      <NuxtLink to="/conversations" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1>
+        <div i-ri:at-line />
+      </NuxtLink>
+    </template>
+  </nav>
+</template>

components/status/StatusAccountDetails.vue

@@ -10,7 +10,7 @@ const accountHandle = $(useAccountHandle(account))
 </script>
 
 <template>
-  <NuxtLink :to="link ? getAccountPath(account) : undefined" flex="~ row wrap" gap-x-2 items-center>
+  <NuxtLink :to="link ? getAccountPath(account) : undefined" flex flex-col md:flex-row md:gap-2 md:items-center>
     <ContentRichSetup font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
     <p op35 text-sm>
       {{ accountHandle }}

layouts/default.vue

@@ -23,6 +23,7 @@
           </slot>
         </div>
       </div>
+      <NavBottom md:hidden />
       <div class="w-full md:w-2/4 min-h-screen" border="l r base">
         <slot />
       </div>