implementing clientside callback for navigation panel

vizro-core/src/vizro/models/_dashboard.py

@@ -12,7 +12,6 @@
     Input,
     Output,
     State,
-    callback,
     clientside_callback,
     get_asset_url,
     get_relative_path,
@@ -98,7 +97,6 @@ def pre_build(self):
 
     @_log_call
     def build(self):
-        self.collapsible_nav_callback()
         for page in self.pages:
             page.build()  # TODO: ideally remove, but necessary to register slider callbacks
 
@@ -107,6 +105,12 @@ def build(self):
             Output("dashboard_container_outer", "className"),
             Input("theme_selector", "on"),
         )
+        clientside_callback(
+            ClientsideFunction(namespace="clientside", function_name="collapse_nav_panel"),
+            Output("collapse", "is_open"),
+            Input("collapse_icon", "n_clicks"),
+            State("collapse", "is_open"),
+        )
 
         return dbc.Container(
             id="dashboard_container_outer",
@@ -236,18 +240,3 @@ def _make_page_404_layout():
             ],
             className="page_error_container",
         )
-
-    @staticmethod
-    def collapsible_nav_callback():
-        """Callback for collapsing navigation panel."""
-
-        @callback(
-            Output("collapse", "is_open", allow_duplicate=True),
-            Input("collapse_icon", "n_clicks"),
-            State("collapse", "is_open"),
-            prevent_initial_call="initial_duplicate",
-        )
-        def toggle_collapse(n_clicks, is_open):
-            if n_clicks:
-                return not is_open
-            return is_open

vizro-core/src/vizro/static/js/clientside_functions.js

@@ -1,4 +1,7 @@
-import { _update_dashboard_theme } from "./models/dashboard.js";
+import {
+  _update_dashboard_theme,
+  _collapse_nav_panel,
+} from "./models/dashboard.js";
 import { _update_range_slider_values } from "./models/range_slider.js";
 import { _update_slider_values } from "./models/slider.js";
 import {
@@ -15,5 +18,6 @@ window.dash_clientside = Object.assign({}, window.dash_clientside, {
     trigger_to_global_store: _trigger_to_global_store,
     gateway: _gateway,
     after_action_cycle_breaker: _after_action_cycle_breaker,
+    collapse_nav_panel: _collapse_nav_panel,
   },
 });

vizro-core/src/vizro/static/js/models/dashboard.js

@@ -1,3 +1,9 @@
 export function _update_dashboard_theme(on) {
   return on ? "vizro_dark" : "vizro_light";
 }
+
+export function _collapse_nav_panel(n_clicks, is_open) {
+  if (n_clicks) return !is_open;
+
+  return is_open;
+}