refactor: ♻️ Improve mobile timeline switching

Author: CPlusPatch

components/navigation/mobile-navbar.vue

@@ -1,20 +1,18 @@
 <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">
+        class="fixed md:hidden bottom-0 inset-x-0 border-t h-20 bg-background z-10 flex items-center justify-around *:h-full *:w-full gap-6 px-4 py-2">
+        <Button :as="NuxtLink" href="/" variant="ghost" size="icon">
+            <Home class="!size-6" />
+        </Button>
+        <Button :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()"
+        <Button variant="default" size="icon" :title="m.salty_aloof_turkey_nudge()"
             @click="useEvent('composer:open')">
             <Pen class="!size-6" />
         </Button>
@@ -27,5 +25,4 @@ 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>
+</script>

components/navigation/timelines.vue

@@ -1,55 +1,61 @@
 <template>
-    <Drawer>
-        <DrawerTrigger :as-child="true">
-            <slot />
-        </DrawerTrigger>
-        <DrawerContent>
-            <DrawerClose v-for="item in timelines.filter(
+    <Tabs v-model:model-value="current">
+        <TabsList>
+            <TabsTrigger v-for="timeline 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>
+            )" :key="timeline.value" :value="timeline.value" :as="NuxtLink" :href="timeline.url">
+                {{ timeline.name }}
+            </TabsTrigger>
+        </TabsList>
+    </Tabs>
 </template>
 
 <script lang="ts" setup>
 import { BedSingle, Globe, House, MapIcon } from "lucide-vue-next";
+import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
 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(),
+        value: "home",
         url: "/home",
         icon: House,
         requiresLogin: true,
     },
     {
         name: m.lost_trick_dog_grace(),
+        value: "public",
         url: "/public",
         icon: MapIcon,
         requiresLogin: false,
     },
     {
         name: m.crazy_game_parrot_pave(),
+        value: "local",
         url: "/local",
         icon: BedSingle,
         requiresLogin: false,
     },
     {
         name: m.real_tame_moose_greet(),
+        value: "global",
         url: "/global",
         icon: Globe,
         requiresLogin: false,
     },
 ];
-</script>
+
+const { beforeEach } = useRouter();
+const { path } = useRoute();
+
+const current = computed(() => {
+    if (path === "/") {
+        return identity.value ? "home" : "public";
+    }
+
+    const timeline = timelines.find((i) => i.url === path);
+    return timeline ? timeline.value : "public";
+});
+</script>

