How can I use a sidenavbar toggle function in another header component in Vue3

Question

Im using Vue3 in Laravel 9 with Inertia.js and I´m trying to create a Sidenavbar with a headerbar.

I would like to toggle the Sidenavbar with a "Menu" Button in the Header Component. But I have no idea how can i use the toggle function for my Sidenavbar in my headerbar.

The Toggle function in the Sidenavbar is working fine.

Screenshot with Header and Sidebar

Layout/App.vue

<template>
     <Header />
    <div class="app">
        <Nav />
        <slot />
    </div>
</template>
<script>
import Nav from "./Nav";
import Header from "./header.vue";
export default {
    components: { Nav, Header },
};

</script>

Sidenavbar Nav.vue

<template>
    <aside :class="`${is_expanded ? 'is-expanded' : ''}`">
        <h3>Menu</h3>
        <div class="menu">
            <router-link to="/" class="button">
                <span class="material-symbols-rounded">home</span>
                <span class="text">Home</span>
            </router-link>
            <router-link to="/about" class="button">
                <span class="material-symbols-rounded">description</span>
                <span class="text">About</span>
            </router-link>
            <router-link to="/team" class="button">
                <span class="material-symbols-rounded">group</span>
                <span class="text">Team</span>
            </router-link>
            <router-link to="/contact" class="button">
                <span class="material-symbols-outlined">admin_panel_settings</span>
                <span class="text">Administration</span>
            </router-link>
        </div>

        <div class="flex"></div>


        <div class="menu">
            <router-link to="/settings" class="button ">
                <span class="material-symbols-rounded">settings</span>
                <span class="text">Settings</span>
            </router-link>
        </div>

        <div class="menu-toggle-wrap">
            <button class="menu-toggle" @click="ToggleMenu">
                <span class="material-symbols-outlined menu-icon">menu</span>
                <span class="material-symbols-outlined arrow-back">arrow_back</span>
            </button>
        </div>



    </aside>
</template>


<script >

import {ref} from 'vue'

export default {
    data() {
        return {
            is_expanded: ref(localStorage.getItem("is_expanded") === "true"),
            visible: false
        };
    },
    methods: {
        ToggleMenu() {
            this.is_expanded = !this.is_expanded;
            localStorage.setItem("is_expanded", this.is_expanded);
        }
    },
    mounted() {
        console.log(`The initial count is ${this.is_expanded}.`);
    }

}

</script>

Header Header.vue

<template>



<div class=" header border-2">
        <div class="menu-toggle-wrap">
            <button class="menu-toggle" @click="">
                <span class="material-symbols-outlined menu-icon">menu</span>

            </button>
        </div>

</div>

</template>

<script>
export default {

}
</script>

Here is my app.js file

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'

export const toggleMenu = new Vue();

createInertiaApp({
  resolve: name => require(`./pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})