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

36
components/sidebars/sidebar.vue
View file

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