From a77bbec3fa176060d5831982a8bb3df53162c7af Mon Sep 17 00:00:00 2001
From: Jakob Scheid
 <jakob.scheid@developers.internal.seekra.jcloud-services.ddns.net>
Date: Fri, 31 Jul 2026 16:44:33 +0200
Subject: [PATCH 1/3] refactor(sidebar): rename sidebar toggling function

Renamed the sidebar toggling function in the left sidebar layout to
toggleSidebar.
---
 src/layouts/LeftSidebarLayout.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/layouts/LeftSidebarLayout.vue b/src/layouts/LeftSidebarLayout.vue
index 3d525c9..b60fed9 100644
--- a/src/layouts/LeftSidebarLayout.vue
+++ b/src/layouts/LeftSidebarLayout.vue
@@ -29,7 +29,7 @@ const props = defineProps({
 
 const expanded = ref(props.expanded);
 
-const toggleExpanded = function toggleExpanded () {
+const toggleSidebar = function toggleSidebar () {
     expanded.value = !expanded.value;
 };
 </script>
@@ -37,9 +37,9 @@ const toggleExpanded = function toggleExpanded () {
 <template>
     <div class="layout-container" :class="{ expanded }">
         <div class="sidebar-expand-button-container">
-            <SidebarExpandButton class="sidebar-expand-button" @click="toggleExpanded" />
+            <SidebarExpandButton class="sidebar-expand-button" @click="toggleSidebar" />
         </div>
-        <Sidebar @toggle-expanded="toggleExpanded" :expanded="expanded" class="sidebar">
+        <Sidebar @toggle-expanded="toggleSidebar" :expanded="expanded" class="sidebar">
             <slot name="sidebar" />
         </Sidebar>
         <main class="main-content">
-- 
2.39.5


From 813cc7c7fcce3f1267711e49bc4d60ab50323e56 Mon Sep 17 00:00:00 2001
From: Jakob Scheid
 <jakob.scheid@developers.internal.seekra.jcloud-services.ddns.net>
Date: Fri, 31 Jul 2026 16:48:50 +0200
Subject: [PATCH 2/3] feat(sidebar): allow left sidebar layout content to
 toggle sidebar

---
 src/layouts/LeftSidebarLayout.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/LeftSidebarLayout.vue b/src/layouts/LeftSidebarLayout.vue
index b60fed9..c8a5293 100644
--- a/src/layouts/LeftSidebarLayout.vue
+++ b/src/layouts/LeftSidebarLayout.vue
@@ -40,10 +40,10 @@ const toggleSidebar = function toggleSidebar () {
             <SidebarExpandButton class="sidebar-expand-button" @click="toggleSidebar" />
         </div>
         <Sidebar @toggle-expanded="toggleSidebar" :expanded="expanded" class="sidebar">
-            <slot name="sidebar" />
+            <slot name="sidebar" :toggleSidebar="toggleSidebar" />
         </Sidebar>
         <main class="main-content">
-            <slot />
+            <slot :toggleSidebar="toggleSidebar" />
         </main>
     </div>
 </template>
-- 
2.39.5


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 3/3] 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>
-- 
2.39.5