Fix: Side menu always displays (#3064)

* Set correct cookie value after sidebar is clicked * Hide sidebar if cookie is not set * Fix: wrong cookie set if cookie is nil at init * Lint * Donot take cookies into account in mobile view * Open sidebar by default in desktop view * Hide sidebar by default in mobile view * Force reflow * fix toggleSidebar --------- Co-authored-by: Paul Bob <[email protected]>
avo-hq · Jul 29, 2024 · f6f4da0 · f6f4da0
1 parent 4ce587f
commit f6f4da0
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 7 deletions.
diff --git a/app/components/avo/sidebar_component.html.erb b/app/components/avo/sidebar_component.html.erb
@@ -1,5 +1,5 @@
 <div
-  class="avo-sidebar fixed z-[60] t-0 application-sidebar w-64 flex-1 border-r lg:border-none bg-none h-[calc(100vh-4rem)] bg-application lg:bg-transparent <%= 'print:hidden' if Avo.configuration.hide_layout_when_printing %>"
+  class="avo-sidebar fixed z-[60] t-0 application-sidebar w-64 flex-1 border-r lg:border-none bg-none h-[calc(100vh-4rem)] bg-application lg:bg-transparent <%= 'print:hidden' if Avo.configuration.hide_layout_when_printing %> <%= 'hidden' unless @sidebar_open %>"
   data-sidebar-target="<%= stimulus_target %>"
 >
   <div class="flex flex-col w-full h-full">

diff --git a/app/controllers/avo/application_controller.rb b/app/controllers/avo/application_controller.rb
@@ -37,7 +37,7 @@ def exception_logger(exception)
         format.html { raise exception }
         format.json {
           render json: {
-            errors: exception.respond_to?(:record) && exception.record.present? ? exception.record.errors : [],
+            errors: (exception.respond_to?(:record) && exception.record.present?) ? exception.record.errors : [],
             message: exception.message,
             traces: exception.backtrace
           }, status: ActionDispatch::ExceptionWrapper.status_code_for_exception(exception.class.name)
@@ -62,7 +62,7 @@ def resource_name
 
       begin
         request.path
-          .match(/\/?#{Avo.root_path.delete('/')}\/resources\/([a-z1-9\-_]*)\/?/mi)
+          .match(/\/?#{Avo.root_path.delete("/")}\/resources\/([a-z1-9\-_]*)\/?/mi)
           .captures
           .first
       rescue
@@ -292,8 +292,13 @@ def set_force_locale(&action)
     end
 
     def set_sidebar_open
-      value = cookies["#{Avo::COOKIES_KEY}.sidebar.open"]
-      @sidebar_open = value.blank? || value == "1"
+      value = if cookies["#{Avo::COOKIES_KEY}.sidebar.open"].nil?
+        cookies["#{Avo::COOKIES_KEY}.sidebar.open"] = "1"
+      else
+        cookies["#{Avo::COOKIES_KEY}.sidebar.open"]
+      end
+
+      @sidebar_open = value == "1"
     end
 
     # Set the current host for ActiveStorage

diff --git a/app/javascript/js/controllers/sidebar_controller.js b/app/javascript/js/controllers/sidebar_controller.js
@@ -83,7 +83,25 @@ export default class extends Controller {
   }
 
   toggleSidebar() {
+    if (this.sidebarTarget.classList.contains('hidden')) {
+      this.sidebarTarget.classList.remove('hidden')
+    }
+    this.mainAreaTarget.classList.toggle('sidebar-open')
+    const value = Cookies.get(this.cookieKey)
+    Cookies.set(this.cookieKey, value === '1' ? '0' : '1')
+  }
+
+  toggleSidebarOnMobile() {
+    if (this.mobileSidebarTarget.classList.contains('hidden')) {
+      this.mainAreaTarget.classList.remove('sidebar-open')
+      this.mobileSidebarTarget.classList.remove('hidden')
+
+      // we force a reflow here because we remove then
+      // immediately add the sidebar-open class
+      // which doesn't give the browser enough time to apply the
+      // transistion.
+      this.mainAreaTarget.offsetHeight;
+    }
     this.mainAreaTarget.classList.toggle('sidebar-open')
-    Cookies.set(this.cookieKey, this.cookieKey === '1' ? '0' : '1')
   }
 }
diff --git a/app/views/avo/partials/_navbar.html.erb b/app/views/avo/partials/_navbar.html.erb
@@ -1,7 +1,8 @@
 <%= content_tag :div, class: class_names("fixed bg-white p-2 w-full flex flex-shrink-0 items-center z-[100] px-4 lg:px-4 border-b space-x-4 lg:space-x-0 h-16", {"print:hidden": Avo.configuration.hide_layout_when_printing}) do %>
   <div class="flex items-center space-x-2 w-auto lg:w-64 flex-shrink-0 h-full">
     <div>
-      <%= a_button icon: 'avo/menu', size: :xs, compact: true, style: :text, data: { action: 'click->sidebar#toggleSidebar' }, aria: {label: "Toggle sidebar"} %>
+      <%= a_button class: 'lg:hidden', icon: 'avo/menu', size: :xs, compact: true, style: :text, data: { action: 'click->sidebar#toggleSidebarOnMobile' }, aria: {label: "Toggle sidebar"} %>
+      <%= a_button class: 'hidden lg:block', icon: 'avo/menu', size: :xs, compact: true, style: :text, data: { action: 'click->sidebar#toggleSidebar' }, aria: {label: "Toggle sidebar"} %>
     </div>
     <%= render partial: "avo/partials/logo" %>
   </div>