<template>
  <!--小螢幕導航列-->
  <div class="myNav-small">
    <span
      @click="clickSidebarToggle()"
      v-if="MyName != '首頁資訊總覽' && MyName != '近期活動'&& MyName != '個人設定'&&MyNo!= '1' && MyName != '近期活動'&& MyNo!= 'X'"
      class="sidebar-toggle"
    >
      <Icon
        class="menu-icon"
        type="md-menu"
     
        :class="{
              'menu-icon-close': this.$store.getters.getSidebarisOpen == false,
            }"
      />
    </span>
    <span class="mytitle">{{ MyName }} | {{windowWidth}}px</span>
    <span class="menu-group">
      <span class="menu-item" :class="{'menu-item-selected':MyNo==1}">
        <router-link to="/studentWeb/homeView">
          <svg-icon icon-class="home" class="tabIcon3" />
        </router-link>
      </span>
      <span class="menu-item" :class="{'menu-item-selected':MyNo==4}">
        <router-link to="/studentWeb/eventView">
          <svg-icon icon-class="selflearning" class="tabIcon2" />
        </router-link>
      </span>
      <!--<span class="menu-item" :class="{'menu-item-selected':MyNo==3}">
        <router-link to="/studentWeb/studyView">
          <svg-icon icon-class="note" class="tabIcon1" />
        </router-link>
      </span>
      <span class="menu-item" :class="{'menu-item-selected':MyNo==5}">
        <router-link to="/studentWeb/hiteachView">
          <svg-icon icon-class="hiteach" class="tabIcon4" />
        </router-link>
      </span>
      <span class="menu-item" :class="{'menu-item-selected':MyNo==6}">
        <router-link to="/studentWeb/InformView" >
          <svg-icon icon-class="bell" class="tabIcon1" />
        </router-link>
      </span>-->

      <span class="menu-item profile-dropdown">
        <Avatar
          src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
        />
        <div id="profile-pop">
            <span class="profile-pop-triangle"></span>
            <h5 class="profileName">Nancy  (ST11096)</h5>
            <router-link to="/setting">
              <li class="profile-pop-item">
                <svg-icon icon-class="setting" class="profile-pop-itemIcon1" />個人設定
              </li>
            </router-link>
            <li class="profile-pop-item">
              <svg-icon icon-class="logout" class="profile-pop-itemIcon2" />登出
            </li>
          </div>
      </span>
    </span>
  </div>
</template>

<script>
export default {
  name: "SmallNavBar",
  props: ["MyName", "MyNo","windowWidth"],
  methods: {
    clickSidebarToggle() {
      this.$store.commit("ToggleSidebar");
    },
  },
};
</script>

<style scoped>
@import "~@/assets/student-web/component_styles/small-navbar.css";
</style>