<template>
  <aside class="aside">
    <a class="logo"></a>

    <nav class="nav-list">
      <a
        class="item"
        v-for="it in navs"
        :key="it.path"
        :class="{ active: it.path === tab }"
        @click="changeTab(it)"
        :text="it.title"
      >
      </a>
    </nav>

    <span class="holder"></span>
    <span class="version">{{ $store.version }}</span>
  </aside>
</template>

<script>
export default {
  data() {
    return {
      navs: [
        { title: '代 理', path: '/proxies' },
        { title: '规 则', path: '/rules' },
        { title: '连 接', path: '/connects' },
        { title: '订 阅', path: '/remote' },
        { title: '设 置', path: '/config' }
      ],
      tab: localStorage.getItem('tab') || '/proxies'
    }
  },
  methods: {
    changeTab(it) {
      this.tab = it.path
      localStorage.setItem('tab', it.path)
      this.$router.push(it.path)
    }
  }
}
</script>

<style lang="scss">
.aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  width: 128px;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.03);

  .logo {
    width: 64px;
    height: 64px;
    margin: 16px auto;
    background: url(/icons/128x128.png) no-repeat;
    background-size: 100%;
  }

  .nav-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 16px;

    .item {
      width: 100%;
      height: 32px;
      margin-top: 16px;
      line-height: 32px;
      border-radius: 8px;
      text-align: center;
      cursor: pointer;
      transition: color 0.2s linear, background 0.2s linear, box-shadow 0.2s ease-in-out;

      &:hover {
        box-shadow: 0 0 0 1px var(--color-blue-a);
      }

      &.active {
        color: #fff;
        background: var(--color-blue-1);
      }
    }
  }

  .version {
    line-height: 36px;
    text-align: center;
  }
}
</style>
