<template>
  <nav class="bottom-nav">
    <router-link to="/" class="nav-item" :class="{ active: currentRoute === '/' }">
      <span class="menu-icon">live_tv</span>
      <span class="nav-text">Главное</span>
    </router-link>
    <router-link to="/compilation" class="nav-item" :class="{ active: currentRoute === '/compilation' }">
      <span class="menu-icon">movie</span>
      <span class="nav-text">Подборка</span>
    </router-link>
    <router-link to="/collections" class="nav-item" :class="{ active: currentRoute === '/collections' }">
      <span class="menu-icon">star</span>
      <span class="nav-text">Коллекции</span>
    </router-link>
    <router-link to="/profile" class="nav-item" :class="{ active: currentRoute === '/profile' }">
      <span class="menu-icon">person</span>
      <span class="nav-text">Профиль</span>
    </router-link>
  </nav>
</template>

<script>
export default {
  name: 'BottomNav',
  computed: {
    currentRoute() {
      return this.$route.path
    }
  }
}
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 49px;
  background: #000000;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #1F1F1F;
  padding: 8px 0 34px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #686868;
  width: 25%;
}

.nav-item.active {
  color: #2196F3;
}

.menu-icon {
  font-family: 'Material Icons';
  color: #686868;
  font-size: 24px;
}

.nav-item.active .menu-icon {
  color: #2196F3;
}

.nav-text {
  font-size: 10px;
  margin-top: 2px;
}
</style>
  