<template>
  <a-layout :style="{ height: '100vh' }">
    <a-layout-sider theme="dark" breakpoint="lg" :width="220" collapsible :collapsed="collapsed" @collapse="onCollapse">
      <Menu :collapsed="collapsed" />
    </a-layout-sider>
    <a-layout>
      <a-layout-header>
        <Navbar :collapsed="collapsed" @on-collapse="onCollapse" />
      </a-layout-header>
      <a-layout-content class="layout-content">
        <AppMain />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref } from 'vue';
import { AppMain, Navbar } from './components';
import Menu from './components/Menu/Menu.vue';

const collapsed = ref(false);
const onCollapse = () => {
  collapsed.value = !collapsed.value;
};
</script>

<style lang="scss">
@import '../style/index.scss';
@import '../style/transition.scss';
@import '../style/dark-theme.scss';

.layout-content {
  padding: 16px;
  background-color: #f2f3f5;
}
.titlebox{
  display: flex;
  align-items: center;
  .bar{
    width:4px;
    height:24px;
    background-color: rgb(var(--primary-6));
  }
  .name{
    margin-left: 8px;
    font-size: 18px;
  }
}
.titletip{
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.arco-select-view-single.arco-select-view-disabled,.arco-select-view-multiple.arco-select-view-disabled .arco-select-view-tag{
  color: var(--color-text-3);
}
.arco-input-wrapper .arco-input[disabled],.arco-textarea[disabled]{
  -webkit-text-fill-color: var(--color-text-3);
}
</style>