From 4505080ba8abf439d6c9061484236464cad6edd4 Mon Sep 17 00:00:00 2001
From: wheat <jacobrclevenger@gmail.com>
Date: Fri, 25 Nov 2022 03:13:35 -0500
Subject: [PATCH] feat: add mobile navigation (#78)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
---
 components/main/MainContent.vue            |  7 ++++-
 components/nav/NavBottom.vue               | 30 ++++++++++++++++++++++
 components/status/StatusAccountDetails.vue |  2 +-
 layouts/default.vue                        |  1 +
 4 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 components/nav/NavBottom.vue

diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index 870abf4a..337a402c 100644
--- a/components/main/MainContent.vue
+++ b/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" />
diff --git a/components/nav/NavBottom.vue b/components/nav/NavBottom.vue
new file mode 100644
index 00000000..08222ede
--- /dev/null
+++ b/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>
diff --git a/components/status/StatusAccountDetails.vue b/components/status/StatusAccountDetails.vue
index 43e07082..ef624ce9 100644
--- a/components/status/StatusAccountDetails.vue
+++ b/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 }}
diff --git a/layouts/default.vue b/layouts/default.vue
index 4fff2951..70b77c22 100644
--- a/layouts/default.vue
+++ b/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>