smsb-web-develop/src/layout/index.vue

<template>
  <div class="l-flex c-app">
    <sidebar class="l-flex__none" />
    <div class="l-flex__auto l-flex--col c-app__content">
      <navbar class="l-flex__none" />
      <app-main class="l-flex__fill" />
    </div>
  </div>
</template>

<script>
import Sidebar from './components/Sidebar'
import Navbar from './components/Navbar'
import AppMain from './components/AppMain'

export default {
  name: 'Layout',
  components: {
    Sidebar,
    Navbar,
    AppMain
  }
}
</script>

<style lang="scss" scoped>
.c-app {
  position: relative;
  height: 100%;
  width: 100%;

  &__content {
    position: relative;
    overflow: hidden;
  }
}
</style>