<template>
    <nav class="bottom-nav">
      <router-link to="/" class="nav-item" :class="{ active: currentRoute === '/' }">
        <span class="menu-icon">directions_car</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: 60px;
    background: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #ffffff;
    padding: 10px 0;
  }
  
  .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: 12px;
    margin-top: 4px;
  }
  </style>