Изменить ширину основного содержимого при переключении боковой панели

Question

Я занимаюсь разработкой приложения, в котором пользователь входит в свою панель управления. Когда они входят в систему, есть боковая панель слева и основной контент справа. Есть значок бургера для переключения боковой панели, который работает нормально, но я также хочу, чтобы ширина основного содержимого изменялась в зависимости от того, открыта ли боковая панель или закрыта. Я хочу, чтобы боковая панель составляла 20% страницы, а основное содержание - 80%. Когда боковая панель закрыта, я хочу, чтобы основное содержимое изменилось на 100% ширины.

Когда я переключаю меню боковой панели в первый раз, меню закрывается, и основное содержимое изменяется на 100% ширины, но при повторном открытии оно не изменяется обратно на 80%. Я немного застрял, не могу понять, почему - выглядит хорошо для меня.

<template>
    <div class="main-content" v-bind:style="{ 'width': width + '%' }">
    <div id="burger" :class="{ 'active' : isBurgerActive }" @click.prevent="toggle(); changeWidth();">
        <slot>
            <button type="button" class="burger-button">
                <span class="burger-bar burger-bar-1"></span>
                <span class="burger-bar burger-bar-2"></span>
                <span class="burger-bar burger-bar-3"></span>
            </button>                           
        </slot>
    </div> 
    </div>                 
</template>

<script> 
    import {store} from '../store.js';
    import {mutations} from '../store.js';

    export default {
        data() {
            return {
                width: 80
            }
        },
        computed: {
            isBurgerActive() {
                return store.isNavOpen
            }
        },
        methods: {
            toggle() {
                mutations.toggleNav()
            },
            changeWidth() {
                if (this.width = 80) {
                    this.width = 100;
                } else if (this.width = 100) {
                    this.width = 80;
                }
                console.log(store.isNavOpen);
                console.log(this.width);
            }
        }
    }
</script>

Answer 1

Это:

if (this.width == 80)

, а не

if (this.width = 80)

То же самое для this.width == 100