import { r as useWorkspace } from "./store-DpSUVhjp.js";
import { a as useLayout, r as useSidebar } from "./useSidebar-DLTwHDI-.js";
import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
import { Fragment, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, vShow, withDirectives } from "vue";
import { useBreakpoints } from "@scalar/use-hooks/useBreakpoints";
//#region src/components/Sidebar/Sidebar.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = {
	key: 0,
	class: "xl:min-h-header flex min-h-12 items-center justify-between px-3 py-1.5 text-sm md:px-[18px] md:py-2.5"
};
var _hoisted_2 = { class: "m-0 text-sm font-medium whitespace-nowrap" };
var _hoisted_3 = { class: "bg-b-1 sticky bottom-0 z-10 w-[inherit] pt-0 has-[.empty-sidebar-item]:border-t md:px-2.5 md:pb-2.5" };
//#endregion
//#region src/components/Sidebar/Sidebar.vue
var Sidebar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
	__name: "Sidebar",
	props: { title: {} },
	setup(__props) {
		const { isSidebarOpen } = useSidebar();
		const { sidebarWidth, setSidebarWidth } = useWorkspace();
		const { layout } = useLayout();
		const isDragging = ref(false);
		const sidebarRef = ref(null);
		const { breakpoints } = useBreakpoints();
		const startDrag = (event) => {
			event.preventDefault();
			const startX = event.clientX;
			/** Current sidebar width when dragging starts */
			const startWidth = Number.parseInt(getComputedStyle(sidebarRef.value).width || sidebarWidth.value, 10);
			const doDrag = (dragEvent) => {
				isDragging.value = true;
				document.body.classList.add("dragging");
				let newWidth = startWidth + dragEvent.clientX - startX;
				if (newWidth > 420)
 /** Elastic effect */
				newWidth = 420 + (newWidth - 420) * .2;
				if (newWidth < 240) newWidth = 240;
				setSidebarWidth(`${newWidth}px`);
			};
			const stopDrag = () => {
				isDragging.value = false;
				document.body.classList.remove("dragging");
				document.documentElement.removeEventListener("mousemove", doDrag, false);
				document.documentElement.removeEventListener("mouseup", stopDrag, false);
				/** Reset to max width if exceeded */
				if (Number.parseInt(sidebarWidth.value, 10) > 420) setSidebarWidth("360px");
				else if (Number.parseInt(sidebarWidth.value, 10) < 240) setSidebarWidth("240px");
			};
			document.documentElement.addEventListener("mousemove", doDrag, false);
			document.documentElement.addEventListener("mouseup", stopDrag, false);
		};
		return (_ctx, _cache) => {
			return withDirectives((openBlock(), createElementBlock("aside", {
				ref_key: "sidebarRef",
				ref: sidebarRef,
				class: normalizeClass(["sidebar bg-b-1 relative flex min-w-full flex-1 flex-col overflow-hidden leading-5 md:min-w-fit md:flex-none md:border-r md:border-b-0", { dragging: isDragging.value }]),
				style: normalizeStyle({ width: unref(breakpoints).lg ? unref(sidebarWidth) : "100%" })
			}, [
				renderSlot(_ctx.$slots, "header", {}, void 0, true),
				unref(layout) !== "modal" && __props.title ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("h2", _hoisted_2, toDisplayString(__props.title), 1), !unref(breakpoints).lg ? renderSlot(_ctx.$slots, "button", { key: 0 }, void 0, true) : createCommentVNode("", true)])) : createCommentVNode("", true),
				createElementVNode("div", { class: normalizeClass(["custom-scroll sidebar-height w-[inherit] pb-0 md:pb-[37px]", { "sidebar-mask": unref(layout) !== "modal" }]) }, [renderSlot(_ctx.$slots, "content", {}, void 0, true)], 2),
				unref(breakpoints).lg ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "button", {}, void 0, true)]), createElementVNode("div", {
					class: "resizer",
					onMousedown: startDrag
				}, null, 32)], 64)) : createCommentVNode("", true)
			], 6)), [[vShow, unref(isSidebarOpen)]]);
		};
	}
}), [["__scopeId", "data-v-7aa06e5a"]]);
//#endregion
export { Sidebar_default as t };

//# sourceMappingURL=Sidebar-C6AdX6-N.js.map