<transition name="slide">
<menu v-show="sidebarShow">
Контент...
</menu>
</transition>
<a href="#" @click.prevent="sidebarShow = !sidebarShow">Показать / Скрыть</a>
<script>
var vm = new Vue({
el:'',
data: {
'sidebarShow': false
}
})
</script>
<style>
.slide-leave-active,
.slide-enter-active {
transition: 1s;
}
.slide-enter {
transform: translate(-100%, 0);
}
.slide-leave-to {
transform: translate(-100%, 0);
}
</style>
<label for="input1">
<span>Поле</span>
<input type="text" id="input1">
</label>
<label for="input2">
<span>Поле</span>
<input type="text" id="input2">
</label>
<label for="input3">
<span>Поле</span>
<input type="text" id="input3">
</label>
<label for="input4">
<span>Поле</span>
<input type="text" id="input4">
</label>
var parent = document.getElementsByClassName('entry-content');
var child = parent[0].getElementsByTagName('H2');
var childArray = Object.keys(child).map(function(key) {return child[key]});
window.addEventListener('scroll', function() {
childArray.forEach(function(item) {
if (item.getBoundingClientRect().top < 50) {
for (var i = 0; i < document.getElementsByClassName('side-nav-links').length; i++) {
document.getElementsByClassName('side-nav-links')[i].style.fontWeight = '500';
}
var node = item.getAttribute('data-id');
var sideNav = document.getElementById(node);
sideNav.style.fontWeight = '900';
}
})
})