From c70e285026a5adc32ffc611bf35ccbda758bb6d5 Mon Sep 17 00:00:00 2001
From: Jakob Scheid
 <jakob.scheid@developers.internal.seekra.jcloud-services.ddns.net>
Date: Thu, 30 Jul 2026 18:19:11 +0200
Subject: [PATCH 1/7] feat(icons): add sidebar expanding icon

---
 src/assets/icons/sidebar-expand.svg | 38 +++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/assets/icons/sidebar-expand.svg

diff --git a/src/assets/icons/sidebar-expand.svg b/src/assets/icons/sidebar-expand.svg
new file mode 100644
index 0000000..9c7a361
--- /dev/null
+++ b/src/assets/icons/sidebar-expand.svg
@@ -0,0 +1,38 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path
+        stroke="currentColor"
+        stroke-width="2"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="
+            M6 4
+            h12
+            a4 4 0 0 1 4 4
+            v8
+            a4 4 0 0 1 -4 4
+            h-12
+            a4 4 0 0 1 -4 -4
+            v-8
+            a4 4 0 0 1 4 -4
+            m2 0
+            v16
+        "
+    />
+</svg>
\ No newline at end of file

From 5b1f2b57a7271cb405e74d3e801cefaae0f2740d Mon Sep 17 00:00:00 2001
From: Jakob Scheid
 <jakob.scheid@developers.internal.seekra.jcloud-services.ddns.net>
Date: Thu, 30 Jul 2026 18:21:29 +0200
Subject: [PATCH 2/7] feat(sidebar): add sidebar expand button

Added a button to expand the sidebar to the sidebar and reorganized
sidebar elements accordingly.
---
 src/features/sidebar/components/Sidebar.vue   | 24 ++++++++++-
 .../components/SidebarExpandButton.vue        | 41 +++++++++++++++++++
 2 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/features/sidebar/components/SidebarExpandButton.vue

diff --git a/src/features/sidebar/components/Sidebar.vue b/src/features/sidebar/components/Sidebar.vue
index aba07ba..15b2e1c 100644
--- a/src/features/sidebar/components/Sidebar.vue
+++ b/src/features/sidebar/components/Sidebar.vue
@@ -14,15 +14,37 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
+<script setup>
+import SidebarExpandButton from './SidebarExpandButton.vue';
+</script>
+
 <template>
     <nav class="sidebar">
-        <slot />
+        <div class="sidebar-controls">
+            <SidebarExpandButton />
+        </div>
+        <div class="sidebar-content">
+            <slot />
+        </div>
     </nav>
 </template>
 
 <style scoped>
 .sidebar {
     border-right: 1px solid var(--border);
+}
+
+.sidebar-controls {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    padding: 1em 20px;
+    padding-bottom: 0;
+    margin-bottom: 8px;
+}
+
+.sidebar-content {
     padding: 20px;
+    padding-top: 0;
 }
 </style>
\ No newline at end of file
diff --git a/src/features/sidebar/components/SidebarExpandButton.vue b/src/features/sidebar/components/SidebarExpandButton.vue
new file mode 100644
index 0000000..1802de9
--- /dev/null
+++ b/src/features/sidebar/components/SidebarExpandButton.vue
@@ -0,0 +1,41 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+import Icon from '@/features/icons/components/Icon.vue';
+
+const emit = defineEmits(['click']);
+
+const click = function click (event) {
+    emit('click', event);
+};
+</script>
+
+<template>
+    <button class="button sidebar-expand-button">
+        <Icon name="sidebar-expand" @click="click" />
+    </button>
+</template>
+
+<style scoped>
+.sidebar-expand-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 4px;
+    border-radius: 10px;
+}
+</style>
\ No newline at end of file

From e43784bff0efbd0345a18e1f87a85a1953aa158e Mon Sep 17 00:00:00 2001
From: Jakob Scheid
 <jakob.scheid@developers.internal.seekra.jcloud-services.ddns.net>
Date: Thu, 30 Jul 2026 19:48:12 +0200
Subject: [PATCH 3/7] feat(sidebar): implement sidebar visibility toggling

---
 src/features/sidebar/components/Sidebar.vue | 17 ++++++++--
 src/layouts/LeftSidebarLayout.vue           | 35 +++++++++++++++++++--
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/features/sidebar/components/Sidebar.vue b/src/features/sidebar/components/Sidebar.vue
index 15b2e1c..3cfcef7 100644
--- a/src/features/sidebar/components/Sidebar.vue
+++ b/src/features/sidebar/components/Sidebar.vue
@@ -16,14 +16,27 @@ limitations under the License.
 
 <script setup>
 import SidebarExpandButton from './SidebarExpandButton.vue';
