<template>
  <div class="row">
    <Menu class="col-2"></Menu>
    <div class="main col-10 row">
      <div class="row navbar justify-between">
        <HomeButton></HomeButton>
        <Avatar :username="'Admin'"></Avatar>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Menu from 'components/Menu.vue'
import Avatar from 'components/Avatar.vue'
import HomeButton from 'components/HomeButton.vue'

export default {
  name: 'Main',
  components: {
    HomeButton,
    Menu,
    Avatar
  }
}
</script>

<style lang="scss" scoped>
  .main {
    background-color: $yellow-orange-color-wheel;
    min-height: 100vh;
  }

  .navbar {
    margin-top: 10px;
    margin-bottom: 10px;
    min-width: 100%;
    height: 50px;
    padding: 0 2%;
  }
</style>
