Toggle Sidebar component with button from Navbar Component

Question

I'm trying to learn Laravel with Vuejs (v3). I have 3 components: App.vue, Navbar.vue, and Sidebar.vue

What I'm trying to do is, onclick of sidebar-btn:

1. Change value of variable isSidebarActive to !isSidebarActive ---- DONE
2. Change class of fontawesome (dependent on isSidebarActive). ---- DONE
3. Show Sidebar.vue (dependent on isSidebarActive)

I tried using props but error says I can't change the value, so I tried using emits but I still can't seem to get it right.

app.js

require('./bootstrap');

import { createApp }    from 'vue'
import App              from './App.vue'
import router           from './routes'

// Partials
import Navbar           from './components/Navbar.vue'
import Sidebar          from './components/Sidebar.vue'

createApp(App)
.component('navbar', Navbar)
.component('sidebar', Sidebar)
.use(router)
.mount('#app')

App.vue

<template>
    <navbar></navbar>
    <sidebar v-bind:class="{ active: isSidebarActive }"></sidebar>

    <router-view></router-view>
</template>

<script>
export default {
    name: "App",
    data() {
        return {
            isSidebarActive: false,
        };
    },
}
</script>

Navbar.vue

<template>
<nav class="navbar navbar-expand-md navbar-dark bg-dark shadow-sm sticky-top">
    <div class="container">
        <div class="navbar-brand" >
            <span class="h4">
                Hello World!
            </span>

            <!-- Button to toggle Sidebar -->
            <span class="btn btn-outline-light btn-sm ms-2" id="sidebar-btn" style="border: 1px white" @click="toggleSidebar()">
                <i v-bind:class="[isSidebarActive ? 'fas fa-arrow-left' : 'fas fa-bars']" title="Sidebar Menu"></i>
            </span>
        </div>
    </div>
</nav>
</template>

<script>
export default {
    name: "Navbar",
    data() {
        return {
            isSidebarActive: false,
        };
    },
    emits: ['isSidebarActive'],
    methods: {
        toggleSidebar:function () {
            this.isSidebarActive = !this.isSidebarActive
            this.$emit("isSidebarActive", this.isSidebarActive)
        },
    },
}
</script>

Answer 1

Please take a look at following snippet:

const app = Vue.createApp({
  data() {
    return {
      isSidebarActive: false,
    };
  },
  methods: {
    handleSidebar() { // 👈 handle received event
      this.isSidebarActive = !this.isSidebarActive
    }
  }
})
app.component('Sidebar', {
  template: `<div>sidebar</div>`
})
app.component('Navbar', {
  template: `
     <div>Hello World!<button @click="toggleSidebar()">show/hide sidebar</button></div>
  `,
  methods: {
    toggleSidebar() {
      this.$emit("toggle") // 👈 emit event
    },
  },
})
app.mount('#demo')

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<div id="demo">
        <!-- 👇 listen to event from child, call method -->
  <navbar @toggle="handleSidebar"></navbar>
        <!-- 👇 conditionaly show/hide component -->
  <sidebar v-if="isSidebarActive"></sidebar>
</div>