<template>
  <div class="sidebar has-text-centered">
    <div class="has-text-centered">
      <SidewayText textSize="is-size-6" :text="appName" :bold="true" />
      <SidewayText class="is-size-6" :text="selectedItem" />
      <!-- <div class="is-size-6 has-text-weight-bold m-l-lg m-r-md">{{appName}}</div> -->
    </div>
    <aside class="menu is-primary p-xxs sidebar-menu">
      <ul class="menu-list">
        <li v-for="item in menu" class="m-t-md m-b-md">
          <a :href="item.href" :class="['button',{ 'is-active': !!item.isActive }]">
            <i :class="['icon', item.icon]"></i>
          </a>
        </li>
      </ul>
    </aside>
  </div>
</template>
<script lang="ts" src="./SideBar.ts" />
