fix(sidebar): hide sidebar instead of removing it

Previously, the sidebar was fully removed from DOM. This could cause
unwanted behavior, such as tests which test its content failing. Now, it
is just hidden. This does not affect tests any more.

src/features/settings/components/Switch.vue

@@ -16,7 +16,7 @@ limitations under the License.
 
 <script setup>
 import { useSettingsStore } from '../stores/settingsStore';
-import { ref, useId, watch } from 'vue';
+import { useId } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -35,16 +35,8 @@ const switchId = useId();
 
 const store = useSettingsStore();
 
-const enabled = ref(null);
-watch(store, (newStore) => {
-    enabled.value = newStore.get(props.path);
-});
-// set value after registering watcher to avoid immediate value change
-enabled.value = store.get(props.path) ?? props.setting.default;
-
 const toggle = function toggle () {
-    enabled.value = !enabled.value;
-    store.set(props.path, enabled.value);
+    store.set(props.path, !store.get(props.path));
 };
 </script>
 
@@ -55,7 +47,7 @@ const toggle = function toggle () {
         </label>
         <div
             class="switch-wrapper"
-            :class="{ enabled }"
+            :class="{ enabled: store.get(props.path) }"
             :title="t('settings.switch.title')"
             :aria-label="t('settings.switch.ariaLabel')"
             :aria-labelledby="labelId"

src/features/settings/components/__tests__/Switch.test.js

@@ -20,23 +20,17 @@ import { useSettingsStore } from '../../stores/settingsStore.js';
 import { expect, describe, test } from 'vitest';
 import { nextTick } from 'vue';
 
-const getWrapper = function getWrapper ({
-    i18n = 'switch1',
-    defaultValue = undefined,
-    translations = {},
-    piniaOptions = {}
-} = {}) {
+const getWrapper = function getWrapper ({ i18n = 'switch1', translations = {} } = {}) {
     return mountComponent(Switch, {
         attrs: {
             setting: {
                 type: 'bool',
                 name: 'switch',
-                i18n,
-                default: defaultValue
+                i18n
             },
             path: 'switch'
         }
-    }, translations, [], piniaOptions);
+    }, translations);
 };
 
 describe('Switch', () => {
@@ -59,42 +53,6 @@ describe('Switch', () => {
         expect(switchElementClasses2).not.toContain('enabled');
     });
 
-    test('shows default value', () => {
-        const wrapper = getWrapper({
-            defaultValue: true
-        });
-
-        const switchElement = wrapper.find('.switch-wrapper');
-        expect(switchElement.classes('enabled')).toBeTruthy();
-    });
-
-    test('shows stored value instead of default value', () => {
-        const wrapper = getWrapper({
-            defaultValue: true,
-            piniaOptions: {
-                setupStores: () => {
-                    const store = useSettingsStore();
-                    store.set('switch', false);
-                }
-            }
-        });
-
-        const switchElement = wrapper.find('.switch-wrapper');
-        expect(switchElement.classes('enabled')).toBeFalsy();
-    });
-
-    test('reacts on store change', async () => {
-        const wrapper = getWrapper();
-        const store = useSettingsStore();
-
-        const switchElement = wrapper.find('.switch-wrapper');
-        expect(switchElement.classes('enabled')).toBeFalsy();
-        
-        store.set('switch', true);
-        await nextTick();
-        expect(switchElement.classes('enabled')).toBeTruthy();
-    });
-
     test('toggles value in store', async () => {
         const wrapper = getWrapper();
         

src/features/sidebar/components/Sidebar.vue

@@ -36,7 +36,7 @@ const toggleSidebar = function toggleSidebar () {
         <div class="sidebar-controls">
             <SidebarExpandButton @click="toggleSidebar" class="sidebar-expand-button" />
         </div>
-        <div class="sidebar-content" v-if="props.expanded">
+        <div class="sidebar-content" v-show="props.expanded">
             <slot />
         </div>
     </nav>