Vue.component("ito-sidebar", {
  props: ["sidemenuname", "sidemenulist", "sidebtnlist"],
  template: `
      <div id="sidebar">
      <div class="sidebar-box" v-show="sidemenulist">
        <div class="sidebar-header py-2 px-3 bg-lightgreen font-white">
          {{sidemenuname}}
        </div>
        <div
          v-for="(item, index) in sidemenulist"
          :key="index"
          class="py-2 px-3 bg-lightgrey font-grey pointer"
        >
          <a
              :href="item.url"
              class="text-decoration-none"
              :class="[pageurl.indexOf(item.url)>-1 && !item.submenu ? 'font-lightgreen' : 'font-grey' ]"
          >
              {{ item.menu }}
          </a>
          <div v-if="item.submenu" v-for="(sub, index) in item.submenu" :key="index"
          class="py-1 ps-3 pointer">
          <a :href="sub.url"
          class="text-decoration-none"
          :class="[pageurl.indexOf(sub.url)>-1 ? 'font-lightgreen' : 'font-grey' ]"> {{ sub.menu }}</a>
      </div>
        </div>
      </div>
      <div class="sidebar-btn-box font-lightgreen text-center"
      :class="[sidemenulist != null ? 'py-5' : '']">
        <div
          v-for="(item, index) in sidebtnlist"
          :key="index"
          class="sidebar-btn py-2 px-3 my-3 pointer"
          :class="[pageurl.indexOf(item.url)>-1 ? 'active' : '' ]"
          @click="onMenu(item)"
        >
          {{ item.menu }}
        </div>
      </div>
    </div>
      `,
  data() {
    return {
      pageurl: location.pathname,
    };
  },
  methods: {
    onMenu: function (item) {
      location.href = item.url;
    },
  },
});