'Reference variables between components in Vue

I have a sidebar component that onclick toggles between closed and expanded, using the following functions:

const is_expanded = ref(localStorage.getItem("is_expanded") === "true")
const ToggleMenu = () => {
    is_expanded.value = !is_expanded.value
    // @ts-ignore
    localStorage.setItem("is_expanded", is_expanded.value)
}

The value of is_expanded determines which class the component uses:

<template>
    <aside :class="`${is_expanded ? 'is-expanded' : ''}`">
        <div class="logo">
            <img :src="logoURL" alt="Vue" /> 
        </div>

        <div class="menu-toggle-wrap">
            <button class="menu-toggle" @click="ToggleMenu">
                <span class="material-icons">keyboard_double_arrow_right</span>
            </button>
        </div>
    .........

In the middle of the screen I have an iframe component which currently has a fixed margin-left so that it starts where the expanded sidebar ends, however I would like it to be dynamic and re-size when the sidebar is closed.

Is there a way I can reference the "is_expanded" variable from the sidebar component within the iframe component?

vue.js


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions