From 10fcb16f156441390e0acaf01bb1789b41856f22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Schauer-K=C3=B6ckeis?=
 <thomas.schauer-koeckeis@rohde-schwarz.com>
Date: Tue, 10 Sep 2024 09:06:30 +0200
Subject: [PATCH] feat/Sidebar state in local storage Used LocalStorage to
 store the expanded state of the sidebar, so it persists over sessions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Thomas Schauer-Köckeis <thomas.schauer-koeckeis@rohde-schwarz.com>
---
 src/containers/DefaultContainer.vue | 31 ++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/containers/DefaultContainer.vue b/src/containers/DefaultContainer.vue
index f52ab6a8b..9b67884ba 100644
--- a/src/containers/DefaultContainer.vue
+++ b/src/containers/DefaultContainer.vue
@@ -2,7 +2,7 @@
   <div class="app">
     <DefaultHeader />
     <div class="app-body">
-      <AppSidebar fixed>
+      <AppSidebar ref="sidebar" fixed>
         <SidebarHeader />
         <SidebarForm />
         <SidebarNav :navItems="permissibleNav"></SidebarNav>
@@ -60,6 +60,7 @@ export default {
   },
   data() {
     return {
+      isSidebarMinimized: true,
       breadcrumbs: [],
       nav: [
         {
@@ -150,6 +151,12 @@ export default {
     };
   },
   methods: {
+    handleMinimizedUpdate() {
+      this.isSidebarMinimized = !this.isSidebarMinimized;
+      if (localStorage) {
+        localStorage.setItem('isSidebarMinimized', this.isSidebarMinimized);
+      }
+    },
     generateBreadcrumbs: function generateBreadcrumbs(
       crumbName,
       subSectionName,
@@ -186,6 +193,28 @@ export default {
   mounted() {
     if (this.$dtrack && this.$dtrack.version.includes('SNAPSHOT')) {
       this.$root.$emit('bv::show::modal', 'snapshotModal');
+
+      this.isSidebarMinimized =
+        localStorage && localStorage.getItem('isSidebarMinimized') !== null
+          ? localStorage.getItem('isSidebarMinimized') === 'true'
+          : false;
+      const sidebar = document.body;
+      if (sidebar) {
+        if (this.isSidebarMinimized) {
+          sidebar.classList.add('sidebar-minimized');
+        } else {
+          sidebar.classList.remove('sidebar-minimized');
+        }
+      }
+      this.$nextTick(() => {
+        const sidebarMinimizer = this.$el.querySelector('.sidebar-minimizer');
+        if (sidebarMinimizer) {
+          sidebarMinimizer.addEventListener(
+            'click',
+            this.handleMinimizedUpdate,
+          );
+        }
+      });
     }
   },
   computed: {