flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/room. tiny 3d rooms saved locally or in your bluesky account, svelte/threlte
flo-bit.dev/room/
1<script lang="ts">
2 import type { WithElementRef } from 'bits-ui';
3 import type { HTMLAttributes } from 'svelte/elements';
4 import { cn } from '$lib/utils';
5
6 const {
7 class: className,
8 children,
9 hasSidebar = false,
10 ...restProps
11 }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { hasSidebar?: boolean } = $props();
12</script>
13
14<div
15 class={cn(
16 'header fixed top-0 right-0 left-0 z-50 flex h-16 items-center justify-between p-2',
17 hasSidebar ? 'lg:left-72 xl:left-80' : '',
18 className
19 )}
20 {...restProps}
21>
22 {@render children?.()}
23 <div
24 class="backdrop from-base-50/90 via-base-50/0 dark:from-base-950/90 dark:via-base-950/0 pointer-events-none absolute inset-0 -z-10 bg-linear-to-b backdrop-blur-md"
25 ></div>
26
27 <div
28 class="backdrop-edge bg-base-900/10 dark:bg-base-500/10 pointer-events-none absolute right-0 bottom-0 left-0 -z-10 translate-y-full backdrop-blur-sm"
29 ></div>
30</div>
31
32<style>
33 /** better frosted glass effect adopted from https://www.joshwcomeau.com/css/backdrop-filter/ */
34 .header {
35 --thickness: 1px;
36 }
37
38 @supports (mask-image: none) or (-webkit-mask-image: none) {
39 .backdrop {
40 height: 200%;
41 -webkit-mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%);
42 mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%);
43 }
44 .backdrop-edge {
45 height: 100%;
46 inset: 0;
47 -webkit-mask-image: linear-gradient(
48 to bottom,
49 black 0,
50 black var(--thickness),
51 transparent var(--thickness)
52 );
53 mask-image: linear-gradient(
54 to bottom,
55 black 0,
56 black var(--thickness),
57 transparent var(--thickness)
58 );
59
60 filter: brightness(1.5);
61 }
62 }
63</style>