feat: ✨ Implement mobile navbar

components/navigation/mobile-navbar.vue

@@ -0,0 +1,31 @@
+<template>
+    <div
+        class="fixed md:hidden bottom-0 inset-x-0 border-t h-20 bg-background z-10 flex items-center justify-around *:p-7 *:w-full gap-6 p-6">
+        <Timelines>
+            <Button variant="ghost" size="icon">
+                <Home class="!size-6" />
+            </Button>
+        </Timelines>
+        <Button v-if="identity" :as="NuxtLink" href="/notifications" variant="ghost" size="icon">
+            <Bell class="!size-6" />
+        </Button>
+        <AccountSwitcher>
+            <Button variant="ghost" size="icon">
+                <User class="!size-6" />
+            </Button>
+        </AccountSwitcher>
+        <Button v-if="identity" variant="default" size="icon" :title="m.salty_aloof_turkey_nudge()"
+            @click="useEvent('composer:open')">
+            <Pen class="!size-6" />
+        </Button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { Bell, Home, Pen, User } from "lucide-vue-next";
+import * as m from "~/paraglide/messages.js";
+import { NuxtLink } from "#components";
+import AccountSwitcher from "../sidebars/account-switcher.vue";
+import { Button } from "../ui/button";
+import Timelines from "./timelines.vue";
+</script>

components/navigation/timelines.vue

@@ -0,0 +1,55 @@
+<template>
+    <Drawer>
+        <DrawerTrigger :as-child="true">
+            <slot />
+        </DrawerTrigger>
+        <DrawerContent>
+            <DrawerClose v-for="item in timelines.filter(
+                i => i.requiresLogin ? !!identity : true,
+            )" :key="item.name" :as-child="true">
+                <Button :as="NuxtLink" :href="item.url" variant="outline" size="lg" class="w-full">
+                    <component :is="item.icon" />
+                    {{ item.name }}
+                </Button>
+            </DrawerClose>
+            <DialogTitle class="sr-only">{{ m.trite_real_sawfish_drum() }}</DialogTitle>
+            <DialogDescription class="sr-only">{{ m.trite_real_sawfish_drum() }}</DialogDescription>
+        </DrawerContent>
+    </Drawer>
+</template>
+
+<script lang="ts" setup>
+import { BedSingle, Globe, House, MapIcon } from "lucide-vue-next";
+import * as m from "~/paraglide/messages.js";
+import { NuxtLink } from "#components";
+import DrawerContent from "../modals/drawer-content.vue";
+import { Button } from "../ui/button";
+import { Drawer, DrawerTrigger } from "../ui/drawer";
+
+const timelines = [
+    {
+        name: m.bland_chunky_sparrow_propel(),
+        url: "/home",
+        icon: House,
+        requiresLogin: true,
+    },
+    {
+        name: m.lost_trick_dog_grace(),
+        url: "/public",
+        icon: MapIcon,
+        requiresLogin: false,
+    },
+    {
+        name: m.crazy_game_parrot_pave(),
+        url: "/local",
+        icon: BedSingle,
+        requiresLogin: false,
+    },
+    {
+        name: m.real_tame_moose_greet(),
+        url: "/global",
+        icon: Globe,
+        requiresLogin: false,
+    },
+];
+</script>