<template>
  <v-container>

    <div class="topnav" :class="{responsive: isMobile}" >
      <nuxt-link v-for="item in menuItems" :key="item.title" :to="item.path" @click="mobileMenu">{{ item.title }}</nuxt-link>
      <!-- <nuxt-link to="#home" class="active">Home</nuxt-link> -->
      <!-- <nuxt-link to="#news">News</nuxt-link>
      <nuxt-link to="#contact">Contact</nuxt-link>
      <nuxt-link to="#about">About</nuxt-link> -->
      <button  @click="mobileMenu" class="icon"> Menu </button>
    </div>
    <!-- <v-toolbar >button
      <span class="hidden-md-and-up"> {{ appTitle }}
        <v-toolbar-side-icon @click="sidebar = !sidebar"> <v-icon left dark> "mdi-email" </v-icon> </v-toolbar-side-icon>
      </span>
      <v-toolbar-title>
        <nuxt-link to="/" style="cursor: pointer"> 
          {{ appTitle }}
        </nuxt-link>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-xs-only">
        <v-btn v-for="item in menuItems" :key="item.title" :to="item.path">
          <v-icon left dark>{{ item.icon }}</v-icon>
          {{ item.title }}
        </v-btn>
      </v-toolbar-items>
    </v-toolbar> -->
  </v-container>
</template>
<script>
export default {
    data() {
      return {
        appTitle: 'Menu',
        isMobile: false,
        menuItems: [
            { title: 'Home', path: '/', icon: 'mdi-home' },
            { title: 'বিশ্ব', path: '/category/world', icon: '' },
            { title: 'জাতীয়', path: '/category/national', icon: '' },
            { title: 'স্থানীয়', path: '/category/local', icon: '' },
            { title: 'নিবন্ধ', path: '/category/article', icon: '' },
            { title: 'সম্পাদকীয়', path: '/category/editorial', icon: '' },
            { title: 'ভিডিও', path: '/category/video', icon: '' },
            { title: 'আমাদের সম্পর্কে', path: '/category/about', icon: '' },
            { title: 'যোগাযোগ', path: '/category/contact', icon: '' },
            { title: 'English', path: '/en/', icon: '' },

           
            ]
      }
    // async fetch() {
    //   this.mountains = await fetch(process.env.apiLink).then((res) => res.json());
    // },
    },
     watch: {
      '$route' () {
        // // this will close the dropdown
        // this.dropdownPopoverShow = false,  
        // // this will close the mobile menu on page change
        // this.isOpen = false
        this.isMobile = false
      }
    }, 
    methods: {
    mobileMenu: function() {
      this.isMobile = !this.isMobile;
      // some code to filter users
    }
  }
}
</script>
<style scoped>

.topnav {
  overflow: hidden;
    position:relative;

  padding: 0;
  border-radius: 5px;
  background-color: rgba(255,0,0,1);
  background-image: linear-gradient(180deg, rgba(166,22,22,1), rgba(228,30,30,19) );
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav button{
  position:absolute;
  top:0px;
  right:0px;
  color:white;
  padding:15px 20px;

}
.topnav button:hover {
  background-color: #ffaf13;
  color: rgba(255,0,0,1);
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}



@media screen and (max-width: 630px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (min-width: 630px){
   button{
    display:none;
  }

}
@media screen and (max-width: 630px) {
 
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


</style>
