Sidebar status through cookies

assets-public/controllers/clipboard_controller.js

@@ -3,10 +3,10 @@ import addToast from 'sumocoders/addToast'
 
 export default class extends Clipboard {
   static values = {
-    successMessage: {type: String, default: 'Copied to clipboard!'}
+    successMessage: { type: String, default: 'Copied to clipboard!' }
   }
 
-  copied() {
+  copied () {
     super.copied()
     addToast(this.successMessageValue, 'success')
   }

assets-public/controllers/date_time_picker_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus'
 import flatpickr from 'flatpickr'
 
 // import the most common languages
@@ -28,7 +28,7 @@ export default class extends Controller {
     showCalendar: { type: Boolean, default: true }
   }
 
-  connect() {
+  connect () {
     let locale = document.documentElement.lang
     if (locale === 'en') {
       locale = 'default'

assets-public/controllers/form_collection_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus'
 import Sortable from 'sortablejs'
 
 export default class extends Controller {

assets-public/controllers/password_strength_checker_controller.js

@@ -1,11 +1,12 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus'
 import debounce from 'sumocoders/debounce'
 import axios from 'axios'
 
 export default class extends Controller {
   static values = {
     route: String
   }
+
   static targets = ['input', 'meterSections']
 
   connect () {

assets-public/controllers/popover_controller.js

@@ -1,8 +1,8 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus'
 import { Popover } from 'bootstrap'
 
 export default class extends Controller {
-  connect() {
+  connect () {
     this.element.popoverObject = new Popover(this.element)
   }
 }

assets-public/controllers/scroll_to_top_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus'
 import debounce from 'sumocoders/debounce'
 
 export default class extends Controller {

assets-public/controllers/sidebar_collapsable_controller.js

@@ -1,23 +1,13 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus'
+import { setCookie } from 'sumocoders/cookie'
 
 export default class extends Controller {
   static targets = ['toggleable']
 
-  connect () {
-    if (window.innerWidth > 576) {
-      // read local storage
-      if (localStorage.getItem('sidebar_is_open') === 'false') {
-        this.toggleableTarget.classList.add('sidebar-collapsed')
-      } else {
-        this.toggleableTarget.classList.remove('sidebar-collapsed')
-      }
-    }
-  }
-
   toggle () {
-    this.toggleableTarget.classList.toggle('sidebar-collapsed');
+    this.toggleableTarget.classList.toggle('sidebar-collapsed')
 
-    // set local storage
-    localStorage.setItem('sidebar_is_open', this.toggleableTarget.classList.contains('sidebar-collapsed') ? 'false' : 'true')
+    // set cookie
+    setCookie('sidebar_is_open', !this.toggleableTarget.classList.contains('sidebar-collapsed'))
   }
 }

assets-public/controllers/tabs_controller.js

@@ -1,7 +1,7 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  addAnchorToUrl(event) {
-    history.pushState({}, '', event.target.dataset['bs-target'])
+  addAnchorToUrl (event) {
+    window.history.pushState({}, '', event.target.dataset['bs-target'])
   }
 }

assets-public/controllers/theme_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus'
 import { setCookie } from 'sumocoders/cookie'
 
 export default class extends Controller {

assets-public/controllers/toast_controller.js

@@ -1,12 +1,12 @@
-import { Controller } from '@hotwired/stimulus';
-import { Toast } from 'bootstrap';
+import { Controller } from '@hotwired/stimulus'
+import { Toast } from 'bootstrap'
 
 export default class extends Controller {
   static values = {
     type: String,
     message: String,
-    autohide: {type: Boolean, default: true},
-    delay: {type: Number, default: 10000}
+    autohide: { type: Boolean, default: true },
+    delay: { type: Number, default: 10000 }
   }
 
   connect () {
@@ -15,8 +15,8 @@ export default class extends Controller {
     this.element.role = this.typeValue === 'danger' ? 'alert' : 'status'
     this.element['aria-live'] = this.typeValue === 'danger' ? 'assertive' : 'polite'
     this.element['aria-atomic'] = 'true'
-    this.element.dataset['bsAutohide'] = this.autohideValue ? 'true' : 'false'
-    this.element.dataset['bsDelay'] = this.delayValue
+    this.element.dataset.bsAutohide = this.autohideValue ? 'true' : 'false'
+    this.element.dataset.bsDelay = this.delayValue
     this.element.id = 'toast-' + Math.random().toString(36).substring(2, 15)
     let icon = 'fas fa-info-circle'
     if (this.typeValue === 'success') {

assets-public/controllers/tooltip_controller.js

@@ -1,8 +1,8 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus'
 import { Tooltip } from 'bootstrap'
 
 export default class extends Controller {
-  connect() {
+  connect () {
     this.element.tooltip = new Tooltip(this.element)
   }
 }

assets-public/js/debounce.js

@@ -1,8 +1,8 @@
 export default function debounce (func, timeout = 500) {
-  let timer;
+  let timer
 
   return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => { func.apply(this, args); }, timeout);
-  };
+    clearTimeout(timer)
+    timer = setTimeout(() => { func.apply(this, args) }, timeout)
+  }
 }

assets-public/js/toast.js

@@ -1,4 +1,4 @@
-export default function addToast(message, type = 'info', autohide = true, delay = 10000) {
+export default function addToast (message, type = 'info', autohide = true, delay = 10000) {
   document.querySelector('body').insertAdjacentHTML('beforeend', `
     <turbo-stream action="append" targets="#toast-wrapper">
       <template>

src/Twig/FrameworkExtension.php

@@ -25,6 +25,7 @@ public function getFunctions(): array
     {
         return [
             new TwigFunction('theme', [$this, 'determineTheme']),
+            new TwigFunction('sidebarIsOpen', [$this, 'sidebarIsOpen']),
         ];
     }
 
@@ -40,4 +41,17 @@ public function determineTheme(): string
 
         return 'theme-' . $this->requestStack->getCurrentRequest()->cookies->get('theme');
     }
+
+    public function sidebarIsOpen(): bool
+    {
+        if (is_null($this->requestStack->getCurrentRequest())) {
+            return true;
+        }
+
+        if (!$this->requestStack->getCurrentRequest()->cookies->has('sidebar_is_open')) {
+            return true;
+        }
+
+        return $this->requestStack->getCurrentRequest()->cookies->get('sidebar_is_open') !== 'false';
+    }
 }

templates/base.html.twig

@@ -5,7 +5,7 @@
 <body class="body-base" data-theme-path="{{ asset('styles/style-dark.scss') }}">
   {% block start_body %}
   {% endblock %}
-  <div id="main-wrapper" class="main-wrapper" data-controller="sidebar-collapsable" data-sidebar-collapsable-target="toggleable">
+  <div id="main-wrapper" class="main-wrapper{% if not sidebarIsOpen() %} sidebar-collapsed{% endif %}" data-controller="sidebar-collapsable" data-sidebar-collapsable-target="toggleable">
     <div id="main-menu" class="main-menu" role="navigation">
       {% block include_navigation %}
         {{ include('@SumoCodersFrameworkCore/navigation.html.twig') }}