components/sidebars/sidebar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ChevronDownIcon } from "lucide-vue-next";
 import {
     Breadcrumb,
     BreadcrumbItem,
@@ -14,12 +15,19 @@ import {
     SidebarTrigger,
 } from "~/components/ui/sidebar";
 import { SettingIds } from "~/settings";
+import Timelines from "../navigation/timelines.vue";
 import LeftSidebar from "./left-sidebar.vue";
 import RightSidebar from "./right-sidebar.vue";
 
 const showRightSidebar = useSetting(SettingIds.NotificationsSidebar);
 
 const route = useRoute();
+const isMd = useMediaQuery("(max-width: 768px)");
+const showTimelines = computed(
+    () =>
+        ["/", "/home", "/local", "/public", "/global"].includes(route.path) &&
+        isMd.value,
+);
 </script>
 
 <template>
@@ -28,22 +36,36 @@ const route = useRoute();
         <SidebarInset>
             <header
                 class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 overflow-hidden bg-background">
-                <div class="flex items-center gap-2 px-4">
-                    <SidebarTrigger class="-ml-1" />
-                    <Separator orientation="vertical" class="mr-2 h-4" />
+                <div :key="route.path" class="flex items-center gap-2 px-4 max-w-full">
+                    <SidebarTrigger class="-ml-1 shrink-0" />
+                    <Separator v-if="route.meta.breadcrumbs" orientation="vertical" class="mr-2 h-4" />
                     <Breadcrumb v-if="route.meta.breadcrumbs">
                         <BreadcrumbList>
                             <template v-for="(breadcrumb, index) of route.meta.breadcrumbs()">
-                                <BreadcrumbItem class="hidden md:block">
-                                    <component :is="breadcrumb.href ? BreadcrumbLink : BreadcrumbPage" :href="breadcrumb.href">
+                                <BreadcrumbItem>
+                                    <component v-if="!breadcrumb.links"
+                                        :is="breadcrumb.href ? BreadcrumbLink : BreadcrumbPage" :href="breadcrumb.href">
                                         {{ breadcrumb.text }}
                                     </component>
+                                    <DropdownMenu v-else>
+                                        <DropdownMenuTrigger class="flex items-center gap-1">
+                                            {{ breadcrumb.text }}
+                                            <ChevronDownIcon class="size-4" />
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent align="start">
+                                            <DropdownMenuItem v-for="link of breadcrumb.links" :key="link.href"
+                                                :as="BreadcrumbLink" :href="link.href">
+                                                {{ link.text }}
+                                            </DropdownMenuItem>
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
                                 </BreadcrumbItem>
-                                <BreadcrumbSeparator v-if="index !== (route.meta.breadcrumbs().length - 1)"
-                                    class="hidden md:block" />
+                                <BreadcrumbSeparator v-if="index !== (route.meta.breadcrumbs().length - 1)" />
                             </template>
                         </BreadcrumbList>
                     </Breadcrumb>
+                    <Separator v-if="showTimelines" orientation="vertical" class="h-4" />
+                    <Timelines v-if="showTimelines" />
                 </div>
             </header>
             <div class="flex flex-1 flex-col gap-4 md:p-1 overflow-auto *:z-10">

index.d.ts

@@ -1,12 +1,16 @@
+import type { JSX } from "vue/jsx-runtime";
+
 declare module "#app" {
     interface PageMeta {
         breadcrumbs?: () => {
             text: string;
             href?: string;
+            list?: {
+                text: string;
+                href: string;
+            }[];
         }[];
+        header?: JSX.Element;
         requiresAuth?: boolean;
     }
 }
-
-// It is always important to import/export something when augmenting a type
-export {};

layouts/app.vue

@@ -16,7 +16,7 @@
             </CardFooter>
         </Card>
     </Sidebar>
-    <MobileNavbar />
+    <MobileNavbar v-if="identity" />
     <ComposerDialog />
 </template>
 

pages/global.vue

@@ -6,7 +6,7 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
 import Global from "~/components/timelines/global.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 import * as m from "~/paraglide/messages.js";
@@ -17,14 +17,5 @@ useHead({
 
 definePageMeta({
     layout: "app",
-    breadcrumbs: () => [
-        {
-            text: m.steep_aqua_fox_harbor(),
-        },
-        {
-            text: m.real_tame_moose_greet(),
-            href: "/global",
-        },
-    ],
 });
-</script>
+</script>

pages/home.vue

@@ -6,26 +6,17 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
 import Home from "~/components/timelines/home.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 import * as m from "~/paraglide/messages.js";
 
 useHead({
-    title: "Home",
+    title: m.bland_chunky_sparrow_propel(),
 });
 
 definePageMeta({
     layout: "app",
-    breadcrumbs: () => [
-        {
-            text: m.steep_aqua_fox_harbor(),
-        },
-        {
-            text: m.bland_chunky_sparrow_propel(),
-            href: "/home",
-        },
-    ],
     requiresAuth: true,
 });
-</script>
+</script>

pages/index.vue

@@ -8,7 +8,7 @@
 </template>
 
 
-<script setup lang="ts">
+<script setup lang="tsx">
 import Home from "~/components/timelines/home.vue";
 import Public from "~/components/timelines/public.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
@@ -22,19 +22,5 @@ useHead({
 
 definePageMeta({
     layout: "app",
-    breadcrumbs: () => [
-        {
-            text: m.steep_aqua_fox_harbor(),
-        },
-        identity.value
-            ? {
-                  text: m.bland_chunky_sparrow_propel(),
-                  href: "/home",
-              }
-            : {
-                  text: m.lost_trick_dog_grace(),
-                  href: "/public",
-              },
-    ],
 });
-</script>
+</script>

pages/local.vue

@@ -7,7 +7,7 @@
 </template>
 
 
-<script lang="ts" setup>
+<script lang="tsx" setup>
 import Local from "~/components/timelines/local.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 import * as m from "~/paraglide/messages.js";
@@ -18,14 +18,5 @@ useHead({
 
 definePageMeta({
     layout: "app",
-    breadcrumbs: () => [
-        {
-            text: m.steep_aqua_fox_harbor(),
-        },
-        {
-            text: m.crazy_game_parrot_pave(),
-            href: "/local",
-        },
-    ],
 });
-</script>
+</script>

pages/public.vue

@@ -6,25 +6,16 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
 import Public from "~/components/timelines/public.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 import * as m from "~/paraglide/messages.js";
 
 useHead({
-    title: "Public",
+    title: m.lost_trick_dog_grace(),
 });
 
 definePageMeta({
     layout: "app",
-    breadcrumbs: () => [
-        {
-            text: m.steep_aqua_fox_harbor(),
-        },
-        {
-            text: m.lost_trick_dog_grace(),
-            href: "/public",
-        },
-    ],
 });
-</script>
+</script>