Как сделать SideBar на Vuejs?
у меня есть 2 компонента Sidebar и NavBar, мне нужно сделать кнопку на навбаре,которая открывает/закрывает SideBar. Перепробовал многое,но рабочий SideBar сделать не получилось.Помогите, пожалуйста. Parent App
<template>
<navbar v-if="!$route.meta.hideNav" />
<sidenav v-if="!$route.meta.hideSidebar" />
<main>
<div class="main-container">
<router-view />
</div>
</main>
</template>
<script>
import Navbar from "./components/Navs/Navbar.vue";
import Sidenav from "./components/Navs/Sidenav.vue"
export default {
name: 'App',
// data() {
// return {
// isOpen: ''
// }
// },
components: {
Navbar,
Sidenav
},
// methods:{
// onclick(data){
// console.log(data.isOpen)
// }
// }
}
</script>
Child SideBar
<template>
<aside class="sidebar" id="side" >
<div class="sidebar-children">
<div class="gsp-logo">
<img src="../../assets/logos/logo.svg" alt="logo">
</div>
<hr>
<ul>
<li>
<router-link tag="li" to="/dashboard">
<span class="icon"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" id="Layer_1"
data-name="Layer 1"
viewBox="0 0 24 24" width="20" height="20" fill="none"><path
d="M12.3,10.178a4.989,4.989,0,0,0,.363.671L23.525,8.688A11.962,11.962,0,0,0,8.216.621Z"/><path
d="M12.631,13.742a7.008,7.008,0,0,1-2.169-2.773L6.377,1.406A11.991,11.991,0,1,0,20.889,20.032Z"/><path
d="M14.365,12.549l7.741,5.9A11.916,11.916,0,0,0,24,12a12.055,12.055,0,0,0-.081-1.351Z"/></svg>
</span>
<span class="label">Общий анализ</span>
</router-link>
</li>
<li>
<router-link to="/company">
<span class="icon"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" id="Layer_1"
viewBox="0 0 512 512" width="20" height="20" fill="none">
<path
d="M448.383,286.442c-16.454,0.003-32.259,6.415-44.065,17.876l-25.107-12.554c20.494-67.214-17.38-138.315-84.594-158.809
c-24.586-7.496-50.867-7.37-75.38,0.361l-14.717-26.571c23.622-25.866,21.803-65.984-4.063-89.605
c-25.866-23.622-65.983-21.803-89.605,4.063s-21.803,65.983,4.063,89.605c11.734,10.716,27.063,16.637,42.953,16.591
c3.05-0.087,6.09-0.392,9.097-0.912l14.589,26.358c-55.259,41.007-67.66,118.636-27.928,174.818l-61.793,59.375
c-32.782-14.681-71.258-0.008-85.939,32.774s-0.008,71.258,32.774,85.939c32.782,14.681,71.258,0.008,85.939-32.774
c8.18-18.265,7.495-39.279-1.856-56.973l60.563-58.209c56.591,40.988,135.691,28.375,176.727-28.182l25.447,12.723
c-0.402,2.555-0.642,5.133-0.721,7.719c0,35.134,28.482,63.617,63.617,63.617S512,385.193,512,350.059
S483.518,286.442,448.383,286.442z"/></svg>
</span>
<span class="label">Анализ ПК</span>
</router-link>
</li>
<li>
<router-link to="/test">
<span class="icon"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" id="Layer_1"
data-name="Layer 1"
viewBox="0 0 24 24" width="20" height="20" fill="none"><path
d="M24,7v1H0v-1C0,4.239,2.239,2,5,2h1V1c0-.552,.448-1,1-1h0c.552,0,1,.448,1,1v1h8V1c0-.552,.448-1,1-1h0c.552,0,1,.448,1,1v1h1c2.761,0,5,2.239,5,5Zm0,10c0,3.86-3.141,7-7,7s-7-3.14-7-7,3.141-7,7-7,7,3.14,7,7Zm-5,.586l-1-1v-1.586c0-.552-.448-1-1-1h0c-.552,0-1,.448-1,1v2c0,.265,.105,.52,.293,.707l1.293,1.293c.39,.39,1.024,.39,1.414,0h0c.39-.39,.39-1.024,0-1.414Zm-11-.586c0-2.829,1.308-5.35,3.349-7H0v9c0,2.761,2.239,5,5,5h6.349c-2.041-1.65-3.349-4.171-3.349-7Z"/></svg>
</span>
<span class="label">Новая вкладка</span>
</router-link>
</li>
<li>
<router-link to="/newSecond">
<span class="icon"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" id="Layer_1"
data-name="Layer 1"
viewBox="0 0 24 24" width="20" height="20" fill="none"><path
d="M24,7v1H0v-1C0,4.239,2.239,2,5,2h1V1c0-.552,.448-1,1-1h0c.552,0,1,.448,1,1v1h8V1c0-.552,.448-1,1-1h0c.552,0,1,.448,1,1v1h1c2.761,0,5,2.239,5,5Zm0,10c0,3.86-3.141,7-7,7s-7-3.14-7-7,3.141-7,7-7,7,3.14,7,7Zm-5,.586l-1-1v-1.586c0-.552-.448-1-1-1h0c-.552,0-1,.448-1,1v2c0,.265,.105,.52,.293,.707l1.293,1.293c.39,.39,1.024,.39,1.414,0h0c.39-.39,.39-1.024,0-1.414Zm-11-.586c0-2.829,1.308-5.35,3.349-7H0v9c0,2.761,2.239,5,5,5h6.349c-2.041-1.65-3.349-4.171-3.349-7Z"/></svg>
</span>
<span class="label">Новая вкладка</span>
</router-link>
</li>
<li class="user-header">
УЧЁТНАЯ ЗАПИСЬ
</li>
<li>
<router-link to="/settings">
<span class="icon"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" id="Capa_1" x="0px"
y="0px"
viewBox="0 0 512 512" width="20" height="20" fill="none">
<g>
<path
d="M34.283,384c17.646,30.626,56.779,41.148,87.405,23.502c0.021-0.012,0.041-0.024,0.062-0.036l9.493-5.483 c17.92,15.332,38.518,27.222,60.757,35.072V448c0,35.346,28.654,64,64,64s64-28.654,64-64v-10.944 c22.242-7.863,42.841-19.767,60.757-35.115l9.536,5.504c30.633,17.673,69.794,7.167,87.467-23.467 c17.673-30.633,7.167-69.794-23.467-87.467l0,0l-9.472-5.461c4.264-23.201,4.264-46.985,0-70.187l9.472-5.461 c30.633-17.673,41.14-56.833,23.467-87.467c-17.673-30.633-56.833-41.14-87.467-23.467l-9.493,5.483 C362.862,94.638,342.25,82.77,320,74.944V64c0-35.346-28.654-64-64-64s-64,28.654-64,64v10.944 c-22.242,7.863-42.841,19.767-60.757,35.115l-9.536-5.525C91.073,86.86,51.913,97.367,34.24,128s-7.167,69.794,23.467,87.467l0,0 l9.472,5.461c-4.264,23.201-4.264,46.985,0,70.187l-9.472,5.461C27.158,314.296,16.686,353.38,34.283,384z M256,170.667 c47.128,0,85.333,38.205,85.333,85.333S303.128,341.333,256,341.333S170.667,303.128,170.667,256S208.872,170.667,256,170.667z"/>
</g>
</svg>
</span>
<span class="label">Настройки</span>
</router-link>
</li>
<li>
<router-link to="/">
<span class="icon"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" id="Layer_1"
data-name="Layer 1"
viewBox="0 0 24 24" width="20" height="20" fill="none"><path
d="m24,12c0,.553-.448,1-1,1h-2.229c-1.046,0-2.032-.557-2.571-1.453l-.564-.936-2.155,5.255,2.043,1.289c.29.184.466.502.466.846v5c0,.553-.448,1-1,1s-1-.447-1-1v-4.448l-4.126-2.604c-1.233-.781-1.726-2.326-1.173-3.675l1.753-4.273h-1.208c-.381,0-.724.212-.894.553l-1.447,2.895c-.247.494-.846.693-1.342.447-.494-.247-.694-.848-.447-1.342l1.447-2.895c.512-1.022,1.54-1.658,2.683-1.658h2.651c.031-.002.063-.002.095,0h1.518c1.046,0,2.031.557,2.57,1.453l1.844,3.062c.18.299.508.484.857.484h2.229c.552,0,1,.447,1,1Zm-18.991,3.99c-.009,0-.016.005-.025.005.127-.002.277-.004.025-.005Zm5.855.825c-.504-.203-1.072.034-1.287.526-.169.386-.52.659-.941.659h-3.631c-.555,0-1.005-.45-1.005-1.005,0-.548.44-.989.985-1-.04,0-.074.001-.096.002.541.029,1.007-.4,1.035-.946.051-.991.077-2.019.077-3.051,0-3.608-.292-12-3-12S0,8.392,0,12s.292,12,3,12c1.153,0,1.884-1.207,2.391-4h3.245c1.233,0,2.327-.74,2.785-1.885.206-.514-.044-1.096-.557-1.301Zm7.125-11.814c1.381,0,2.5-1.119,2.5-2.5s-1.119-2.5-2.5-2.5-2.5,1.119-2.5,2.5,1.119,2.5,2.5,2.5Z"/></svg>
</span>
<span class="label">Выйти</span>
</router-link>
</li>
</ul>
<div class="sidebar-footer">
<div class="footer-container">
<span class="icon"><svg xmlns="http://www.w3.org/2000/svg" id="Filled"
viewBox="0 0 24 24" width="20" height="20" fill="var(--primary)"><path
d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,20a1,1,0,1,1,1-1A1,1,0,0,1,12,20Zm1.93-7.494A1.982,1.982,0,0,0,13,14.257V15a1,1,0,0,1-2,0v-.743a3.954,3.954,0,0,1,1.964-3.5,2,2,0,0,0,1-2.125,2.024,2.024,0,0,0-1.6-1.595A2,2,0,0,0,10,9,1,1,0,0,1,8,9a4,4,0,1,1,5.93,3.505Z"/></svg>
</span>
<h6>Нужна помощь?</h6>
<p>Прочтите инструкцию</p>
<router-link to="/instruction" class="btn">
<span>ИНСТРУКЦИЯ</span>
</router-link>
</div>
</div>
</div>
</aside>
</template>
<script>
export default {
// data() {
// return{
// isOpen: ''
// }
// },
// props:['isOpen'],
// methods:{
// click() {
// alert(this.isOpen)
// }
// }
// }
</script>
Chiled NavBar
<template>
<div class="nav">
<header class="nav-container">
<nav class="nav-body">
<div class="nav-header">
<div class="nav-breadcrumb">
<span class="breadcrumb-links">
<span class="breadcrumb-link">Дашборд</span>
<span class="breadcrumb-separator">/</span>
</span>
<span class="breadcrumb-links last">
<span class="breadcrumb-link">{{ this.$route.name }}</span>
<span class="breadcrumb-separator">/</span>
</span>
</div>
<div class="nav-header-heading">
<span class="nav-header-heading-title">{{ this.$route.name }}</span>
</div>
</div>
<div class="nav-control">
<button class="nav-icon nav-notification">
<svg xmlns="http://www.w3.org/2000/svg" id="Filled" viewBox="0 0 24 24" width="20" height="20" fill="var(--black1)"><path d="M7.424,21a4.99,4.99,0,0,0,9.152,0Z"/><path d="M22.392,12.549,20.656,6.826A9.321,9.321,0,0,0,2.58,7.28L1.232,12.817A5,5,0,0,0,6.09,19H17.607a5,5,0,0,0,4.785-6.451Z"/></svg>
</button>
<button class="nav-icon nav-settings">
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" id="Capa_1" x="0px"
y="0px"
viewBox="0 0 512 512" width="20" height="20" fill="var(--black1)">
<g>
<path
d="M34.283,384c17.646,30.626,56.779,41.148,87.405,23.502c0.021-0.012,0.041-0.024,0.062-0.036l9.493-5.483 c17.92,15.332,38.518,27.222,60.757,35.072V448c0,35.346,28.654,64,64,64s64-28.654,64-64v-10.944 c22.242-7.863,42.841-19.767,60.757-35.115l9.536,5.504c30.633,17.673,69.794,7.167,87.467-23.467 c17.673-30.633,7.167-69.794-23.467-87.467l0,0l-9.472-5.461c4.264-23.201,4.264-46.985,0-70.187l9.472-5.461 c30.633-17.673,41.14-56.833,23.467-87.467c-17.673-30.633-56.833-41.14-87.467-23.467l-9.493,5.483 C362.862,94.638,342.25,82.77,320,74.944V64c0-35.346-28.654-64-64-64s-64,28.654-64,64v10.944 c-22.242,7.863-42.841,19.767-60.757,35.115l-9.536-5.525C91.073,86.86,51.913,97.367,34.24,128s-7.167,69.794,23.467,87.467l0,0 l9.472,5.461c-4.264,23.201-4.264,46.985,0,70.187l-9.472,5.461C27.158,314.296,16.686,353.38,34.283,384z M256,170.667 c47.128,0,85.333,38.205,85.333,85.333S303.128,341.333,256,341.333S170.667,303.128,170.667,256S208.872,170.667,256,170.667z"/>
</g>
</svg>
</button>
<button class="open-side" id="side-button" @click="click">
O
</button>
<router-link to="/" class="nav-user">
<span class="nav-icon"><svg width="24" height="24" viewBox="0 0 20 20" fill="var(--black3)"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM12 7C12 8.10457 11.1046 9 10 9C8.89543 9 8 8.10457 8 7C8 5.89543 8.89543 5 10 5C11.1046 5 12 5.89543 12 7ZM9.99993 11C7.98239 11 6.24394 12.195 5.45374 13.9157C6.55403 15.192 8.18265 16 9.99998 16C11.8173 16 13.4459 15.1921 14.5462 13.9158C13.756 12.195 12.0175 11 9.99993 11Z"
fill="#111827"></path></svg>
</span>
<span class="nav-user-name">Username</span>
</router-link>
<span class="nav-search">
<span class="nav-icon nav-search"><svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" x="0px"
y="0px" viewBox="0 0 513.749 513.749" width="16"
height="16" fill="var(--black3)">
<g>
<path
d="M504.352,459.061l-99.435-99.477c74.402-99.427,54.115-240.344-45.312-314.746S119.261-9.277,44.859,90.15 S-9.256,330.494,90.171,404.896c79.868,59.766,189.565,59.766,269.434,0l99.477,99.477c12.501,12.501,32.769,12.501,45.269,0 c12.501-12.501,12.501-32.769,0-45.269L504.352,459.061z M225.717,385.696c-88.366,0-160-71.634-160-160s71.634-160,160-160 s160,71.634,160,160C385.623,314.022,314.044,385.602,225.717,385.696z"/>
</g></svg>
</span>
<input type="text" class="nav-search-input" placeholder="Поиск...">
</span>
</div>
</nav>
</header>
</div>
</template>
<script>
//export default {
// data() {
// return{
// isOpen: true
// }
// },
// props:['isOpen'],
// methods:{
// click() {
// this.isOpen = !this.isOpen;
// // alert(this.isOpen)
// this.$emit('click',{
// isOpen: this.isOpen
//
// })
// }
// }
// }
</script>
Источник: Stack Overflow на русском