Feat(sidebar): allow left sidebar layout content to toggle the sidebar #159

Merged
jakob.scheid merged 3 commits from feature/left-sidebar-layout-content-sidebar-toggling into main 2026-08-03 17:29:23 +02:00
Showing only changes of commit 4b010d03ac - Show all commits
+6 -1
View File
@@ -61,6 +61,10 @@ onMounted(async () => {
}); });
settingsLoaded.value = true; settingsLoaded.value = true;
}); });
const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSidebarFunction) {
if (matchMedia('(max-width: 48rem)').matches) toggleSidebarFunction();
};
</script> </script>
<template> <template>
@@ -71,13 +75,14 @@ onMounted(async () => {
</h1> </h1>
</header> </header>
<LeftSidebarLayout class="layout"> <LeftSidebarLayout class="layout">
<template #sidebar> <template #sidebar="{ toggleSidebar }">
<ul class="sidebar-sections-list"> <ul class="sidebar-sections-list">
<li v-for="section in settings"> <li v-for="section in settings">
<RouterLink <RouterLink
:to="`/settings/${section.name}`" :to="`/settings/${section.name}`"
class="button button-link link sidebar-section" class="button button-link link sidebar-section"
:class="{ active: activeSection === section.name }" :class="{ active: activeSection === section.name }"
@click="toggleSidebarIfSmallScreen(toggleSidebar)"
> >
{{ t(section.i18n) }} {{ t(section.i18n) }}
</RouterLink> </RouterLink>