<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> -->
      <a @click="mobileMenu" class="icon"> Menu </a>
    </div>
    <!-- <v-toolbar >
      <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: '/en/', icon: 'mdi-email' },
            { title: 'World', path: '/en/category/world', icon: '' },
            { title: 'National', path: '/en/category/national', icon: '' },
            { title: 'Local', path: '/en/category/local', icon: '' },
            { title: 'Article', path: '/en/category/article', icon: '' },
            { title: 'Editorial', path: '/en/category/editorial', icon: '' },
            { title: 'Video', path: '/en/category/video', icon: '' },
            { title: 'About Us', path: '/en/category/about', icon: '' },
            { title: 'Contact Us', path: '/en/category/contact', icon: '' },
            { title: 'বাংলা', path: '/', 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;
  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 a:hover {
  background-color: #ffaf13;
  color: rgba(255,0,0,1);
}

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

.topnav .icon {
  display: none;
}

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

@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>
