Не подскажите как так сделать Должен быть только один экземпляр меню id=mySidebar и никаких mySidebar2 на vue,js кнопки сверху и снизу должны дублироваться а не каждая открывать своё меню
меню должно лежать в хидере, в футере только кнопка
которая открывает или закрывает меню или карзинку
main.js
var vm = new Vue({
el: '#app',
data:
{
shop:'Your cart is emptyTime to start shopping!',
links1: 'Catalog',
links2: 'Catalog',
links3: 'Catalog',
links4: 'Catalog',
links5: 'Catalog',
links6: 'Catalog',
isActive: false,
isActivatus: false,
},
methods: {
activate() {
this.isActive = !this.isActive;
if (this.isActive) {
document.getElementById("mySidebar").style.width = "320px";
document.getElementById("main").style.marginLeft = "1px";
} else {
document.getElementById("mySidebar").style.width = "0px";
document.getElementById("main").style.marginLeft = "0px";
}
},
activates() {
this.isActivatus = !this.isActivatus;
if (this.isActivatus) {
document.getElementById("myShopings").style.width = "320px";
document.getElementById("main__shoop").style.marginLeft = "1px";
} else {
document.getElementById("myShopings").style.width = "0px";
document.getElementById("main__shoop").style.marginLeft = "0px";
}
}
}
});
var vm = new Vue({
el: '#app2',
data: {
shop:'Your cart is emptyTime to start shopping!',
links1: 'Catalog',
links2: 'Catalog',
links3: 'Catalog',
links4: 'Catalog',
links5: 'Catalog',
links6: 'Catalog',
isActive: false,
isActivatus: false,
},
methods: {
activate() {
this.isActive = !this.isActive;
if (this.isActive) {
document.getElementById("mySidebar2").style.width = "320px";
document.getElementById("main2").style.marginLeft = "1px";
} else {
document.getElementById("mySidebar2").style.width = "0px";
document.getElementById("main2").style.marginLeft = "0px";
}
},
activates() {
this.isActivatus = !this.isActivatus;
if (this.isActivatus) {
document.getElementById("myShopings2").style.width = "320px";
document.getElementById("main__shoop2").style.marginLeft = "1px";
} else {
document.getElementById("myShopings2").style.width = "0px";
document.getElementById("main__shoop2").style.marginLeft = "0px";
}
}
}
});
index.html
<div id="app2">
<div @click="activate" id="mySidebar2" class="sidebar__2">
<a href="#">{{links1}}</a>
<a href="#">{{links2}}</a>
<a href="#">{{links3}}</a>
<a href="#">{{links4}}</a>
<a href="#">{{links5}}</a>
<a href="#">{{links6}}</a>
</div>
<div id="main2">
<div @click="activate" target="nav-collapse" class="hamburgerButton">
<div v-bind:class="{active: isActive}" class="hamburger__1 bar1__1"></div>
<div v-bind:class="{active: isActive}" class="hamburger__1 bar2__2"></div>
<div v-bind:class="{active: isActive}" class="hamburger__1 bar3__3"></div>
</div>
</div>
<div @click="activates" id="myShopings2" class="shoopers__2">
<p>{{shop}}</p>
</div>
<div id="main__shoop2">
<div @click="activates" target="nav-collapse" class="logos__shopping herth__2">
<div v-bind:class="{active: isActive}" class="scoping ">
<img src="img/shoping2.svg" alt="shoping">
</div>
<div id="zindex__1"><p>0</p></div>
</div>
</div>
</div>
</div>
<div id="app">
<div @click="activate" id="mySidebar" class="sidebar">
<a href="#">{{links1}}</a>
<a href="#">{{links2}}</a>
<a href="#">{{links3}}</a>
<a href="#">{{links4}}</a>
<a href="#">{{links5}}</a>
<a href="#">{{links6}}</a>
</div>
<div id="main">
<div @click="activate" target="nav-collapse" class="hamburgerButton">
<div v-bind:class="{active: isActive}" class="hamburger bar1"></div>
<div v-bind:class="{active: isActive}" class="hamburger bar2"></div>
<div v-bind:class="{active: isActive}" class="hamburger bar3"></div>
</div>
</div>
<div @click="activates" id="myShopings" class="shoopers">
<p>{{shop}}</p>
</div>
<div id="main__shoop">
<div @click="activates" target="nav-collapse" class="logos__shopping herth">
<div v-bind:class="{active: isActive}" class="scoping ">
<img src="img/shoping.svg" alt="shoping">
</div>
<div id="zindex"><p>0</p></div>
</div>
</div>
</div>
Простой
