From 0c46cb2dc228d8f98d619c3b35e3c9782f4d6821 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Tue, 18 Jun 2024 20:39:18 -1000
Subject: [PATCH] feat: :lipstick: Refresh mobile navbar styles

---
 components/buttons/mobile-navbar-button.vue | 14 ++++++++++
 components/sidebars/navigation.vue          | 30 ++++++++-------------
 nuxt.config.ts                              |  2 +-
 3 files changed, 26 insertions(+), 20 deletions(-)
 create mode 100644 components/buttons/mobile-navbar-button.vue

diff --git a/components/buttons/mobile-navbar-button.vue b/components/buttons/mobile-navbar-button.vue
new file mode 100644
index 0000000..2080180
--- /dev/null
+++ b/components/buttons/mobile-navbar-button.vue
@@ -0,0 +1,14 @@
+<template>
+    <ButtonsBase
+        class="hover:bg-white/5 text-xs max-w-full w-full gap-1 h-full !px-0 flex flex-col items-center justify-center">
+        <iconify-icon :icon="icon" class="size-6" width="none" />
+        <span class="text-xs hidden md:inline">{{ text }}</span>
+    </ButtonsBase>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+    icon: string;
+    text: string;
+}>();
+</script>
\ No newline at end of file
diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index fc81518..3a8946e 100644
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@@ -71,14 +71,15 @@
     </aside>
     <!-- Mobile bottom navbar -->
     <nav
-        :class="['fixed bottom-0 left-0 right-0 z-20 md:hidden grid gap-3 p-2 *:shadow-xl bg-dark-900 ring-1 ring-white/10 text-gray-200', !!identity ? 'grid-cols-4' : 'grid-cols-3']">
+        :class="['fixed bottom-0 left-0 right-0 z-20 h-16 md:hidden grid gap-3 p-2 *:shadow-xl bg-dark-900 ring-1 ring-white/10 text-gray-200', !!identity ? 'grid-cols-4' : 'grid-cols-3']">
 
         <DropdownsAdaptiveDropdown>
             <template #button>
-                <button class="flex w-full flex-col items-center justify-center p-2 rounded">
+                <ButtonsMobileNavbarButton icon="tabler:home" text="Timelines" />
+                <!-- <button class="flex w-full flex-col items-center justify-center p-2 rounded">
                     <iconify-icon icon="tabler:home" class="text-2xl" />
                     <span class="text-xs">Timelines</span>
-                </button>
+                </button> -->
             </template>
 
             <template #items>
@@ -91,28 +92,19 @@
                 </Menu.Item>
             </template>
         </DropdownsAdaptiveDropdown>
-        <NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded">
-            <iconify-icon icon="tabler:bell" class="text-2xl" />
-            <span class="text-xs">Notifications</span>
+        <NuxtLink href="/notifications" class="w-full">
+            <ButtonsMobileNavbarButton icon="tabler:bell" text="Notifications" />
         </NuxtLink>
-        <button v-if="$pwa?.needRefresh"
-            class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-primary-600"
-            @click="$pwa?.updateServiceWorker(true)">
-            <iconify-icon icon="tabler:refresh" class="text-2xl" />
-            <span class="text-xs">Update</span>
-        </button>
-
+        <ButtonsMobileNavbarButton v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker(true)"
+            icon="tabler:refresh" text="Update" />
         <SidebarsAccountPicker v-else @sign-in="signIn().finally(() => loadingAuth = false)"
             @sign-out="id => signOut(id).finally(() => loadingAuth = false)">
-            <button class="flex flex-col w-full items-center justify-center p-2 rounded">
-                <iconify-icon icon="tabler:user" class="text-2xl" />
-                <span class="text-xs">Account</span>
-            </button>
+            <ButtonsMobileNavbarButton icon="tabler:user" text="Account" />
         </SidebarsAccountPicker>
         <button @click="compose" v-if="identity"
-            class="flex flex-col items-center justify-center p-2 rounded bg-gradient-to-tr from-primary-300/70 via-purple-300/70 to-indigo-400/70">
+            class="flex flex-col items-center justify-center p-2 rounded bg-gradient-to-tr from-[theme(colors.primary.300/70%)] via-purple-300/70 to-indigo-400/70">
             <iconify-icon icon="tabler:writing" class="text-2xl" />
-            <span class="text-xs">Compose</span>
+            <span class="text-xs hidden md:inline">Compose</span>
         </button>
     </nav>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6bc592f..03527d1 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -624,7 +624,7 @@ export default defineNuxtConfig({
         url: "https://social.lysand.org",
     },
     devtools: {
-        enabled: true,
+        enabled: false,
 
         timeline: {
             enabled: true,