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

refactor: 💄 Improve note rendering UI

Browse source
This commit is contained in:
Jesse Wierzbinski 2025-02-09 18:37:41 +01:00
parent cb60ed1c72
commit 9d62c378b1
No known key found for this signature in database
5 changed files with 13 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

42
components/sidebars/sidebar.vue
View file

@ -1,4 +1,5 @@
<script setup lang="ts">
import { cn } from "@/lib/utils";
import { ChevronDownIcon } from "lucide-vue-next";
import {
Breadcrumb,
@ -33,44 +34,11 @@ const showTimelines = computed(
<template>
<SidebarProvider>
<LeftSidebar />
<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 :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>
<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)" />
</template>
</BreadcrumbList>
</Breadcrumb>
<Separator v-if="showTimelines" orientation="vertical" class="h-4" />
<Timelines v-if="showTimelines" />
</div>
<SidebarInset :class="cn('relative !overflow-y-auto !h-svh', !isMd && 'pt-4')">
<header v-if="showTimelines" class="flex h-16 items-center bg-background/80 backdrop-blur-2xl sticky top-0 inset-x-0 z-10 p-4">
<Timelines />
</header>
<div class="flex flex-1 flex-col gap-4 md:p-1 overflow-auto *:z-10">
<slot />
</div>
<slot />
</SidebarInset>
<RightSidebar v-if="identity" v-show="showRightSidebar.value" />
</SidebarProvider>