talos/docs/website/components/Sidebar.vue

<template>
  <div class="sidenav pt-4 pb-4">
    <ul>
      <li
        v-for="entry in $store.state.sidebar.menu"
        :key="entry.title"
        @click="selected = entry.title"
        class="py-2"
      >
        <a
          class="sidebar-category"
          :href="'#' + entry.title"
          @click="handleClick(entry)"
        >
          <span class="relative">{{ entry.title }}</span>
        </a>
        <ul class="py-0 pl-4">
          <li v-for="item in entry.items" :key="item.path" class="ml-0">
            <a
              class="sidebar-item"
              :href="'#' + item.title"
              @click="handleClick(item)"
            >
              <span class="relative">{{ item.title }}</span>
            </a>
            <ul class="py-0 pl-4">
              <li v-for="child in item.children" :key="child.path" class="ml-0">
                <a
                  class="sidebar-child"
                  :href="'#' + child.title"
                  @click="handleClick(child)"
                >
                  <span class="relative">{{ child.title }}</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Sidebar',

  data() {
    return {
      selected: undefined
    }
  },

  methods: {
    handleClick(item) {
      console.log('setting')
      this.$store.commit('sidebar/setActiveDoc', item.path)
    }
  }
}
</script>

<style>
.sidenav {
  height: 100%;
  position: fixed;
  z-index: 1;
  overflow-x: hidden;
}

a.sidebar-category {
  @apply font-brand text-gray-600 relative block text-lg font-bold tracking-wide;
}

a.sidebar-category:hover {
  @apply text-gray-900;
}

a.sidebar-item {
  @apply font-brand text-gray-600 relative block text-base tracking-wide;
}

a.sidebar-item:hover {
  @apply text-gray-900;
}

a.sidebar-child {
  @apply font-brand text-gray-600 relative block text-xs tracking-wide;
}

a.sidebar-child:hover {
  @apply text-gray-900;
}

a.active {
  @apply text-gray-900 font-bold;
}
</style>