mirror of https://github.com/TZGyn/shortener
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
3.1 KiB
Svelte
99 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import * as Sheet from "$lib/components/ui/sheet/index.js";
|
|
import { cn } from "$lib/utils.js";
|
|
import type { WithElementRef } from "bits-ui";
|
|
import type { HTMLAttributes } from "svelte/elements";
|
|
import { SIDEBAR_WIDTH_MOBILE } from "./constants.js";
|
|
import { useSidebar } from "./context.svelte.js";
|
|
|
|
let {
|
|
ref = $bindable(null),
|
|
side = "left",
|
|
variant = "sidebar",
|
|
collapsible = "offcanvas",
|
|
class: className,
|
|
children,
|
|
...restProps
|
|
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
|
|
side?: "left" | "right";
|
|
variant?: "sidebar" | "floating" | "inset";
|
|
collapsible?: "offcanvas" | "icon" | "none";
|
|
} = $props();
|
|
|
|
const sidebar = useSidebar();
|
|
</script>
|
|
|
|
{#if collapsible === "none"}
|
|
<div
|
|
class={cn(
|
|
"bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col",
|
|
className
|
|
)}
|
|
bind:this={ref}
|
|
{...restProps}
|
|
>
|
|
{@render children?.()}
|
|
</div>
|
|
{:else if sidebar.isMobile}
|
|
<Sheet.Root
|
|
controlledOpen
|
|
open={sidebar.openMobile}
|
|
onOpenChange={sidebar.setOpenMobile}
|
|
{...restProps}
|
|
>
|
|
<Sheet.Content
|
|
data-sidebar="sidebar"
|
|
data-mobile="true"
|
|
class="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
|
|
style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
|
|
{side}
|
|
>
|
|
<div class="flex h-full w-full flex-col">
|
|
{@render children?.()}
|
|
</div>
|
|
</Sheet.Content>
|
|
</Sheet.Root>
|
|
{:else}
|
|
<div
|
|
bind:this={ref}
|
|
class="text-sidebar-foreground group peer hidden md:block"
|
|
data-state={sidebar.state}
|
|
data-collapsible={sidebar.state === "collapsed" ? collapsible : ""}
|
|
data-variant={variant}
|
|
data-side={side}
|
|
>
|
|
<!-- This is what handles the sidebar gap on desktop -->
|
|
<div
|
|
class={cn(
|
|
"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
|
|
"group-data-[collapsible=offcanvas]:w-0",
|
|
"group-data-[side=right]:rotate-180",
|
|
variant === "floating" || variant === "inset"
|
|
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
|
|
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
|
|
)}
|
|
></div>
|
|
<div
|
|
class={cn(
|
|
"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
|
|
side === "left"
|
|
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
|
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
|
// Adjust the padding for floating and inset variants.
|
|
variant === "floating" || variant === "inset"
|
|
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
|
|
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
|
className
|
|
)}
|
|
{...restProps}
|
|
>
|
|
<div
|
|
data-sidebar="sidebar"
|
|
class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
|
|
>
|
|
{@render children?.()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|