💄 Revamp tab bar

Author: nwingt

components/AppTabBar.vue

@@ -1,43 +1,62 @@
 <template>
-  <nav class="bg-white dark:bg-theme-black border-t border-muted fixed bottom-0 left-0 right-0 pb-safe">
-    <ul class="flex justify-around items-center w-full max-w-md min-h-14 mx-auto">
-      <li
+  <nav class="fixed inset-x-0 bottom-0 z-40 pb-safe pointer-events-none">
+    <div
+      :class="[
+        'flex',
+        'items-center',
+        'justify-center',
+        'gap-1',
+
+        'w-fit',
+        'mx-auto',
+        'mb-2',
+        'p-1.5',
+
+        'bg-(--ui-bg)/80',
+        'backdrop-blur-sm',
+        'rounded-full',
+        'ring-1 ring-(--ui-border)',
+        'pointer-events-auto',
+      ]"
+    >
+      <template
         v-for="item in menuItems"
-        :key="item.label"
-        class="flex-1"
+        :key="item.key"
       >
-        <NuxtLink
+        <UButton
           v-if="item.key === 'account' && hasLoggedIn"
-          class="relative flex justify-center items-center"
+          class="justify-center min-w-24 h-14 rounded-full"
+          :variant="item.isActive ? 'solid' : 'ghost'"
+          color="neutral"
           :to="item.to"
+          size="xl"
+          :aria-label="item.label"
         >
-          <UAvatar
-            :class="[
-              'bg-white',
-              item.isActive
-                ? 'border-2 border-theme-black dark:border-theme-white'
-                : 'border border-muted',
-            ]"
-            :src="user?.avatar"
-            :alt="user?.displayName"
-            icon="i-material-symbols-person-2-rounded"
-            size="lg"
-          />
-          <UserAvatarPlusBadge
-            v-if="user?.isLikerPlus"
-            :is-inverted="item.isActive"
-          />
-        </NuxtLink>
+          <template #leading>
+            <div class="relative">
+              <UAvatar
+                class="bg-white ring-1 ring-default border border-default"
+                :src="user?.avatar"
+                :alt="user?.displayName"
+                icon="i-material-symbols-person-2-rounded"
+                size="md"
+              />
+              <UserAvatarPlusBadge
+                v-if="user?.isLikerPlus"
+                :color="item.isActive ? 'secondary' : 'primary'"
+              />
+            </div>
+          </template>
+        </UButton>
         <UButton
           v-else
-          class="flex-col gap-0"
+          class="flex-col gap-0 min-w-24 rounded-full"
           :label="item.label"
           :icon="item.icon"
-          :color="item.isActive ? 'primary' : 'neutral'"
-          variant="link"
+          :variant="item.isActive ? 'solid' : 'ghost'"
+          color="neutral"
           :to="item.to"
           size="xl"
-          block
           :ui="{ label: 'text-xs' }"
         >
           <template
@@ -50,8 +69,8 @@
             />
           </template>
         </UButton>
-      </li>
-    </ul>
+      </template>
+    </div>
   </nav>
 </template>
 

components/UserAvatarPlusBadge.vue

@@ -5,13 +5,11 @@
       verticalAlign === 'top' ? 'top-0 -translate-y-1/2' : 'bottom-0 translate-y-1/2',
     ]"
     size="xs"
-    :variant="isInverted ? 'solid' : 'outline'"
+    variant="outline"
     :ui="{
       base: [
         'rounded-full',
-        isInverted
-          ? 'bg-theme-black dark:bg-theme-cyan text-theme-cyan dark:text-theme-black'
-          : 'bg-theme-white dark:bg-theme-black',
+        colorClass,
         'font-bold',
       ],
     }"
@@ -21,11 +19,22 @@
 </template>
 
 <script setup lang="ts">
-withDefaults(defineProps<{
-  isInverted?: boolean
+const props = withDefaults(defineProps<{
+  color?: 'primary' | 'secondary' | 'neutral'
   verticalAlign?: 'top' | 'bottom'
 }>(), {
-  isInverted: false,
+  color: 'primary',
   verticalAlign: 'bottom',
 })
+
+const colorClass = computed(() => {
+  switch (props.color) {
+    case 'secondary':
+      return 'bg-theme-cyan text-theme-black ring-theme-black'
+    case 'neutral':
+      return 'bg-theme-white dark:bg-theme-black'
+    default:
+      return 'bg-theme-black text-theme-cyan'
+  }
+})
 </script>

pages/account/index.vue

@@ -15,7 +15,7 @@
         <UserAvatarPlusBadge
           v-if="user?.isLikerPlus"
           vertical-align="top"
-          :is-inverted="true"
+          color="primary"
         />
         <div class="absolute -bottom-1 -right-1 rounded-full bg-(--app-bg)">
           <UButton