init

src/components/sidebar.tsx

@@ -0,0 +1,74 @@
+import { useCallback, useEffect } from "preact/hooks";
+
+import { cn } from "@/lib/utils";
+import { dragging } from "@/store";
+
+const { isDragging } = dragging.value;
+
+export default function Sidebar() {
+	return (
+		<aside
+			className="relative flex h-[100dvh] w-full bg-secondary px-2 py-8"
+			style={{ width: dragging.value.width }}
+		>
+			<div className=""></div>
+			<nav className="">
+				<a href="#">Lol</a>
+			</nav>
+			<Divider />
+		</aside>
+	);
+}
+
+function Divider() {
+	function onMouseDown() {
+		dragging.value = {
+			...dragging.value,
+			isDragging: true,
+		};
+	}
+
+	function onMouseUp() {
+		dragging.value = {
+			...dragging.value,
+			isDragging: false,
+		};
+	}
+
+	const handler = useCallback(
+		(event: MouseEvent) => {
+			if (dragging.value.isDragging) {
+				const width = Math.min(Math.max(200, event.clientX), 320);
+				dragging.value = {
+					...dragging.value,
+					width,
+				};
+				localStorage.setItem("sidebar-width", width.toString());
+			}
+		},
+		[dragging.value.isDragging],
+	);
+
+	useEffect(() => {
+		window.addEventListener("mousemove", handler);
+		window.addEventListener("mouseup", onMouseUp);
+
+		return () => {
+			window.removeEventListener("mousemove", handler);
+			window.removeEventListener("mouseup", onMouseUp);
+		};
+	}, [isDragging]);
+
+	return (
+		<div
+			className={cn(
+				"group absolute -right-2 bottom-0 top-0 px-2 hover:cursor-col-resize",
+				{},
+			)}
+			onMouseDown={onMouseDown}
+			onMouseUp={onMouseUp}
+		>
+			<div className="h-full w-[1px] bg-border transition-colors group-hover:scale-x-[2] group-hover:bg-accent/50"></div>
+		</div>
+	);
+}