<script>
import LocaleSelector from './LocaleSelector.vue';

export default {
  components: { LocaleSelector },
  data() {
    return {
      mobileMenuOpened: false
    }
  },
  methods: {
    openMobileClick() {
      this.mobileMenuOpened = !this.mobileMenuOpened;
    },
    closeMenu() {
      this.mobileMenuOpened = false;  
    }
  },
}

</script>

<template>
  <section class="menu">
    <nav v-if="$isMobile()">
      <div class="menu-bar">
        <div class="hamburger" @click="openMobileClick">
          <div class="hamburger-line"></div>
          <div class="hamburger-line"></div>
          <div class="hamburger-line"></div>
        </div>
        <div class="logo">
          <img src="@images/tayrona-foods-yellow.png" alt="Tayrona Foods"/>
        </div>
        <div></div>
      </div>
      <div class="menu-content" :class="{collapsed: !mobileMenuOpened}">
        <div class="links">
          <router-link class="link" @click.native="closeMenu" to="/">{{ $t('menu.home')}}</router-link>
          <router-link class="link" @click.native="closeMenu" to="/about">{{ $t('menu.about') }}</router-link>
          <router-link class="link" @click.native="closeMenu" to="/products">{{ $t('menu.products') }}</router-link>
          <!-- <router-link class="link" to="/store">{{ $t('Tienda') }}</router-link> -->
          <a href="https://tayronafoods.myshopify.com" @click.native="closeMenu" target="_blank" class="link">{{ $t('menu.shopping') }}</a>
          <router-link class="link" @click.native="closeMenu" to="/social">{{ $t('menu.social') }}</router-link>
          <router-link class="link" @click.native="closeMenu" to="/contact">{{ $t('menu.contact') }}</router-link>
          <LocaleSelector class="link"></LocaleSelector>
        </div>
      </div>
    </nav>
    <nav v-else>
      <div class="logo">
        <img src="@images/tayrona-foods-yellow.png" alt="Tayrona Foods"/>
      </div>
      <div class="links">
        <router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
        <router-link class="link" to="/about">{{ $t('menu.about') }}</router-link>
        <router-link class="link" to="/products">{{ $t('menu.products') }}</router-link>
        <!-- <router-link class="link" to="/store">{{ $t('Tienda') }}</router-link> -->
        <a href="https://tayronafoods.myshopify.com" target="_blank" class="link">{{ $t('menu.shopping') }}</a>
        <router-link class="link" to="/social">{{ $t('menu.social') }}</router-link>
        <router-link class="link" to="/contact">{{ $t('menu.contact') }}</router-link>
        <LocaleSelector class="link"></LocaleSelector>
      </div>
    </nav>
  </section>
</template>

<style lang="scss" scoped>
  // @media only screen and (min-width: 768px) {
    /* tablets and desktop */
  .menu {
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;

    nav {
      margin: 0 auto;
      padding: 8px 50px;
      display: grid;
      grid-template-columns: auto auto;
      background: transparent;
      width: 960px;
      height: 100%;
      transition: background-color .3s ease-in-out;

      .logo img{
        height: 100px;
        width: 100px;;
      }

      .links {
        justify-self: end;
        align-self: center;

        .link {
          margin-right: 20px;
          color: #fff;
          text-decoration: none;

          &.router-link-active {
            color: #FECE16;
          }

          &:hover {
            color: #FECE16;
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }    

    &.has-sticky-0 nav{
      background-color: rgba(0, 0, 0, 0.5);
    }
      
    &.has-sticky-1 nav{
      background-color: #000;
    }

    .hamburger {
      width: 70px;
      height: 50px;
      padding: 14px 18px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      &-line {
        width: 100%;
        background-color: #fff;
        height: 2px;
      }
    }
  }
  // }
  @media only screen and (max-width: 960px) {
    .menu {
      nav, .nav-wrapper {
        width: 100%;
        .links .link {
          font-size: 82%;
        }
      }
    }
  }

  @media only screen and (max-width: 767px) {
    .menu {
      &-bar {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        height: 115px;
        transition: height .2s ease-out;

        .logo, .hamburger {
          justify-self: center;
          align-self: center;
        }

        .logo {
          opacity: 1;
          transition: opacity .2s ease-out;
        }
      }
      &-content {
        color: white;

        &.collapsed {
          display: none;
        }
      }
      nav {
        display: block;
        background-color: #000;
        padding: 0;

        .links {
          padding: 0 8px 16px;
          .link {
            text-align: center;
            display: block;
            padding: 8px;
            font-size: 18px;
          }
        }
      }  

      &.has-sticky-0, &.has-sticky-1 {
        .menu-bar {
          height: 50px;
        }
        .logo {
          opacity: 0;
          overflow: hidden;
        }
        nav {
          background-color: #000;
        }
      }
    }
  }
</style>