From f1e07bd43c70f2d85172a37e5d383ca77252e0f6 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 16 Jul 2025 23:49:34 +0200
Subject: [PATCH] feat: create resizable sidebar component

---
 components/UserInterface/ResizableSidebar.vue | 117 ++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 components/UserInterface/ResizableSidebar.vue

diff --git a/components/UserInterface/ResizableSidebar.vue b/components/UserInterface/ResizableSidebar.vue
new file mode 100644
index 0000000..68c0dc7
--- /dev/null
+++ b/components/UserInterface/ResizableSidebar.vue
@@ -0,0 +1,117 @@
+<template>
+	<div ref="resizableSidebar" class="resizable-sidebar"
+			:style="{
+				'width': props.width,
+				'min-width': props.minWidth,
+				'max-width': props.maxWidth,
+				'border': props.borderSides == 'all' ? borderStyling : undefined,
+				'border-top': props.borderSides?.includes('top') ? borderStyling : undefined,
+				'border-bottom': props.borderSides?.includes('bottom') ? borderStyling : undefined,
+			}">
+		<div v-if="props.borderSides != 'right'" class="width-resizer-bar">
+			<div ref="widthResizer" class="width-resizer"></div>
+		</div>
+		<div class="sidebar-content">
+			<slot />
+		</div>
+		<div v-if="props.borderSides == 'right'" class="width-resizer-bar">
+			<div ref="widthResizer" class="width-resizer"></div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { ContextMenuItem } from '~/types/interfaces';
+
+const props = defineProps<{ width?: string, minWidth: string, maxWidth: string, borderSides: "all" | "top" | "right" | "bottom" | "left" | ("top" | "right" | "bottom" | "left")[] }>();
+
+const borderStyling = ".1rem solid var(--padding-color)";
+
+const resizableSidebar = ref<HTMLDivElement>();
+const widthResizer = ref<HTMLDivElement>();
+
+const menuItems: ContextMenuItem[] = [
+	{ name: "Reset", callback: () => { resizableSidebar.value!.style.width = props.width ?? props.minWidth } }
+]
+
+onMounted(() => {
+	if (resizableSidebar.value && widthResizer.value) {
+		widthResizer.value.addEventListener("pointerdown", (e) => {
+			e.preventDefault();
+			if (e.button == 2) {
+				createContextMenu(e, menuItems);
+				return
+			};
+			document.body.style.cursor = "col-resize";
+			function handleMove(pointer: PointerEvent) {
+				if (resizableSidebar.value) {
+					console.log("moving");
+					console.log("pointer:", pointer);
+					console.log("width:", resizableSidebar.value.style.width);
+					let delta = 0;
+					if (props.borderSides == 'right') {
+						delta = resizableSidebar.value.getBoundingClientRect().left;
+					} else {
+						delta = resizableSidebar.value.getBoundingClientRect().right;
+					}
+					console.log("delta:", delta);
+					resizableSidebar.value.style.width = `${Math.abs(pointer.clientX - delta)}px`;
+				}
+			}
+
+			document.addEventListener("pointermove", handleMove);
+
+			document.addEventListener("pointerup", () => {
+				console.log("pointer up");
+				document.removeEventListener("pointermove", handleMove);
+				console.log("removed pointermove event listener");
+				document.body.style.cursor = "";
+			}, { once: true });
+		});
+	}
+});
+
+</script>
+
+<style>
+.resizable-sidebar > * {
+	box-sizing: border-box;
+}
+
+.resizable-sidebar {
+	display: flex;
+	background: var(--optional-channel-list-background);
+	background-color: var(--sidebar-background-color);
+	height: 100%;
+	flex: 0 0 auto;
+}
+
+.width-resizer {
+	width: .5rem;
+	cursor: col-resize;
+	position: absolute;
+	height: 100%;
+}
+
+.width-resizer-bar {
+	display: flex;
+	justify-content: center;
+	position: relative;
+	height: 100%;
+	width: 1px;
+	background-color: var(--padding-color);
+}
+
+.sidebar-content {
+	width: 100%;
+	padding-left: .25em;
+	padding-right: .25em;
+}
+
+.sidebar-content > :first-child {
+	width: 100%;
+	height: 100%;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+</style>
\ No newline at end of file