<template>
  <div class="app-wrapper">
    <nav-bar @on-nav-change="navChange" />
    <side-bar class="sidebar-container" :menus="curMenus" />
    <div class="main-container">
      <app-main />
      <app-footer />
    </div>
  </div>
</template>

<script>
import AppMain from "./components/AppMain.vue";
import AppFooter from "./components/AppFooter.vue";
import SideBar from "./components/SideBar.vue";
import NavBar from "./components/NavBar.vue";
import {
  systemMenuConfig,
  businessMenuConfig,
  invigilationMenuConfig,
} from "./components/menu";

export default {
  name: "Layout",
  components: {
    NavBar,
    SideBar,
    AppMain,
    AppFooter,
  },
  data() {
    return {
      curMenus: [],
      navs: {
        systemMenuConfig,
        businessMenuConfig,
        invigilationMenuConfig,
      },
    };
  },
  methods: {
    navChange(name) {
      this.curMenus = this.navs[`${name}MenuConfig`];
    },
  },
};
</script>

<style lang="scss" scoped>
.app-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}
.main-container {
  min-height: 100vh;
  transition: margin-left 0.28s;
  margin-left: 220px;
  padding-top: 60px;
  padding-bottom: 34px;
  background-color: #f0f4f9;
  position: relative;
}
.sidebar-container {
  background: #fff;
  transition: width 0.28s;
  width: 220px !important;
  top: 60px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
}
</style>
