Add quick POC for demo

vizro-core/examples/assets/css/images.css

@@ -4,3 +4,35 @@ img[src*="#my-image"] {
   float: left;
   margin: 10px 25px;
 }
+
+.page-title {
+  grid-area: pagetitle;
+}
+
+.nav_panel {
+  grid-area: navpanel;
+}
+
+.dashboard_title_outer {
+  grid-area: dashboardtitle;
+}
+
+.control_panel {
+  grid-area: controls;
+}
+
+.component_container {
+  grid-area: components;
+}
+
+.theme_selector {
+  grid-area: themeselector;
+}
+
+
+#dashboard_container_outer {
+  display: grid;
+  grid-template-areas: "dashboardtitle pagetitle themeselector"
+                       "navpanel components components"
+                       "controls components components"
+}

vizro-core/examples/default/app.py

@@ -530,6 +530,7 @@ def create_home_page():
             "Summary": ["Continent Summary"],
         }
     ),
+    title="Dashboard"
 )
 
 if __name__ == "__main__":

vizro-core/src/vizro/actions/_action_loop/_action_loop.py

@@ -16,7 +16,7 @@ def _create_app_callbacks(cls) -> html.Div:
         Returns:
             List of required components for the action loop and for each `Action` in the `Dashboard`.
         """
-        return html.Div([cls._build_action_loop(), cls._build_actions_models()], id="app_components_div")
+        return html.Div([cls._build_action_loop(), cls._build_actions_models()], id="app_components_div", className="hidden")
 
     @staticmethod
     def _build_action_loop():

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

@@ -103,10 +103,19 @@ def build(self):
             page.build()  # TODO: ideally remove, but necessary to register slider callbacks
         self._update_theme()
 
+        dashboard_title = (
+            html.Div(
+                children=[html.H2(self.title), html.Hr()], className="dashboard_title", id="dashboard_title_outer"
+            )
+            if self.title
+            else None
+        )
+
         return dbc.Container(
             id="dashboard_container_outer",
             children=[
-                html.Div(id=f"vizro_version_{vizro.__version__}"),
+                dashboard_title,
+                html.Div(id=f"vizro_version_{vizro.__version__}", className="hidden"),
                 ActionLoop._create_app_callbacks(),
                 dash.page_container,
             ],

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

@@ -154,7 +154,7 @@ def update_graph_theme(theme_selector_on: bool):
     def _create_theme_switch():
         _, dashboard = next(model_manager._items_with_type(Dashboard))
         theme_switch = daq.BooleanSwitch(
-            id="theme_selector", on=True if dashboard.theme == "vizro_dark" else False, persistence=True
+            id="theme_selector", on=True if dashboard.theme == "vizro_dark" else False, persistence=True, className="theme_selector"
         )
         return theme_switch
 
@@ -188,52 +188,16 @@ def _create_component_container(self, components_content):
         )
         return component_container
 
-    @staticmethod
-    def _arrange_containers(page_title, theme_switch, nav_panel, control_panel, component_container):
-        """Defines div container arrangement on page.
-
-        To change arrangement, one has to change the order in the header, left_side and/or right_side_elements.
-        """
-        _, dashboard = next(model_manager._items_with_type(Dashboard))
-        dashboard_title = (
-            html.Div(
-                children=[html.H2(dashboard.title), html.Hr()], className="dashboard_title", id="dashboard_title_outer"
-            )
-            if dashboard.title
-            else None
-        )
-
-        header_elements = [page_title, theme_switch]
-        left_side_elements = [dashboard_title, nav_panel, control_panel]
-        header = html.Div(children=header_elements, className="header", id="header_outer")
-        left_side = (
-            html.Div(children=left_side_elements, className="left_side", id="left_side_outer")
-            if any(left_side_elements)
-            else None
-        )
-        right_side_elements = [header, component_container]
-        right_side = html.Div(children=right_side_elements, className="right_side", id="right_side_outer")
-        return left_side, right_side
-
     def _make_page_layout(self, controls_content, components_content):
         # Create dashboard containers/elements
-        page_title = html.H2(children=self.title)
+        page_title = html.H2(children=self.title, className="page-title")
         theme_switch = self._create_theme_switch()
         nav_panel = self._create_nav_panel()
         control_panel = self._create_control_panel(controls_content)
         component_container = self._create_component_container(components_content)
 
-        # Arrange dashboard containers
-        left_side, right_side = self._arrange_containers(
-            page_title=page_title,
-            theme_switch=theme_switch,
-            nav_panel=nav_panel,
-            control_panel=control_panel,
-            component_container=component_container,
-        )
-
         return dbc.Container(
             id=self.id,
-            children=[dcc.Store(id=f"{ON_PAGE_LOAD_ACTION_PREFIX}_trigger_{self.id}"), left_side, right_side],
+            children=[dcc.Store(id=f"{ON_PAGE_LOAD_ACTION_PREFIX}_trigger_{self.id}"), page_title, theme_switch, nav_panel, control_panel, component_container],
             className="page_container",
         )