tayronafoods-web/src/components/Menu.vue

<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>
      <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('Tienda') }}</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>
      <img class="logo" src="@images/tayrona-foods-yellow.png" />
      <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('Tienda') }}</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: 1000;
    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 {
        height: 75px;
        width: 75px;;
      }

      .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%;
      }
      &-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 nav, &.has-sticky-1 nav{
        background-color: #000;
      }
    }
  }
</style>