From 4b010d03acf63e4fccad19e1160e2592bd123db8 Mon Sep 17 00:00:00 2001
From: Jakob Scheid
 <jakob.scheid@developers.internal.seekra.jcloud-services.ddns.net>
Date: Sun, 2 Aug 2026 13:58:37 +0200
Subject: [PATCH] feat(settings): toggle sidebar on small screens when section
 is selected

The settings view now hides the sidebar on small screens when a settings
section is selected.
---
 src/features/settings/views/SettingsView.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/features/settings/views/SettingsView.vue b/src/features/settings/views/SettingsView.vue
index 67903d6..57936ed 100644
--- a/src/features/settings/views/SettingsView.vue
+++ b/src/features/settings/views/SettingsView.vue
@@ -61,6 +61,10 @@ onMounted(async () => {
     });
     settingsLoaded.value = true;
 });
+
+const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSidebarFunction) {
+    if (matchMedia('(max-width: 48rem)').matches) toggleSidebarFunction();
+};
 </script>
 
 <template>
@@ -71,13 +75,14 @@ onMounted(async () => {
             </h1>
         </header>
         <LeftSidebarLayout class="layout">
-            <template #sidebar>
+            <template #sidebar="{ toggleSidebar }">
                 <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>