@scalar/api-client
Version:
the open source API testing client
64 lines (63 loc) • 3.02 kB
JavaScript
import { defineComponent as E, ref as g, withDirectives as S, createElementBlock as l, openBlock as m, normalizeStyle as _, normalizeClass as h, unref as t, renderSlot as r, createCommentVNode as u, createElementVNode as n, toDisplayString as D, Fragment as L, vShow as N } from "vue";
import { useBreakpoints as W } from "@scalar/use-hooks/useBreakpoints";
import { useLayout as $ } from "../../hooks/useLayout.js";
import { useSidebar as z } from "../../hooks/useSidebar.js";
import { useWorkspace as C } from "../../store/store.js";
const B = {
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"
}, I = { class: "m-0 text-sm font-medium whitespace-nowrap" }, X = { class: "bg-b-1 relative sticky bottom-0 z-10 w-[inherit] pt-0 has-[.empty-sidebar-item]:border-t md:px-2.5 md:pb-2.5" }, q = /* @__PURE__ */ E({
__name: "Sidebar",
props: {
title: {}
},
setup(R) {
const { isSidebarOpen: y } = z(), { sidebarWidth: o, setSidebarWidth: i } = C(), { layout: c } = $(), a = g(!1), p = g(null), { breakpoints: d } = W(), w = (e) => {
e.preventDefault();
const f = e.clientX, x = Number.parseInt(
getComputedStyle(p.value).width || o.value,
10
), b = (k) => {
a.value = !0, document.body.classList.add("dragging");
let s = x + k.clientX - f;
s > 420 && (s = 420 + (s - 420) * 0.2), s < 240 && (s = 240), i(`${s}px`);
}, v = () => {
a.value = !1, document.body.classList.remove("dragging"), document.documentElement.removeEventListener("mousemove", b, !1), document.documentElement.removeEventListener("mouseup", v, !1), Number.parseInt(o.value, 10) > 420 ? i("360px") : Number.parseInt(o.value, 10) < 240 && i("240px");
};
document.documentElement.addEventListener("mousemove", b, !1), document.documentElement.addEventListener("mouseup", v, !1);
};
return (e, f) => S((m(), l("aside", {
ref_key: "sidebarRef",
ref: p,
class: h(["sidebar bg-b-1 relative flex min-w-full flex-1 flex-col overflow-hidden leading-3 md:min-w-fit md:flex-none md:border-r md:border-b-0", { dragging: a.value }]),
style: _({ width: t(d).lg ? t(o) : "100%" })
}, [
r(e.$slots, "header", {}, void 0, !0),
t(c) !== "modal" && e.title ? (m(), l("div", B, [
n("h2", I, D(e.title), 1),
t(d).lg ? u("", !0) : r(e.$slots, "button", { key: 0 }, void 0, !0)
])) : u("", !0),
n("div", {
class: h(["custom-scroll sidebar-height w-[inherit] pb-0 md:pb-[37px]", {
"sidebar-mask": t(c) !== "modal"
}])
}, [
r(e.$slots, "content", {}, void 0, !0)
], 2),
t(d).lg ? (m(), l(L, { key: 1 }, [
n("div", X, [
r(e.$slots, "button", {}, void 0, !0)
]),
n("div", {
class: "resizer",
onMousedown: w
}, null, 32)
], 64)) : u("", !0)
], 6)), [
[N, t(y)]
]);
}
});
export {
q as default
};