SidebarTest.vue

<template>
    <div>
        <div class="dogcunt" v-bind:showshit="flags.thing ? 'yes' : 'no'">
            <div class="altcontent">
                <p>additional options would be here</p>
            </div>
            <div class="maincontent">
                <div>
                    <b-col>
                        <b-row>
                            <b-button-group>
                                <b-button @click="toggleProp('thing')" class="btn-sm">
                                    <template v-if="flags.thing">
                                        <b-icon icon="chevron-double-right" />
                                    </template>
                                    <template v-else>
                                        <b-icon icon="chevron-double-left" />
                                    </template>
                                </b-button>
                                <b-button class="doMenuElementCrap btn-sm">enable the thing</b-button>
                            </b-button-group>
                        </b-row>
                        <b-row>
                            <b-button class="doMenuElementCrap btn-sm noMenuToggle">other stuff</b-button>
                        </b-row>
                    </b-col>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.row {
    margin-bottom: 0.5rem;
}
.noMenuToggle {
    margin-left: 32px;
}
.dogcunt,
.dogcunt > div {
    display: inline-flex;
}
.dogcunt {
    --main-content-width: 15rem;
    --alt-content-width: 15rem;

    position: fixed;
    top: 100px;
    left: calc(100vw - var(--main-content-width));
    transition: 100ms;

    height: calc(100vh - 400px);
}
.dogcunt > div * {
    width: fit-content;
    height: fit-content;
}
.maincontent {
    width: var(--main-content-width);
    background-color: lime;
    z-index: 1;
    display: block;
}
[showshit=yes] .altcontent {
    right: calc(var(--main-content-width));
}
.altcontent {
    width: var(--alt-content-width);

    position: absolute;
    right: -30px;

    background-color: red;
}
</style>
<script>
export default {
    name: 'SideBarTest',
    data () {
        return {
            flags: {
                thing: false
            }
        }
    },
    methods: {
        toggleProp (key) {
            this.$set(this.$data.flags, key, !this.$data.flags[key])
        }
    }
}
</script>