🐛 : keep sidebar status change changing route

resolves #82
gaia-app · Aug 30, 2019 · 0b1643b · 0b1643b
1 parent 008a029
commit 0b1643b
Show file tree

Hide file tree

Showing 12 changed files with 26 additions and 14 deletions.
diff --git a/src/main/java/io/codeka/gaia/dashboard/controller/DashboardControllerAdvice.java b/src/main/java/io/codeka/gaia/dashboard/controller/DashboardControllerAdvice.java
@@ -3,6 +3,7 @@
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.boot.actuate.info.InfoEndpoint;
 import org.springframework.web.bind.annotation.ControllerAdvice;
+import org.springframework.web.bind.annotation.CookieValue;
 import org.springframework.web.bind.annotation.ModelAttribute;
 
 import java.util.Map;
@@ -21,4 +22,10 @@ public class DashboardControllerAdvice {
     public Map<String, Object> buildInformation(){
         return infoEndpoint.info();
     }
+
+    @ModelAttribute("sidebar_collapsed")
+    public boolean sidebarCollapsed(@CookieValue(name = "sidebar_collapsed", defaultValue = "false") String cookieValue){
+        return Boolean.valueOf(cookieValue);
+    }
+
 }
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -10,7 +10,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">

diff --git a/src/main/resources/templates/job.html b/src/main/resources/templates/job.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">

diff --git a/src/main/resources/templates/module.html b/src/main/resources/templates/module.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">

diff --git a/src/main/resources/templates/module_description.html b/src/main/resources/templates/module_description.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">

diff --git a/src/main/resources/templates/modules.html b/src/main/resources/templates/modules.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">

diff --git a/src/main/resources/templates/new_stack.html b/src/main/resources/templates/new_stack.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">

diff --git a/src/main/resources/templates/settings.html b/src/main/resources/templates/settings.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">

diff --git a/src/main/resources/templates/stack.html b/src/main/resources/templates/stack.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">

diff --git a/src/main/resources/templates/stacks.html b/src/main/resources/templates/stacks.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">

diff --git a/src/main/resources/templates/users.html b/src/main/resources/templates/users.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">

diff --git a/src/main/resources/templates/vue_templates/sidebar.vue b/src/main/resources/templates/vue_templates/sidebar.vue
@@ -1,5 +1,5 @@
 <template id="sidebar-template">
-    <nav id="sidebar">
+    <nav id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}">
         <div>
             <div class="sidebar-part">
                 <div class="sidebar-header">
@@ -37,15 +37,20 @@
     </nav>
 </template>
 
-<script type="application/ecmascript">
+<script th:inline="javascript"  type="application/ecmascript">
+    let sidebar_collapsed = [[${sidebar_collapsed}]];
+
     new Vue({
-        el: "#sidebar-placeholder",
-        template: "#sidebar-template"
+        el: "#sidebar",
+        template: "#sidebar-template",
     });
 
     $(document).ready(function () {
         /*-- sidebar js --*/
+        // sidebarCollapse button is in another part (header)
         $('#sidebarCollapse').on('click', function () {
+            sidebar_collapsed = ! sidebar_collapsed;
+            document.cookie = `sidebar_collapsed=${sidebar_collapsed}`;
             $('#sidebar').toggleClass('active');
         });
     });