+
+const props = defineProps({
+    'expanded': {
+        default: false,
+        required: false,
+        type: Boolean
+    }
+});
+const emit = defineEmits(['toggleExpanded']);
+
+const toggleSidebar = function toggleSidebar () {
+    emit('toggleExpanded');
+};
 </script>
 
 <template>
     <nav class="sidebar">
         <div class="sidebar-controls">
-            <SidebarExpandButton />
+            <SidebarExpandButton @click="toggleSidebar" />
         </div>
-        <div class="sidebar-content">
+        <div class="sidebar-content" v-if="props.expanded">
             <slot />
         </div>
     </nav>
diff --git a/src/layouts/LeftSidebarLayout.vue b/src/layouts/LeftSidebarLayout.vue
index cadd068..ec2e7ad 100644
--- a/src/layouts/LeftSidebarLayout.vue
+++ b/src/layouts/LeftSidebarLayout.vue
@@ -16,11 +16,26 @@ limitations under the License.
 
 <script setup>
 import Sidebar from '@/features/sidebar/components/Sidebar.vue';
+import { ref } from 'vue';
+
+const props = defineProps({
+    'expanded': {
+        default: false,
+        required: false,
+        type: Boolean
+    }
+});
+
+const expanded = ref(props.expanded);
+
+const toggleExpanded = function toggleExpanded () {
+    expanded.value = !expanded.value;
+};
 </script>
 
 <template>
-    <div class="layout-container">
-        <Sidebar>
+    <div class="layout-container" :class="{ expanded }">
+        <Sidebar @toggle-expanded="toggleExpanded" :expanded="expanded">
             <slot name="sidebar" />
         </Sidebar>
         <main class="main-content">
@@ -32,10 +47,24 @@ import Sidebar from '@/features/sidebar/components/Sidebar.vue';
 <style scoped>
 .layout-container {
     display: grid;
-    grid-template-columns: min(24%, 280px) 1fr;
+    grid-template-columns: 72px 1fr;
     border-top: 1px solid var(--border);
 }
 
+.layout-container.expanded {
+    grid-template-columns: min(24%, 280px) 1fr;
+}
+
+@media (max-width: 48rem) {
+    .layout-container {
+        grid-template-columns: 0 1fr;
+    }
+
+    .layout-container.expanded {
+        grid-template-columns: 1fr 0;
+    }
+}
+
 .main-content {
     padding: 20px;
 }

From 63d9e31d2911261b58abb11a1c850a93971712e0 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:17:43 +0200
Subject: [PATCH 4/7] fix(sidebar): do not show sidebar expanding button on
 small screens when sidebar is not expanded

---
 src/features/sidebar/components/Sidebar.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/features/sidebar/components/Sidebar.vue b/src/features/sidebar/components/Sidebar.vue
