working on the frontend

web/src/lib/components/ui/sidebar/sidebar-rail.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+    import {useSidebar} from "./context.svelte.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
+
+    const sidebar = useSidebar();
+</script>
+
+<button
+        {...restProps}
+        aria-label="Toggle Sidebar"
+        bind:this={ref}
+        class={cn(
+		"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+		"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+		"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+		"group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+		"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+		"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+		className
+	)}
+        data-sidebar="rail"
+        onclick={() => sidebar.toggle()}
+        tabIndex={-1}
+        title="Toggle Sidebar"
+>
+    {@render children?.()}
+</button>