@vrx-arco/pro-layout/dist/ProLayout/index.js

<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>

import { style } from "../style/var.js";
import { ProMenu } from "./components/Menu/Menu.js";
import { NavBar } from "./components/NavBar/index.js";
import { createVNode, defineComponent } from "vue";
import { Drawer, Layout, LayoutContent, LayoutHeader, LayoutSider, Scrollbar, Spin } from "@arco-design/web-vue";
import { useShareBreakpoints } from "@vrx-arco/use";
import { RouterView } from "vue-router";
import { useToggle } from "@vueuse/core";
const ProLayout = /* @__PURE__ */ defineComponent({
	name: "vrx-arco-pro-layout",
	props: {
		menus: {
			type: Array,
			default: () => []
		},
		title: String,
		logo: String,
		loading: {
			type: Boolean,
			default: false
		}
	},
	slots: Object,
	setup: (props, { slots }) => {
		const { bemClass } = style("pro-layout");
		const breakpoints = useShareBreakpoints();
		const isSmallerLg = breakpoints.smaller("lg");
		const [menuModelVisible, setMenuModelVisible] = useToggle(false);
		return () => {
			const { title, logo, menus, loading } = props;
			return createVNode(Spin, {
				"loading": loading,
				"class": bemClass("__spin"),
				"size": 30
			}, { default: () => [createVNode(Layout, { "class": bemClass() }, { default: () => [createVNode(LayoutHeader, { "class": bemClass("__header") }, { default: () => [createVNode(NavBar, {
				"title": title,
				"logo": logo,
				"onMenuClick": () => {
					setMenuModelVisible(true);
				}
			}, {
				default: () => [slots.headerToolbox?.()],
				logo: slots.logo,
				title: slots.title,
				logoContainer: slots.logoContainer,
				content: slots.navContent
			})] }), createVNode(LayoutContent, { "class": bemClass("__wrap-container") }, { default: () => [createVNode(Layout, { "class": bemClass("__wrap") }, { default: () => [isSmallerLg.value ? createVNode(Drawer, {
				"class": bemClass("__smaller-menu-drawer"),
				"placement": "left",
				"visible": menuModelVisible.value,
				"onUpdate:visible": ($event) => menuModelVisible.value = $event,
				"footer": false,
				"header": false,
				"maskClosable": true,
				"closable": false
			}, { default: () => [createVNode(Scrollbar, { "outerClass": bemClass("__menu-scrollbar") }, { default: () => [createVNode(ProMenu, { "menu": menus }, { icon: slots.menuIcon })] })] }) : createVNode(LayoutSider, {
				"breakpoint": "xl",
				"collapsible": true
			}, { default: () => [createVNode(Scrollbar, { "outerClass": bemClass("__menu-scrollbar") }, { default: () => [createVNode(ProMenu, { "menu": menus }, { icon: slots.menuIcon })] })] }), createVNode(LayoutContent, { "class": bemClass("__content") }, { default: () => [slots.default?.() || createVNode(RouterView, null, null)] })] })] })] })] });
		};
	}
});
export { ProLayout };