From 553a2ae1168c29bb07487490f9b95bde4f6969c9 Mon Sep 17 00:00:00 2001
From: Sahiba Mittal <sahiba.mittal@citi.com>
Date: Thu, 10 Oct 2024 15:13:49 +0100
Subject: [PATCH] feat/Save Sidebar state in local storage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Thomas Schauer-Köckeis <75749982+Gepardgame@users.noreply.github.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 9190536d..8bad2ccc 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: [
         {
@@ -168,6 +169,12 @@ export default {
     };
   },
   methods: {
+    handleMinimizedUpdate() {
+      this.isSidebarMinimized = !this.isSidebarMinimized;
+      if (localStorage) {
+        localStorage.setItem('isSidebarMinimized', this.isSidebarMinimized);
+      }
+    },
     generateBreadcrumbs: function generateBreadcrumbs(
       crumbName,
       subSectionName,
@@ -204,6 +211,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: {