feat(sidebar): decrease horizontal padding when sidebar is not expanded

Set the horizontal padding of the unexpanded sidebar to 1em.

src/features/settings/utils/__tests__/settingsValidator.test.js

@@ -557,30 +557,6 @@ describe('settingsValidator', () => {
                 { name: 'maybe', i18n: 'selectSomething.options.maybe' }
             ] }],
 
-            [{ name: 'selectMultiple', type: 'selection', i18n: 'selectMultiple.title', default: ['1', '2', '3'], allowMultiple: true, options: [
-                { name: '1', i18n: 'selectMultiple.options.1' },
-                { name: '2', i18n: 'selectMultiple.options.2' },
-                { name: '3', i18n: 'selectMultiple.options.3' }
-            ] }],
-
-            [{ name: 'selectMultiple', type: 'selection', i18n: 'selectMultiple.title', default: ['2', '3'], allowMultiple: true, options: [
-                { name: '1', i18n: 'selectMultiple.options.1' },
-                { name: '2', i18n: 'selectMultiple.options.2' },
-                { name: '3', i18n: 'selectMultiple.options.3' }
-            ] }],
-
-            [{ name: 'selectMultiple', type: 'selection', i18n: 'selectMultiple.title', default: ['2'], allowMultiple: true, options: [
-                { name: '1', i18n: 'selectMultiple.options.1' },
-                { name: '2', i18n: 'selectMultiple.options.2' },
-                { name: '3', i18n: 'selectMultiple.options.3' }
-            ] }],
-
-            [{ name: 'selectMultiple', type: 'selection', i18n: 'selectMultiple.title', default: [], allowMultiple: true, options: [
-                { name: '1', i18n: 'selectMultiple.options.1' },
-                { name: '2', i18n: 'selectMultiple.options.2' },
-                { name: '3', i18n: 'selectMultiple.options.3' }
-            ] }],
-
             [{ name: 'aSection', type: 'section', i18n: 'sections.aSection.title', content: [] }],
             [{ name: 'aSection', type: 'section', i18n: 'sections.aSection.title', content: [
                 { name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: true }
@@ -640,34 +616,6 @@ describe('settingsValidator', () => {
 
             [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', default: 'a', options: true }],
             [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', default: 'a', options: [] }],
-            [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', default: ['a'], options: [
-                { name: 'a', i18n: 'a' },
-                { name: 'b', i18n: 'b' }
-            ] }],
-            [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', default: ['a', 'b'], options: [
-                { name: 'a', i18n: 'a' },
-                { name: 'b', i18n: 'b' }
-            ] }],
-            [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', allowMultiple: true, default: 'a', options: [
-                { name: 'a', i18n: 'a' },
-                { name: 'b', i18n: 'b' }
-            ] }],
-            [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', allowMultiple: true, default: 'a', options: [
-                { name: 'a', i18n: 'a' },
-                { name: 'b', i18n: 'b' }
-            ] }],
-            [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', allowMultiple: true, default: ['c'], options: [
-                { name: 'a', i18n: 'a' },
-                { name: 'b', i18n: 'b' }
-            ] }],
-            [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', allowMultiple: true, default: [1], options: [
-                { name: 'a', i18n: 'a' },
-                { name: 'b', i18n: 'b' }
-            ] }],
-            [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', allowMultiple: true, default: ['a', 1], options: [
-                { name: 'a', i18n: 'a' },
-                { name: 'b', i18n: 'b' }
-            ] }],
             [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', default: 'c', options: [
                 { name: 'a', i18n: 'a' },
                 { name: 'b', i18n: 'b' }

src/features/settings/utils/settingsValidator.js

@@ -73,27 +73,12 @@ export const validateEntry = function validateEntry (entry, path) {
             throw new Error(`[settings] "${path}.default" must be a string`);
         }
         if (entry.type === 'selection') {
-            if (entry.allowMultiple) {
+            if (typeof entry.default !== 'string') {
-                if (!Array.isArray(entry.default)) {
+                throw new Error(`[settings] "${path}.default" must be a string`);
-                    throw new Error(`[settings] "${path}.default" must be an array`);
+            };
-                }
+            if (!entry.options.map((option) => option.name).includes(entry.default)) {
-                const allOptions = entry.options.map((option) => option.name);
+                throw new Error(`[settings] option "${path}.default" does not exist`);
-                entry.default.forEach((defaultValue, index) => {
+            };
-                    if (typeof defaultValue !== 'string') {
-                        throw new Error(`[settings] "${path}.default[${index}]" must be a string`);
-                    }
-                    if (!allOptions.includes(defaultValue)) {
-                        throw new Error(`[settings] option "${path}.default[${index}]" does not exist`);
-                    }
-                });
-            } else {
-                if (typeof entry.default !== 'string') {
-                    throw new Error(`[settings] "${path}.default" must be a string`);
-                };
-                if (!entry.options.map((option) => option.name).includes(entry.default)) {
-                    throw new Error(`[settings] option "${path}.default" does not exist`);
-                };
-            }
         };
     }
 }

src/features/settings/views/SettingsView.vue

@@ -61,10 +61,6 @@ onMounted(async () => {
     });
     settingsLoaded.value = true;
 });
-
-const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSidebarFunction) {
-    if (matchMedia('(max-width: 48rem)').matches) toggleSidebarFunction();
-};
 </script>
 
 <template>
@@ -75,14 +71,13 @@ const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSi
             </h1>
         </header>
         <LeftSidebarLayout class="layout">
-            <template #sidebar="{ toggleSidebar }">
+            <template #sidebar>
                 <ul class="sidebar-sections-list">
                     <li v-for="section in settings">
                         <RouterLink
                             :to="`/settings/${section.name}`"
                             class="button button-link link sidebar-section"
                             :class="{ active: activeSection === section.name }"
-                            @click="toggleSidebarIfSmallScreen(toggleSidebar)"
                         >
                             {{ t(section.i18n) }}
                         </RouterLink>

src/layouts/LeftSidebarLayout.vue

@@ -29,7 +29,7 @@ const props = defineProps({
 
 const expanded = ref(props.expanded);
 
-const toggleSidebar = function toggleSidebar () {
+const toggleExpanded = function toggleExpanded () {
     expanded.value = !expanded.value;
 };
 </script>
@@ -37,13 +37,13 @@ const toggleSidebar = function toggleSidebar () {
 <template>
     <div class="layout-container" :class="{ expanded }">
         <div class="sidebar-expand-button-container">
-            <SidebarExpandButton class="sidebar-expand-button" @click="toggleSidebar" />
+            <SidebarExpandButton class="sidebar-expand-button" @click="toggleExpanded" />
         </div>
-        <Sidebar @toggle-expanded="toggleSidebar" :expanded="expanded" class="sidebar">
+        <Sidebar @toggle-expanded="toggleExpanded" :expanded="expanded" class="sidebar">
-            <slot name="sidebar" :toggleSidebar="toggleSidebar" />
+            <slot name="sidebar" />
         </Sidebar>
         <main class="main-content">
-            <slot :toggleSidebar="toggleSidebar" />
+            <slot />
         </main>
     </div>
 </template>