versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: ♻️ Improve mobile timeline switching

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-26 14:34:59 +01:00
parent 466c1eaaac
commit 3ff674017e
No known key found for this signature in database
10 changed files with 82 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

17
components/navigation/mobile-navbar.vue
View file

@ -1,12 +1,10 @@
<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>
@ -14,7 +12,7 @@
<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>

46
components/navigation/timelines.vue
View file

@ -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>