menu background images not loaded on mobile

This commit is contained in:
ManjaroOne666 2019-01-30 20:08:51 +00:00
parent c1cb8fed89
commit 6068b50add
1 changed files with 7 additions and 2 deletions

View File

@ -22,7 +22,7 @@
> >
<div v-if="item.bgImgUrl" <div v-if="item.bgImgUrl"
class="menu-background menu-link-background" class="menu-background menu-link-background"
:style="{ 'background-image': `url(${item.bgImgUrl})` }" :style="{ 'background-image': loadMenuImages ? `url(${item.bgImgUrl})` : 'none' }"
> >
</div> </div>
<nuxt-link class="site-nav__link" <nuxt-link class="site-nav__link"
@ -78,7 +78,7 @@ export default {
data () { data () {
return { return {
loadMenuImages: false, loadMenuImages: true,
siteNav: [ siteNav: [
{ 'to': '/', 'text': 'Home', bgImgUrl: '/img/devices--bw.jpg'}, { 'to': '/', 'text': 'Home', bgImgUrl: '/img/devices--bw.jpg'},
{ 'to': '/galleries', 'text': 'Galleries', bgImgUrl: '/img/photo-box--bw.jpg' }, { 'to': '/galleries', 'text': 'Galleries', bgImgUrl: '/img/photo-box--bw.jpg' },
@ -94,6 +94,11 @@ export default {
] ]
} }
}, },
mounted () {
const mq = window.matchMedia("(min-width: 40em)")
this.loadMenuImages = mq.matches
},
} }
</script> </script>