How to show sidebar in vue?

Question

Vue.js

Hello.
There are Navigation.vue and Sidebar.vue components included in App.vue:

<template lang="pug">
  #app
    navigation
    sidebar
    router-view
</template>

There is a button in the Navigation.vue component, when clicked, the Sidebar.vue component should exit:

<template lang="pug">
    .btn Меню
</template>

And there is Sidebar.vue:

<template lang="pug">
  .sidebar
    .nav
      a.nav__link(href="/link1") Ссылка 1
      a.nav__link(href="/link2") Ссылка 2
</template>

I want to set the value of show: true to the data object in the App.vue file.
Question: when clicking on .btn from the Navigation.vue component , change the show = true value in the App.vue component and pass it to the Sidebar.vue component. I consider vuex if it is very confused without it.

Answer 1

Send an event on click, catch it in app, change show state, pass it to navigation