import { Layout } from "ant-design-vue";
import { defineComponent } from "vue";
import HeaderComponent from "./components/Header";
import { css } from "@linaria/core";
import PageMenu from "./components/PageMenu";
const { Header, Content, Sider } = Layout;

export default defineComponent(() => {
  return () => (
    <Layout class={Page}>
      <Header>
        <HeaderComponent />
      </Header>
      <Layout class={Page}>
        <Sider class={SiderMenu}>
          <PageMenu />
        </Sider>
        <Content>
          <router-view></router-view>
        </Content>
      </Layout>
    </Layout>
  );
});
const Page = css`
  height: 100%;
`;
const SiderMenu = css`
  overflow: auto;
  height: 100%;
  &.ant-layout-sider {
    background-color: #fff;
  }
`;
