<template>
  <aside
    class="border-right bg-light d-flex flex-column position-fixed p-0"
    :class="{ 'full-height': fullHeight }"
  >
    <ul class="pl-0">
      <router-link
        v-for="(item, index) in sidebarItems"
        :key="index"
        class="d-block w-100 m-0 pt-2 px-3 border-bottom"
        :to="item.linkTo"
        tag="li"
      >
        <a>
          <h5>{{ item.title }}</h5>
        </a>
      </router-link>
    </ul>
  </aside>
</template>

<script>
export default {
  name: 'vetro-nav-sidebar',
  props: {
    sidebarItems: {
      type: Array,
      default: () => [],
      validator: (si) => si.every((el) => el.title && el.linkTo),
    },
    fullHeight: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/variables.scss';
aside {
  font-family: Lato, sans-serif;
  font-weight: 400;
  box-shadow: 0px 10px 12px rgba(0, 0, 0, 0.5);
  height: $main-page-height;
  width: 250px;
  z-index: 999;

  &.full-height {
    height: 100%;
  }

  ul {
    list-style: none;
    li {
      &:first-child {
        border-top: 1px solid #dee2e6 !important;
      }
      &.router-link-active {
        background: #1880c0 !important;
        h5 {
          color: white !important;
        }
      }

      &:hover {
        background: #2ad;
        a {
          color: white;

          &:hover {
            text-decoration: none;
          }
        }
      }
    }
  }
}
</style>
