<template>
    <nav>
      <!-- Desktop Menu -->
      <div class="desktop-menu" v-show="!mobile_menu">
        <div class="menu-row">
          <div class="brand">
            <router-link to="/">
              <img src="../assets/logo2.png" width="100px">
            </router-link>
          </div>
          <div class="menu-items">
            <li v-for="(link) in menuItems" :key="link.to">
              <router-link class="menu-item" :to="link.to">{{ link.label }}</router-link>
            </li>
            <li>
              <button class="menu-item" @click="openContact">Contact</button>
            </li>
          </div>
        </div>
      </div>
  
      <!-- Mobile Menu -->
      <div class="mobile-menu">
            <div class="menu-item">
            <router-link to="/">
                <img src="../assets/logo2.png" width="100px">
            </router-link>
            </div>
            <div class="menu-item">
                <button @click="mobileMenu()">
                    <v-icon class="menu-button">mdi-menu</v-icon>
                </button>
            </div>
        </div>
  
      <!-- Mobile Drawer -->
      <v-navigation-drawer v-model="mobile_menu" fixed temporary right class="mobile-drawer">
        <div class="close-inner">
          <button class="close" @click="mobileMenu"><v-icon>mdi-close</v-icon></button>
        </div>
        <v-list dense v-for="link in menuItems" :key="link.to">
          <v-list-item :to="link.to" link>
            <v-list-item-content>
              {{ link.label }}
            </v-list-item-content>
          </v-list-item>
        </v-list>
        <v-list dense>
          <v-list-item>
            <v-list-item-content>
              <button class="menu-item" @click="openContact">Contact</button>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
  
      <!-- Contact Form -->
      <contact-form ref="contactForm"></contact-form>
    </nav>
  </template>
  
  <script>
  import ContactForm from '@/components/contactForm.vue';
  
  export default {
    components: {
      ContactForm
    },
    name: 'pageHeader',
    data() {
      return {
        mobile_menu: false,
        menuItems: [
          { to: '/', label: 'Home' },
          { to: '/affiliates', label: 'Affiliates' },
          { to: '/#features', label: 'Features' },
          { to: '/signup', label: 'Sign Up' },
          { to: '/signin', label: 'Sign In' },
        ],
      };
    },
    methods: {
      mobileMenu() {
        this.mobile_menu = !this.mobile_menu;
      },
      openContact() {
        this.mobile_menu = false;
        this.$refs.contactForm.setOpen();
      },
    },
  };
  </script>

<style lang="scss">
nav{
    padding:0;

    a{
        font-weight: 400;
    }
    .desktop-menu{
        display:none;

        @media (min-width:960px){
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            position:fixed;
            height:70px;
            width:100%;
            display: flex;
            padding:20px;
            z-index:9999999;

            .menu-row{
                display: flex;
                justify-content: space-between;
                flex-direction: row;
                align-items: center;
                width:100%;

                .brand{
                    margin-right:18px;
                }
                .menu-items{
                    color:inherit;
                    display: flex;
                    flex-direction: row;
                    padding-top: 3px;

                    li{
                        text-decoration: none;
                        list-style: none;
                    }

                    .menu-item{
                        color:inherit;
                        text-decoration: none;
                        margin-right:18px;
                        font-weight: 400;
                    }
                }
            }
        }
    }
    .mobile-menu{
        display:flex;
        height:60px;
        justify-content: space-between;
        padding: 0px 20px;
        align-items: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        top:0;
        left: 0;
        width:100%;
        z-index:10;
        position: fixed;
        background-color:#fff;
        .menu-button{
            color:rgba(0,0,0,0.7);
        }
        @media (min-width: 960px){
            display:none;
        }
    }
    .mobile-drawer{
        position: fixed;
        top: 0;
        right: 0;
        z-index: 999;

        @media(min-width:960px){
            display:none;
        }

        .close-inner{
            display: flex;
            justify-content: flex-end;
            margin-bottom: 0;
            padding-bottom: 0px;
            .close{
                padding-top: 5px;
                padding-right:5px
            }
        }
    }
}
</style>