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

feat: ✨ Add string preferences and custom background images

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-15 16:16:16 +01:00
parent 57fafbd1a8
commit aa61f28004
No known key found for this signature in database
5 changed files with 59 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

28
components/ui/sidebar/SidebarInset.vue
View file

@ -1,20 +1,30 @@
<script setup lang="ts">
import { cn } from "@/lib/utils";
import type { HTMLAttributes } from "vue";
import { SettingIds } from "~/settings";
const props = defineProps<{
class?: HTMLAttributes["class"];
}>();
const backgroundImage = useSetting(SettingIds.BackgroundURL);
const canParseUrl = URL.canParse;
</script>
<template>
<main
:class="cn(
'relative flex min-h-svh max-w-full flex-1 flex-col bg-background',
'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
props.class,
)"
>
<slot />
</main>
<main :class="cn(
'relative flex min-h-svh max-w-full flex-1 flex-col bg-background',
'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:overflow-hidden md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
props.class,
)" :style="{
backgroundImage: canParseUrl(backgroundImage.value as string) ? `url(${backgroundImage.value})` : undefined,
backgroundSize: canParseUrl(backgroundImage.value as string) ? 'cover' : undefined,
backgroundPosition: canParseUrl(backgroundImage.value as string) ? 'center' : undefined,
backgroundRepeat: canParseUrl(backgroundImage.value as string) ? 'no-repeat' : undefined,
}">
<!-- Overlay for the background image -->
<div v-if="canParseUrl(backgroundImage.value as string)" class="absolute -z-10 inset-0 bg-black/20" />
<slot />
</main>
</template>