Example video: https://www.dropbox.com/s/95b7i6cm5b3xoie/vue-sidebar-demo.mp4?dl=0

app.vue

<style lang="sass" scoped>
  .app {
    position : relative;
    width    : 100vw;
    height   : 100vh;
    margin   : 0 !important;
  }

  .appbar {
    position   : absolute;
    top        : 0;
    left       : 0;
    right      : 0;
    height     : 64px;
    padding    : .5em 1.1em;
    background : #db4437;

    svg {
      display     : inline-block;
      max-width   : 24px;
      max-height  : 48px;
      margin-left : 4px;
      fill        : rgba(255,255,255,1);
      cursor      : pointer;
    }

  }

  .sidebar {
    position : absolute;
    top      : 64px;
    bottom   : 0;
    left     : 0;
    padding  : 1em 0;
  }

  .view {
    position   : absolute;
    top        : 64px;
    right      : 0;
    bottom     : 0;
    left       : 64px;
    background : #eee;
    padding    : 1em;
  }
</style>

<template lang="jade">
  .app
    .appbar
      svg(@click='$refs.sidebar.show')
        use(xlink:href="/static/sprites.svg#icon-menu")
    .sidebar
      v-sidebar(
        :mini='sidemenu.mini',
        :persistence='sidemenu.persistence',
        v-ref:sidebar='') This would be my header
    .view
</template>

<script>
  import SuiButton   from './components/sui-button.vue'
  import VSidebar    from './components/v-sidebar.vue'

  export default {
    data () {
      return {
        sidemenu: {
          mini: [
            { svg: 'icon-question_answer' },
            { svg: 'icon-speaker_notes' },
            { svg: 'icon-thumb_up' },
            { svg: 'icon-thumb_down' },
          ],
          persistence: [
            {
              items: [
                { text: 'Second' , svg: 'icon-question_answer' },
                { text: 'Third'  , svg: 'icon-speaker_notes' },
                { text: 'Forth'  , svg: 'icon-thumb_up' },
                { text: 'Fith'   , svg: 'icon-thumb_down' },
              ]
            },
            {
              header: 'Subheader',
              items: [
                { text: 'First'  , image: 'http://semantic-ui.com/images/avatar/large/elliot.jpg' },
                { text: 'Second' , image: 'http://semantic-ui.com/images/avatar/large/elliot.jpg' },
                { text: 'Third'  , image: 'http://semantic-ui.com/images/avatar/large/elliot.jpg' },
              ]
            },
            {
              items: [
                { text: 'Fourth'  , image: 'http://semantic-ui.com/images/avatar/large/elliot.jpg' },
                { text: 'Fith' , image: 'http://semantic-ui.com/images/avatar/large/elliot.jpg' },
                { text: 'Sixth'  , image: 'http://semantic-ui.com/images/avatar/large/elliot.jpg' },
              ]
            }
          ]
        }
      }
    },

    events: {
      'v-sidebar:show' () {
        console.log('v-sidebar:show')
      },

      'v-sidebar:hide' () {
        console.log('v-sidebar:hide')
      }
    },

    components : {
      SuiButton,
      VSidebar
    }
  }
</script>

v-sidebar.vue

<style lang="sass" scoped>
  .v-sidebar {
  }

  .header {
    min-height    : 64px;
    padding       : 1.5em 1em 1em;
    margin-bottom : 8px;
    background    : rgba(0,0,0,.1);
    color         : rgba(0,0,0,.54);
  }

  .mini {
    width          : 64px;
    align-items    : center;
  }

  .persistent {
    position   : fixed;
    top        : 0;
    left       : 0;
    bottom     : 0;
    width      : 20vw;
    background : #fff;
    overflow   : scroll;
    z-index    : 10;

    .divider {
      padding-bottom : 8px;
      margin-bottom  : 10px;
      border-bottom  : 1px solid rgba(0,0,0,.1);
    }

    .subheader {
      flex        : 0 0 48px;
      padding     : 0 16px 8px;
      line-height : 40px;
      font-weight : bolder;
      color       : rgba(0,0,0,.54);
    }

    &.v-transition {
      transition : all .2s ease-in-out .1s;
      transform  : translate(0, 0);
    }

    &.v-enter,
    &.v-leave {
      transform : translate(-100%, 0);
    }
  }

  .items {
    display        : flex;
    flex-direction : column;

    .item {
      display        : flex;
      flex           : 0 0 48px;
      flex-direction : row;
      align-items    : center;
      padding        : 8px 16px;
      color          : rgba(0,0,0,.84);
      transition     : all .2s ease-in-out;

      &:hover {
        cursor     : pointer;
        background : rgba(0,0,0,.05)
      }

    }

    .icon {
      width        : 40px;
      margin-right : 16px;

      img {
        display        : inline-block;
        max-width      : 32px;
        max-height     : 48px;
        vertical-align : top;
      }

      svg {
        display      : inline-block;
        max-width    : 24px;
        max-height   : 48px;
        margin-left  : 4px;
        fill         : rgba(0,0,0,.54);
      }
    }

    .text {
      font-weight : bolder;
    }
  }

  .overlay {
    position   : absolute;
    top        : 0;
    left       : 0;
    bottom     : 0;
    width      : 100vw;
    background : rgba(0,0,0,.54);
    z-index    : 1;

    &.v-transition {
      transition : all .2s ease-in-out;
      opacity    : 1;
    }

    &.v-enter,
    &.v-leave {
      opacity    : 0;
    }
  }

</style>

<template lang="jade">
  .v-sidebar(@click='hide')
    .mini
      .items
        slot(name='mini')
          .item(v-for='item in mini')
            .icon
              img(:src='item.image', v-if='item.image')
              svg(:class='item.svg', v-if='item.svg')
                use(xlink:href="/static/sprites.svg#{{ item.svg }}")
    .persistent(v-if='visible' transition='')
      .header
        slot
      template(v-for='persistent in persistence')
        .items
          slot(name='persistence')
            .divider(v-if='$index != 0')
            .subheader(v-if="persistent.header") {{ persistent.header }}
            .item(v-for="item in persistent.items")
              .icon
                img(:src='item.image', v-if='item.image')
                svg(v-if='item.svg', :class='item.svg')
                  use(xlink:href="/static/sprites.svg#{{ item.svg }}")
              .text {{ item.text }}
    .overlay(v-if='visible' transition='')
</template>

<script>
  import Vue     from 'vue'

  export default {
    name: 'sidebar',

    props: {
      mini: {
        type    : Array,
        default : false
      },
      persistence: {
        type    : Array,
        default : false
      },
      visible: Boolean,
    },

    methods: {
      show () {
        this.visible = true
        this.$root.$broadcast('v-sidebar:show')
      },

      hide () {
        this.visible = false
        this.$root.$broadcast('v-sidebar:hide')
      },

      toggle () {
        this.visible ? this.hide() : this.show()
      },
    }

  }
</script>