import { defineComponent as B, useSlots as C, computed as h, ref as O, watchEffect as $, openBlock as t, createElementBlock as a, normalizeClass as _, createVNode as o, Transition as b, withCtx as g, withDirectives as y, withModifiers as M, vShow as x, createElementVNode as p, unref as d, renderSlot as i, createCommentVNode as c } from "vue";
import { a as V } from "./index-CLv1CFWG.js";
import z from "./Backdrop.js";
import N from "./Divider.js";
import { _ as j } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const A = {
  key: 0,
  class: "px-3 pt-6"
}, D = {
  key: 1,
  class: "px-3 pt-6"
}, P = {
  key: 2,
  class: "pt-6"
}, L = {
  role: "menubar",
  "aria-orientation": "vertical"
}, Q = /* @__PURE__ */ B({
  __name: "AppSidebar",
  props: {
    isOpen: { type: Boolean, default: !1 }
  },
  emits: ["dismiss", "update:is-open"],
  setup(k, { emit: w }) {
    const u = k, n = C(), f = w, l = V("screen and (min-width: 1321px)"), s = h(() => u.isOpen && !l.value), r = O({ height: "", overflow: "" }), m = h(() => u.isOpen || l.value);
    function S() {
      f("dismiss"), f("update:is-open", !1);
    }
    function E() {
      return typeof document > "u" ? null : document.scrollingElement || document.body;
    }
    return $(() => {
      if (l.value) return;
      const e = E();
      e && (s.value && Object.assign(r.value, {
        overflow: e.style.overflow,
        height: e.style.height
      }), Object.assign(e.style, {
        overflow: s.value ? "hidden" : r.value.overflow,
        // Prevents page from scrolling when AppSidebar is open
        height: s.value ? "100%" : r.value.height
        // Ensures the backdrop covers the entire page when AppSidebar is open
      }));
    }), (e, v) => (t(), a("div", {
      id: "stash-app-sidebar",
      class: _(["stash-app-sidebar relative", {
        "stash-app-sidebar--is-open": m.value,
        "z-modal": s.value,
        "z-[301]": !s.value
      }]),
      "data-test": "stash-app-sidebar"
    }, [
      o(b, { name: "backdrop" }, {
        default: g(() => [
          y(o(z, {
            class: "stash-app-sidebar__backdrop",
            onClick: M(S, ["stop"])
          }, null, 512), [
            [x, s.value]
          ])
        ]),
        _: 1
      }),
      o(b, { name: "aside" }, {
        default: g(() => [
          y(p("aside", {
            class: _(["stash-app-sidebar__aside fixed flex h-screen flex-col bg-purple-500", { "shadow-3xl": s.value }]),
            "data-test": "stash-app-sidebar__aside"
          }, [
            o(N, { class: "stash-app-sidebar__divider" }),
            d(n)["app-context"] ? (t(), a("div", A, [
              i(e.$slots, "app-context")
            ])) : c("", !0),
            d(n)["company-context"] ? (t(), a("div", D, [
              i(e.$slots, "company-context")
            ])) : c("", !0),
            d(n).navigation ? (t(), a("nav", P, [
              p("ul", L, [
                i(e.$slots, "navigation")
              ])
            ])) : c("", !0),
            v[0] || (v[0] = p("div", { class: "flex-1" }, null, -1)),
            i(e.$slots, "footer")
          ], 2), [
            [x, m.value]
          ])
        ]),
        _: 3
      })
    ], 2));
  }
}), T = {}, q = {
  $style: T
}, K = /* @__PURE__ */ j(Q, [["__cssModules", q]]);
export {
  K as default
};
//# sourceMappingURL=AppSidebar.js.map
