In this scenario, the toggle for the menu is controlled by a checkbox with the id "check" below. I attempted to bind v-bind:class="[{'antiscroll': checkboxValue}]" to the body in HTML, and also in the main App.vue file, but it did not work as expected. However, it worked when I placed it within the navigation bar on the same .vue page. How can I implement this functionality in the body or the main vue app? The requirement is that when the screen width is less than 1300 pixels and checkboxValue is set to true, the antiscroll class should be applied.
navigationbar.vue
<template>
<nav> <!-- The header menu or navigation bar -->
<input type="checkbox" id="check" v-model="checkboxValue"> <!-- The three stripe icon for the drop down menu, note: drop down menu only works in smaller screen -->
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo"> <!-- The logo and website name -->
<router-link to="/" @click="uncheck">
<img class="logoimage" src="#">
<font class="logoname" face="Arial" style="float: left; margin-left: 10px; margin-right: 100px">Test</font>
</router-link>
</label>
<ul> <!-- The menu contains href links to other pages -->
<li>
<router-link to="/" @click="uncheck"><b>Home</b></router-link>
</li>
<li>
<router-link to="/catalog" @click="uncheck"><b>Catalog</b></router-link>
</li>
<li>
<router-link to="/about" @click="uncheck"><b>About</b></router-link>
</li>
<li> <!-- The search bar -->
<input type="search" placeholder="Search" class="search" onchange="Search()" id="search">
</li>
</ul>
</nav>
</template>
<script>
export default {
name: 'navigationbar',
data () {
return {
checkboxValue: false
}
},
methods: {
uncheck () {
this.checkboxValue = false
}
}
}
</script>
App.vue
<template>
<div>
<navigationbar/>
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</div>
</template>
<script>
import navigationbar from './components/navigationbar.vue'
export default {
name: 'App',
components: {
navigationbar
}
}
</script>
<style>
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
background: #c5d5cb;
}
nav{
height: 80px;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color:rgb(22, 22, 22);
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.router-link-exact-active,a:hover{ /* Changes background color of a button when hovered */
background: #e9ffe9;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: rgb(22, 22, 22);
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
}
#check{
display: none;
}
@media (max-width: 850px){ /* The @media adjust the components when the screen's size reached as low as the value */
.logoname{
font-size: 32px;
}
.logoimage{
width: 56px;
}
nav ul li a{
font-size: 16px
}
}
@media (max-width: 450px){
.logoname{
display: none;
}
}
@media (max-width: 1300px){
.checkbtn{
display: block;
}
nav ul{
position: fixed;
width: 100%;
height: 100vh;
background: #455462;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a.router-link-exact-active,a:hover{ /* Changes background color of a button when hovered */
background: #e9ffe9;
color: #455462;
}
#check:checked ~ ul{
left: 0;
}
.fade-enter-active, .fade-leave-active {
transition: none !important;
}
.fade-enter-from, .fade-leave-to {
transition: none !important;
}
}
.antiscroll {
position: fixed;
}
</style>
index.html
<body v-bind:class="[{ 'antiscroll': checkboxValue }]">
<div id="app"></div>
</body>