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: ♻️ Rewrite sidebar with shadcn

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-11-30 00:58:04 +01:00
parent a7b570905a
commit 9ced2c98e4
No known key found for this signature in database
109 changed files with 2261 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

42
layouts/app.vue
View file

@ -1,40 +1,15 @@
<template>
<div class="from-dark-600 to-dark-900 bg-gradient-to-tl relative min-h-dvh" :style="{
backgroundImage: canParseURL(backgroundImage.value as string) ? `url(${backgroundImage.value})` : undefined,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
}">
<SquarePattern v-if="!canParseURL(backgroundImage.value as string)" />
<Navigation />
<div class="relative md:pl-20 min-h-dvh flex flex-row overflow-hidden justify-center xl:justify-between">
<OverlayScrollbarsComponent :defer="true" class="w-full max-h-dvh overflow-y-auto" :element="'main'">
<slot />
</OverlayScrollbarsComponent>
<CollapsibleAside v-if="width > 1280 && identity" direction="right"
class="max-w-md max-h-dvh overflow-y-auto w-full hidden absolute inset-y-0 xl:flex">
<TimelineScroller>
<Notifications />
</TimelineScroller>
</CollapsibleAside>
</div>
</div>
<Sidebar>
<slot />
</Sidebar>
<ComposerModal />
<AttachmentDialog />
</template>
<script setup lang="ts">
import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
import ComposerModal from "~/components/composer/modal.client.vue";
import SquarePattern from "~/components/graphics/square-pattern.vue";
import CollapsibleAside from "~/components/sidebars/collapsible-aside.vue";
import Navigation from "~/components/sidebars/navigation.vue";
import Sidebar from "~/components/sidebars/sidebar.vue";
import AttachmentDialog from "~/components/social-elements/notes/attachment-dialog.vue";
import Notifications from "~/components/timelines/notifications.vue";
import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
import { SettingIds } from "~/settings";
const { width } = useWindowSize();
const { n } = useMagicKeys();
const activeElement = useActiveElement();
@ -43,15 +18,6 @@ const notUsingInput = computed(
activeElement.value?.tagName !== "INPUT" &&
activeElement.value?.tagName !== "TEXTAREA",
);
const backgroundImage = useSetting(SettingIds.BackgroundURL);
const canParseURL: (url: string) => boolean = (url) => {
try {
new URL(url);
return true;
} catch {
return false;
}
};
watchEffect(async () => {
if (n?.value && notUsingInput.value) {