feat/Sidebar state in local storage

Used LocalStorage to store the expanded
state of the sidebar, so it persists over sessions

Signed-off-by: Thomas Schauer-Köckeis <[email protected]>

Author: Gepardgame

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: {