feat: 💄 Refresh mobile navbar styles

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>

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">
+        <NuxtLink href="/notifications" class="w-full">
-            <iconify-icon icon="tabler:bell" class="text-2xl" />
+            <ButtonsMobileNavbarButton icon="tabler:bell" text="Notifications" />
-            <span class="text-xs">Notifications</span>
         </NuxtLink>
-        <button v-if="$pwa?.needRefresh"
+        <ButtonsMobileNavbarButton v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker(true)"
-            class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-primary-600"
+            icon="tabler:refresh" text="Update" />
-            @click="$pwa?.updateServiceWorker(true)">
-            <iconify-icon icon="tabler:refresh" class="text-2xl" />
-            <span class="text-xs">Update</span>
-        </button>
-
         <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">
+            <ButtonsMobileNavbarButton icon="tabler:user" text="Account" />
-                <iconify-icon icon="tabler:user" class="text-2xl" />
-                <span class="text-xs">Account</span>
-            </button>
         </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>

nuxt.config.ts

@@ -624,7 +624,7 @@ export default defineNuxtConfig({
         url: "https://social.lysand.org",
     },
     devtools: {
-        enabled: true,
+        enabled: false,
 
         timeline: {
             enabled: true,