index 3cfcef7..46e45c0 100644
--- a/src/features/sidebar/components/Sidebar.vue
+++ b/src/features/sidebar/components/Sidebar.vue
@@ -32,9 +32,9 @@ const toggleSidebar = function toggleSidebar () {
 </script>
 
 <template>
-    <nav class="sidebar">
+    <nav class="sidebar" :class="{ expanded }">
         <div class="sidebar-controls">
-            <SidebarExpandButton @click="toggleSidebar" />
+            <SidebarExpandButton @click="toggleSidebar" class="sidebar-expand-button" />
         </div>
         <div class="sidebar-content" v-if="props.expanded">
             <slot />
@@ -56,6 +56,12 @@ const toggleSidebar = function toggleSidebar () {
     margin-bottom: 8px;
 }
 
+@media (max-width: 48rem) {
+    .sidebar:not(.expanded) .sidebar-expand-button {
+        display: none;
+    }
+}
+
 .sidebar-content {
     padding: 20px;
     padding-top: 0;

From 0a589441578ec78bec269b6cb3f0e7d85416cf99 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:20:51 +0200
Subject: [PATCH 5/7] feat(sidebar): add sidebar expand button to left sidebar
 layout

Added a sidebar expand button to the left sidebar layout that is shown
on small screens when the sidebar is not expanded.
---
 src/layouts/LeftSidebarLayout.vue | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/layouts/LeftSidebarLayout.vue b/src/layouts/LeftSidebarLayout.vue
index ec2e7ad..7031e46 100644
--- a/src/layouts/LeftSidebarLayout.vue
+++ b/src/layouts/LeftSidebarLayout.vue
@@ -16,6 +16,7 @@ limitations under the License.
 
 <script setup>
 import Sidebar from '@/features/sidebar/components/Sidebar.vue';
+import SidebarExpandButton from '@/features/sidebar/components/SidebarExpandButton.vue';
 import { ref } from 'vue';
 
 const props = defineProps({
@@ -35,7 +36,10 @@ const toggleExpanded = function toggleExpanded () {
 
 <template>
     <div class="layout-container" :class="{ expanded }">
-        <Sidebar @toggle-expanded="toggleExpanded" :expanded="expanded">
+        <div class="sidebar-expand-button-container">
+            <SidebarExpandButton class="sidebar-expand-button" @click="toggleExpanded" />
+        </div>
+        <Sidebar @toggle-expanded="toggleExpanded" :expanded="expanded" class="sidebar">
             <slot name="sidebar" />
         </Sidebar>
         <main class="main-content">
@@ -48,6 +52,10 @@ const toggleExpanded = function toggleExpanded () {
 .layout-container {
     display: grid;
     grid-template-columns: 72px 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+        "sidebar-expand sidebar-expand"
+        "sidebar main-content";
     border-top: 1px solid var(--border);
 }
 
@@ -55,6 +63,15 @@ const toggleExpanded = function toggleExpanded () {
     grid-template-columns: min(24%, 280px) 1fr;
 }
 
+.sidebar-expand-button-container {
+    grid-area: sidebar-expand;
+    display: none;
+}
+
+.sidebar {
+    grid-area: sidebar;
+}
+
 @media (max-width: 48rem) {
     .layout-container {
         grid-template-columns: 0 1fr;
@@ -63,9 +80,20 @@ const toggleExpanded = function toggleExpanded () {
     .layout-container.expanded {
         grid-template-columns: 1fr 0;
     }
+    
+    .layout-container:not(.expanded) .sidebar-expand-button-container {
+        justify-content: end;
+        display: block;
+        padding: 20px;
+    }
+
+    .layout-container:not(.expanded) .main-content {
+        padding-top: 0;
+    }
 }
 
 .main-content {
+    grid-area: main-content;
     padding: 20px;
 }
 </style>
\ No newline at end of file

From 48e979ac64abb21691032d95c38876721b98b0b3 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:25:04 +0200
Subject: [PATCH 6/7] fix(sidebar): fix main content displaying

Do not show main content on small screens when the sidebar is expanded.
---
 src/layouts/LeftSidebarLayout.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/layouts/LeftSidebarLayout.vue b/src/layouts/LeftSidebarLayout.vue
index 7031e46..dcb9d4e 100644
--- a/src/layouts/LeftSidebarLayout.vue
+++ b/src/layouts/LeftSidebarLayout.vue
@@ -90,6 +90,10 @@ const toggleExpanded = function toggleExpanded () {
     .layout-container:not(.expanded) .main-content {
         padding-top: 0;
     }
+
+    .layout-container.expanded .main-content {
+        display: none;
+    }
 }
 
 .main-content {

From 0939379c0a766292117f830f8a12ee321548ec2d 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:30:13 +0200
Subject: [PATCH 7/7] feat(sidebar): decrease horizontal padding when sidebar
 is not expanded

Set the horizontal padding of the unexpanded sidebar to 1em.
---
 src/features/sidebar/components/Sidebar.vue | 4 ++++
 src/layouts/LeftSidebarLayout.vue           | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/features/sidebar/components/Sidebar.vue b/src/features/sidebar/components/Sidebar.vue
index 46e45c0..02616fb 100644
--- a/src/features/sidebar/components/Sidebar.vue
+++ b/src/features/sidebar/components/Sidebar.vue
@@ -56,6 +56,10 @@ const toggleSidebar = function toggleSidebar () {
     margin-bottom: 8px;
 }
 
+.sidebar:not(.expanded) .sidebar-controls {
+    padding: 1em;
+}
+
 @media (max-width: 48rem) {
     .sidebar:not(.expanded) .sidebar-expand-button {
         display: none;
diff --git a/src/layouts/LeftSidebarLayout.vue b/src/layouts/LeftSidebarLayout.vue
index dcb9d4e..3d525c9 100644
--- a/src/layouts/LeftSidebarLayout.vue
+++ b/src/layouts/LeftSidebarLayout.vue
@@ -51,7 +51,7 @@ const toggleExpanded = function toggleExpanded () {
 <style scoped>
 .layout-container {
     display: grid;
-    grid-template-columns: 72px 1fr;
+    grid-template-columns: calc(32px + 2em) 1fr;
     grid-template-rows: auto 1fr;
     grid-template-areas:
         "sidebar-expand sidebar-expand"