<template>
  <aside class="main-sidebar">
    <section class="sidebar">
      <form v-on:submit.prevent class="sidebar-form">
        <div class="input-group">
          <input type="text"
                 name="search"
                 id="search"
                 class="search form-control"
                 data-toggle="hideseek"
                 placeholder="搜索菜单"
                 data-list=".sidebar-menu">
          <span class="input-group-btn">
            <button type="submit" name="search" id="search-btn" class="btn btn-flat">
              <i class="fa fa-search"></i>
            </button>
          </span>
        </div>
      </form>
      <sidebar-menu />
    </section>
  </aside>
</template>
<script>
  import SidebarMenu from './SidebarMenu'

  export default {
    name: 'Sidebar',
    props: ['displayName', 'pictureUrl'],
    mounted () {
      let _this = this
      _this.init()
      window.onresize = function temp () {
        _this.init()
      }
    },
    methods: {
      init () {
        // let tmp = document.documentElement.clientHeight - 80
        // document.getElementsByClassName('sidebar')[0].style.height = tmp + 'px'
        // document.getElementById('app').style.height = document.documentElement.clientHeight + 'px'
      }
    },
    components: { SidebarMenu }
  }
</script>
<style scoped>
  .user-panel .image img {
    border-radius: 50%;
  }
</style>
