Добавляете в стейт свойство, которое будет представлять выбранный блок:
state: {
opened: null,
...
В экземпляры компонента Trigger передавайте соответствующие им блоки:
<Trigger :block="block">props: [ 'block' ],
Также, Trigger должен знать, какой блок открыт:
computed: mapState([ 'opened' ]),
Чтобы можно было назначить класс кнопке:
:class="{ 'active' : block === opened }"
При клике на которую следует передавать блок в мутацию:
@click="toggleNav(block)"
Мутация же будет устанавливать значение выбранного блока:
toggleNav(state, block) {
state.opened = state.opened === block ? null : block;
},
Это если оно действительно toggle. Если просто открытие - тогда достаточно
state.opened = block (название мутации в этом случае конечно следует поменять).
Мутация, отвечающая за закрытие, будет выглядеть так:
closeSidebarPanel(state) {
state.opened = null;
},
Геттер isNavOpen тоже изменится:
isPanelOpen(state) {
return !!state.opened;
},
Ну и наконец, можно что-нибудь вывести в Sidebar, например:
<span v-if="isPanelOpen">{{ $store.state.opened.bName }}</span>
Но если Sidebar предназначен конкретно для этих блоков, наверное, разумнее будет, чтобы он сам знал, кто сейчас открыт. В Sidebar'е цепляете opened к слоту:
<slot :block="$store.state.opened"></slot>
Соответственно, в родительском компоненте:
<template #default="{ block }">
<div class="sidebar-panel-settings">
<div class="setting-block">
{{ block.bName }}
</div>
</div>
</template>
