<template>
  <el-container class="container">
    <el-header style="box-shadow: var(--el-box-shadow);">
      <TopBar />
    </el-header>
    <el-container>
      <el-aside width="200px">
        <SideBar class="sidebar" />
      </el-aside>
      <el-main>
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
          <el-radio-button @click="toggleSideBar">expand</el-radio-button>
        </el-radio-group>
      </el-main>
    </el-container>
  </el-container>

  <!--
  <img src="./assets/logo.png">
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view />
  -->
</template>

<script>
// @ is an alias to /src
import SideBar from '@/components/SideBar.vue'
import TopBar from './components/TopBar.vue'

export default {
  name: 'App',
  components: {
    SideBar,
    TopBar
  }
}
</script>

<style>
@import 'normalize.css/normalize.css';

html,
body,
#app,
.container {
  height: 100%;
}

#app {
  text-align: center;
}

.el-header {
  padding: 0;
  border: 0;
}
</style>
