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' : '']">
      <a  v-for="(item, index) in sidebtnlist"
      :key="index" :href="item.url">
      <div
      class="sidebar-btn py-2 px-3 mb-3 pointer"
      :class="[pageurl.indexOf(item.url)>-1 ? 'active' : '' ]"
      
        >
          {{ item.menu }}
        </div>
        </a>
      </div>
    </div>
      `,
  data() {
    return {
      pageurl: location.pathname,
    };
  },
  // methods: {
  //   onMenu: function (item) {
  //     location.href = item.url;
  //   },
  // },
});