seepur/resources/scripts/applications/shared/components/SideBar/SideBar.vue

<template>
  <div>
    <div class="section">
      <div class="menu-titles">
        <router-link to="/" class>
          <SidewayText textSize="is-size-6" :text="appName" :bold="true" />
        </router-link>
        <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 sidebar-menu">
        <ul class="menu-list">
          <li
            v-for="item in menu"
            class="m-t-md m-b-md"
            @click="onItemClicked(item)"
            :key="item.text"
          >
            <router-link
              active-class="is-active"
              v-if="item.isRouterLink"
              :to="item.href"
              class="button"
              exact
              :title="item.text"
            >
              <i :class="['icon', item.icon]"></i>
            </router-link>
            <a
              v-else
              :href="item.href"
              :title="item.text"
              :class="['button',{ 'is-active': !!item.isActive }]"
            >
              <i :class="['icon', item.icon]"></i>
            </a>
          </li>
        </ul>
      </aside>
    </div>
    <!-- <div class="is-hidden-desktop">texts</div> -->
  </div>
</template>
<script lang="ts" >
import SidewayText from "../SidewayText/SidewayText.vue";

export interface IMenuItem {
  href: string;
  text: string;
  icon: string;
  isRouterLink: boolean;
}
export default {
  components: {
    SidewayText
  },
  beforeCreate() {},
  created() {
    let currentPage = this.$router.currentRoute.path.split("/")[1];
    if (currentPage) currentPage[0].toUpperCase;
    else currentPage = this.menu[0].text;
    this.selectedItem = currentPage;
  },
  methods: {
    onItemClicked(item: IMenuItem) {
      this.selectedItem = item.text;
    }
  },
  data: () => ({
    selectedItem: ""
  }),
  name: "SideBar",
  props: ["menu", "title", "appName"]
};
</script>