import { defineComponent, renderSlot, createElementBlock, unref, normalizeProps, mergeProps, openBlock, normalizeClass, createElementVNode, createCommentVNode, createBlock, toDisplayString } from "vue";
import { cva, ScalarIconButton } from "@scalar/components";
import { ScalarIconX, ScalarIconList } from "@scalar/icons";
import { useBreakpoints } from "@scalar/use-hooks/useBreakpoints";
const _hoisted_1 = { class: "flex h-(--scalar-header-height) w-full items-center border-b bg-inherit px-2" };
const _hoisted_2 = {
  key: 1,
  class: "flex-1 text-sm font-medium whitespace-nowrap"
};
const _hoisted_3 = { class: "flex h-6 items-center gap-1 pl-1" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "MobileHeader",
  props: {
    breadcrumb: {},
    isSidebarOpen: { type: Boolean },
    showSidebar: { type: Boolean }
  },
  emits: ["toggleSidebar"],
  setup(__props, { emit: __emit }) {
    const emit = __emit;
    const { mediaQueries } = useBreakpoints();
    const variants = cva({
      base: "items-center bg-b-1 sticky top-(--scalar-custom-header-height) z-10",
      variants: {
        open: {
          true: "h-(--refs-sidebar-height) custom-scrollbar flex flex-col"
        },
        lg: {
          true: "hidden [grid-area:header]"
        }
      }
    });
    return (_ctx, _cache) => {
      return unref(mediaQueries).lg.value ? renderSlot(_ctx.$slots, "sidebar", normalizeProps(mergeProps({ key: 0 }, {
        sidebarClasses: "sticky top-(--refs-header-height) h-(--refs-sidebar-height) [grid-area:navigation]"
      }))) : (openBlock(), createElementBlock("div", {
        key: 1,
        class: normalizeClass(["t-doc__header", unref(variants)({ open: __props.isSidebarOpen, lg: unref(mediaQueries).lg.value })])
      }, [
        createElementVNode("header", _hoisted_1, [
          __props.showSidebar ? (openBlock(), createBlock(unref(ScalarIconButton), {
            key: 0,
            icon: __props.isSidebarOpen ? unref(ScalarIconX) : unref(ScalarIconList),
            label: __props.isSidebarOpen ? "Close Menu" : "Open Menu",
            size: "md",
            onClick: _cache[0] || (_cache[0] = ($event) => emit("toggleSidebar"))
          }, null, 8, ["icon", "label"])) : createCommentVNode("", true),
          __props.showSidebar ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.breadcrumb), 1)) : renderSlot(_ctx.$slots, "search", { key: 2 }),
          createElementVNode("div", _hoisted_3, [
            renderSlot(_ctx.$slots, "actions")
          ])
        ]),
        __props.isSidebarOpen ? renderSlot(_ctx.$slots, "sidebar", normalizeProps(mergeProps({ key: 0 }, {
          sidebarClasses: "overflow-y-auto custom-scrollbar min-h-0 flex-1 w-full border-none"
        }))) : createCommentVNode("", true)
      ], 2));
    };
  }
});
export {
  _sfc_main as default
};
