<template lang="html">
  <navbar class="navbar">
    <a href="{{href}}" target="{{target}}">
      <h2>{{title}}</h2>
    </a>
    <div class=" nav-tabs pure-menu pure-menu-horizontal">
        <div class="pure-menu-list">
          <slot name="tabs"></slot>
        </div>
        <div class="nav-aside">
          <slot name="aside"></slot>
        </div>
    </div>
  </navbar>
</template>

<style lang="sass">
   @import "../../styles/core/base.scss";

  .navbar{
    background-color: $navColor;
    width:100%;
    display:block;


    &:after{
        content:'';
        clear:both;
        display:block;
    }

    $hmg:15px;
    $hfz:20px;
    $hNavTabs:$hmg * 2 + $hfz;
    h2{
      margin:$hmg;
      font-size:$hfz;
      color:#fff;
      float: left;
    }

    .nav-tabs{
      height:$hNavTabs;
      line-height:$hNavTabs - 8px * 2;
    }
    .nav-aside{
      margin:8px;
      float:right;
    }
  }
</style>

<script>

export default {
  props:{
    'title':{
      type:String,
      required:true,
    },
    href:{
      default:'javascript:void 0',
    },
    target:{
    },
  },
  data: function () {
    return {
    }
  },
  computed: {},
  ready: function () {},
  attached: function () {},
  methods: {},
  components: {}
}
</script>
