129 lines
3.5 KiB
Vue
129 lines
3.5 KiB
Vue
<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>
|