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 sidebar and background design

Browse source
This commit is contained in:
Jesse Wierzbinski 2025-02-09 19:39:05 +01:00
parent 9b5187207b
commit 9ba59cfd21
No known key found for this signature in database
26 changed files with 52 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

7
components/sidebars/left-sidebar.vue
View file

@ -1,5 +1,5 @@
<template>
<Sidebar :variant="(sidebarStyle.value as 'sidebar' | 'floating' | 'inset')" collapsible="icon">
<Sidebar collapsible="none" class="hidden md:flex">
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
@ -136,13 +136,10 @@ import {
SidebarRail,
} from "~/components/ui/sidebar";
import * as m from "~/paraglide/messages.js";
import { type EnumSetting, SettingIds } from "~/settings";
import Avatar from "../profiles/avatar.vue";
import { Button } from "../ui/button";
import AccountSwitcher from "./account-switcher.vue";
const sidebarStyle = useSetting(SettingIds.SidebarStyle) as Ref<EnumSetting>;
const data = {
navMain: [
{
@ -209,4 +206,4 @@ const data = {
const instance = useInstance();
const { $pwa } = useNuxtApp();
</script>
</script>

4
components/sidebars/right-sidebar.vue
View file

@ -1,5 +1,5 @@
<template>
<Sidebar variant="inset" collapsible="none" side="right" class="[--sidebar-width:24rem] hidden lg:flex">
<Sidebar side="right" collapsible="none" class="w-96 hidden lg:flex">
<SidebarContent class="p-2 overflow-y-auto">
<NotificationsTimeline />
</SidebarContent>
@ -10,4 +10,4 @@
<script lang="ts" setup>
import NotificationsTimeline from "../timelines/notifications.vue";
import { Sidebar, SidebarContent, SidebarRail } from "../ui/sidebar";
</script>
</script>

2
components/sidebars/sidebar.vue
View file

@ -20,7 +20,7 @@ const showTimelines = computed(
<template>
<SidebarProvider>
<LeftSidebar />
<SidebarInset :class="cn('relative !overflow-y-auto !h-svh', !isMd && 'pt-4')">
<SidebarInset :class="cn('relative overflow-y-auto overflow-x-hidden', !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>