From 3033abd9ee9f7b42b94f156c596a29be594411cf Mon Sep 17 00:00:00 2001
From: nadijagraca <nadija_ratkusic_graca@external.mckinsey.com>
Date: Wed, 27 Sep 2023 15:25:17 +0200
Subject: [PATCH 01/18] fixing accordion item highlight bug

---
 .../vizro/models/_navigation/_accordion.py    | 20 +++++++++----------
 .../vizro/models/_navigation/navigation.py    |  4 ++--
 vizro-core/src/vizro/models/_page.py          |  4 ++--
 vizro-core/src/vizro/static/css/accordion.css | 11 ++++++++--
 4 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/vizro-core/src/vizro/models/_navigation/_accordion.py b/vizro-core/src/vizro/models/_navigation/_accordion.py
index e2b60687b..32d45e00c 100644
--- a/vizro-core/src/vizro/models/_navigation/_accordion.py
+++ b/vizro-core/src/vizro/models/_navigation/_accordion.py
@@ -26,17 +26,17 @@ class Accordion(VizroBaseModel):
     _validate_pages = validator("pages", allow_reuse=True, always=True)(_validate_pages)
 
     @_log_call
-    def build(self):
+    def build(self, page_id):
         if self.pages:
-            return self._create_accordion()
-        return self._create_default_accordion()
+            return self._create_accordion(page_id=page_id)
+        return self._create_default_accordion(page_id=page_id)
 
-    def _create_accordion_buttons(self, accordion_pages):
+    def _create_accordion_buttons(self, accordion_pages, page_id):
         return [
             dbc.Button(
                 children=[page["name"]],
                 key=page["relative_path"],
-                className="accordion-item-button",
+                className="accordion-item-button-active" if page_id == page["name"] else "accordion-item-button",
                 href=page["relative_path"],
             )
             for page in dash.page_registry.values()
@@ -51,12 +51,12 @@ def _create_accordion_item(self, accordion_buttons, title=ACCORDION_TITLE):
             class_name="accordion_item",
         )
 
-    def _create_default_accordion(self):
+    def _create_default_accordion(self, page_id):
         accordion_buttons = [
             dbc.Button(
                 children=[page["name"]],
                 key=page["relative_path"],
-                className="accordion-item-button",
+                className="accordion-item-button-active" if page_id == page["name"] else "accordion-item-button",
                 href=page["relative_path"],
             )
             for page in dash.page_registry.values()
@@ -84,16 +84,16 @@ def _create_default_accordion(self):
             id=f"{self.id}_outer",
         )
 
-    def _create_accordion(self):
+    def _create_accordion(self, page_id):
         accordion_items = []
 
         if isinstance(self.pages, dict):
             for title, accordion_pages in self.pages.items():
-                accordion_buttons = self._create_accordion_buttons(accordion_pages=accordion_pages)
+                accordion_buttons = self._create_accordion_buttons(accordion_pages=accordion_pages, page_id=page_id)
                 accordion_items.append(self._create_accordion_item(accordion_buttons=accordion_buttons, title=title))
 
         if isinstance(self.pages, list):
-            accordion_buttons = self._create_accordion_buttons(accordion_pages=self.pages)
+            accordion_buttons = self._create_accordion_buttons(accordion_pages=self.pages, page_id=page_id)
             accordion_items.append(self._create_accordion_item(accordion_buttons=accordion_buttons))
 
         if len(accordion_buttons) == len(accordion_items) == 1:
diff --git a/vizro-core/src/vizro/models/_navigation/navigation.py b/vizro-core/src/vizro/models/_navigation/navigation.py
index 756fe8d9e..41245e55b 100644
--- a/vizro-core/src/vizro/models/_navigation/navigation.py
+++ b/vizro-core/src/vizro/models/_navigation/navigation.py
@@ -72,5 +72,5 @@ def _set_selector(self):
         self._selector = Accordion(pages=self.pages)
 
     @_log_call
-    def build(self):
-        return self._selector.build()
+    def build(self, page_id):
+        return self._selector.build(page_id=page_id)
diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py
index 5906a26f9..912d62e89 100644
--- a/vizro-core/src/vizro/models/_page.py
+++ b/vizro-core/src/vizro/models/_page.py
@@ -172,9 +172,9 @@ def _create_nav_panel(self):
 
         _, dashboard = next(model_manager._items_with_type(Dashboard))
         if dashboard.navigation:
-            return dashboard.navigation.build()
+            return dashboard.navigation.build(page_id=self.id)
 
-        return Accordion().build()
+        return Accordion().build(page_id=self.id)
 
     def _create_component_container(self, components_content):
         component_container = html.Div(
diff --git a/vizro-core/src/vizro/static/css/accordion.css b/vizro-core/src/vizro/static/css/accordion.css
index 1ed9eb28a..9ba7e2ff7 100644
--- a/vizro-core/src/vizro/static/css/accordion.css
+++ b/vizro-core/src/vizro/static/css/accordion.css
@@ -48,7 +48,7 @@
 
 .accordion-button:not(.collapsed) {
   color: var(--text-primary);
-  background-color: var(--state-overlays-selected);
+  /*background-color: var(--state-overlays-selected); */
 }
 
 .accordion-button:not(.collapsed)::after {
@@ -88,6 +88,7 @@
   background-color: inherit;
   width: 100%;
   border-bottom: 1px solid var(--border-subtle-alpha-01);
+  gap: var(--spacing-01);
 }
 
 .accordion_item:last-child {
@@ -102,7 +103,8 @@
   gap: var(--spacing-01);
 }
 
-div.page_container .accordion-item-button {
+div.page_container .accordion-item-button,
+.accordion-item-button-active{
   background-color: inherit;
   width: 100%;
   display: flex;
@@ -113,6 +115,11 @@ div.page_container .accordion-item-button {
   line-height: var(--text-size-03);
 }
 
+.accordion-item-button-active {
+  background-color: var(--state-overlays-selected);
+  color: var(--text-primary);
+}
+
 /*
 * Since the text inside a accordion btn is very specific
 * Adding important to increase the specificity

From b4cbf9fbf29a8331f46b54437b38bd3796a13656 Mon Sep 17 00:00:00 2001
From: nadijagraca <nadija_ratkusic_graca@external.mckinsey.com>
Date: Thu, 28 Sep 2023 14:16:34 +0200
Subject: [PATCH 02/18] removing background color highlight from selected
 accordion, aligning accordion title with page title

---
 vizro-core/src/vizro/models/_navigation/_accordion.py | 1 +
 vizro-core/src/vizro/static/css/accordion.css         | 1 -
 vizro-core/src/vizro/static/css/layout.css            | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/vizro-core/src/vizro/models/_navigation/_accordion.py b/vizro-core/src/vizro/models/_navigation/_accordion.py
index 32d45e00c..758fce943 100644
--- a/vizro-core/src/vizro/models/_navigation/_accordion.py
+++ b/vizro-core/src/vizro/models/_navigation/_accordion.py
@@ -107,6 +107,7 @@ def _create_accordion(self, page_id):
                     class_name="accordion",
                     persistence=True,
                     persistence_type="session",
+                    always_open=True,
                 ),
                 html.Div(className="keyline"),
             ],
diff --git a/vizro-core/src/vizro/static/css/accordion.css b/vizro-core/src/vizro/static/css/accordion.css
index 9ba7e2ff7..1f0a984bd 100644
--- a/vizro-core/src/vizro/static/css/accordion.css
+++ b/vizro-core/src/vizro/static/css/accordion.css
@@ -48,7 +48,6 @@
 
 .accordion-button:not(.collapsed) {
   color: var(--text-primary);
-  /*background-color: var(--state-overlays-selected); */
 }
 
 .accordion-button:not(.collapsed)::after {
diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css
index 334a96349..dcdd82efb 100644
--- a/vizro-core/src/vizro/static/css/layout.css
+++ b/vizro-core/src/vizro/static/css/layout.css
@@ -11,7 +11,7 @@
   display: flex;
   flex: 0 0 auto;
   flex-direction: column;
-  padding: 40px 32px 0 32px;
+  padding: 30px 32px 0 32px;
   scrollbar-gutter: stable;
   width: 352px;
   overflow: auto;

From f630b505081d54e103077c35f6918aa042d7689a Mon Sep 17 00:00:00 2001
From: nadijagraca <nadija_ratkusic_graca@external.mckinsey.com>
Date: Thu, 28 Sep 2023 14:42:08 +0200
Subject: [PATCH 03/18] added changelog

---
 ...c_graca_highlight_active_accordion_item.md | 41 +++++++++++++++++++
 vizro-core/src/vizro/static/css/accordion.css |  1 -
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md

diff --git a/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md b/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
new file mode 100644
index 000000000..b598a9e40
--- /dev/null
+++ b/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
@@ -0,0 +1,41 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Removed
+
+- A bullet item for the Removed category.
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category.
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category.
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category.
+
+-->
+
+### Fixed
+
+- Fixed highlighting for active accordion item and arranged a setup to maintain the expanded state of the parent accordion item when page is active. ([#74](https://github.com/mckinsey/vizro/pull/74))
+
+<!--
+### Security
+
+- A bullet item for the Security category.
+
+-->
diff --git a/vizro-core/src/vizro/static/css/accordion.css b/vizro-core/src/vizro/static/css/accordion.css
index 1f0a984bd..3e29fc19e 100644
--- a/vizro-core/src/vizro/static/css/accordion.css
+++ b/vizro-core/src/vizro/static/css/accordion.css
@@ -87,7 +87,6 @@
   background-color: inherit;
   width: 100%;
   border-bottom: 1px solid var(--border-subtle-alpha-01);
-  gap: var(--spacing-01);
 }
 
 .accordion_item:last-child {

From d843b1d8b5e04bd6b63bcc415f4f7729da8424a2 Mon Sep 17 00:00:00 2001
From: nadijagraca <nadija_ratkusic_graca@external.mckinsey.com>
Date: Thu, 28 Sep 2023 14:47:08 +0200
Subject: [PATCH 04/18] minor linting fixes'

---
 vizro-core/src/vizro/static/css/accordion.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vizro-core/src/vizro/static/css/accordion.css b/vizro-core/src/vizro/static/css/accordion.css
index 3e29fc19e..cb7f117c5 100644
--- a/vizro-core/src/vizro/static/css/accordion.css
+++ b/vizro-core/src/vizro/static/css/accordion.css
@@ -102,7 +102,7 @@
 }
 
 div.page_container .accordion-item-button,
-.accordion-item-button-active{
+.accordion-item-button-active {
   background-color: inherit;
   width: 100%;
   display: flex;

From 417ca3c0a481ac38c973c64b06e5fbcab7a32521 Mon Sep 17 00:00:00 2001
From: nadijagraca <nadija_ratkusic_graca@external.mckinsey.com>
Date: Thu, 28 Sep 2023 15:54:26 +0200
Subject: [PATCH 05/18] fixed tests

---
 vizro-core/src/vizro/models/_navigation/_accordion.py     | 1 +
 .../tests/unit/vizro/models/_navigation/conftest.py       | 6 ++++--
 .../tests/unit/vizro/models/_navigation/test_accordion.py | 8 ++++----
 .../unit/vizro/models/_navigation/test_navigation.py      | 4 ++--
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/vizro-core/src/vizro/models/_navigation/_accordion.py b/vizro-core/src/vizro/models/_navigation/_accordion.py
index 758fce943..370124efb 100644
--- a/vizro-core/src/vizro/models/_navigation/_accordion.py
+++ b/vizro-core/src/vizro/models/_navigation/_accordion.py
@@ -77,6 +77,7 @@ def _create_default_accordion(self, page_id):
                     class_name="accordion",
                     persistence=True,
                     persistence_type="session",
+                    always_open=True,
                 ),
                 html.Div(className="keyline"),
             ],
diff --git a/vizro-core/tests/unit/vizro/models/_navigation/conftest.py b/vizro-core/tests/unit/vizro/models/_navigation/conftest.py
index 619eb1fa4..76eb4f267 100644
--- a/vizro-core/tests/unit/vizro/models/_navigation/conftest.py
+++ b/vizro-core/tests/unit/vizro/models/_navigation/conftest.py
@@ -26,7 +26,7 @@ def accordion_from_page_as_list():
     accordion_buttons = [
         dbc.Button(
             children=["Page 1"],
-            className="accordion-item-button",
+            className="accordion-item-button-active",
             key="/",
             href="/",
         ),
@@ -52,6 +52,7 @@ def accordion_from_page_as_list():
                 class_name="accordion",
                 persistence=True,
                 persistence_type="session",
+                always_open=True,
             ),
             html.Div(className="keyline"),
         ],
@@ -65,7 +66,7 @@ def accordion_from_page_as_list():
 def accordion_from_pages_as_dict():
     accordion_items = [
         dbc.AccordionItem(
-            children=[dbc.Button(children=["Page 1"], className="accordion-item-button", key="/", href="/")],
+            children=[dbc.Button(children=["Page 1"], className="accordion-item-button-active", key="/", href="/")],
             title="PAGE 1",
             class_name="accordion_item",
         ),
@@ -85,6 +86,7 @@ def accordion_from_pages_as_dict():
                 class_name="accordion",
                 persistence=True,
                 persistence_type="session",
+                always_open=True,
             ),
             html.Div(className="keyline"),
         ],
diff --git a/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py b/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
index d23506890..7bb682b78 100644
--- a/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
+++ b/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
@@ -43,25 +43,25 @@ class TestAccordionBuild:
 
     @pytest.mark.parametrize("pages", [["Page 1", "Page 2"], None])
     def test_accordion_build_default(self, pages, accordion_from_page_as_list):
-        accordion = Accordion(pages=pages, id="accordion_list").build()
+        accordion = Accordion(pages=pages, id="accordion_list").build(page_id="Page 1")
         result = json.loads(json.dumps(accordion, cls=plotly.utils.PlotlyJSONEncoder))
         expected = json.loads(json.dumps(accordion_from_page_as_list, cls=plotly.utils.PlotlyJSONEncoder))
         assert result == expected
 
     def test_accordion_build_pages_as_list(self, pages_as_list, accordion_from_page_as_list):
-        accordion = Accordion(pages=pages_as_list, id="accordion_list").build()
+        accordion = Accordion(pages=pages_as_list, id="accordion_list").build(page_id="Page 1")
         result = json.loads(json.dumps(accordion, cls=plotly.utils.PlotlyJSONEncoder))
         expected = json.loads(json.dumps(accordion_from_page_as_list, cls=plotly.utils.PlotlyJSONEncoder))
         assert result == expected
 
     def test_accordion_build_pages_as_dict(self, pages_as_dict, accordion_from_pages_as_dict):
-        accordion = Accordion(pages=pages_as_dict, id="accordion_dict").build()
+        accordion = Accordion(pages=pages_as_dict, id="accordion_dict").build(page_id="Page 1")
         result = json.loads(json.dumps(accordion, cls=plotly.utils.PlotlyJSONEncoder))
         expected = json.loads(json.dumps(accordion_from_pages_as_dict, cls=plotly.utils.PlotlyJSONEncoder))
         assert result == expected
 
     def test_accordion_build_single_page_accordion(self):
-        accordion = Accordion(pages=["Page 1"], id="single_accordion").build()
+        accordion = Accordion(pages=["Page 1"], id="single_accordion").build(page_id="Page 1")
         assert accordion is None
 
     def test_navigation_not_all_pages_included(self, dashboard_build):
diff --git a/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py b/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py
index dce83ddbb..b28ab5e93 100644
--- a/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py
+++ b/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py
@@ -56,6 +56,6 @@ def test_navigation_build(self, pages):
         accordion = Accordion(pages=pages)
         navigation._selector.id = accordion.id
 
-        result = json.loads(json.dumps(navigation.build(), cls=plotly.utils.PlotlyJSONEncoder))
-        expected = json.loads(json.dumps(accordion.build(), cls=plotly.utils.PlotlyJSONEncoder))
+        result = json.loads(json.dumps(navigation.build(page_id="Page 1"), cls=plotly.utils.PlotlyJSONEncoder))
+        expected = json.loads(json.dumps(accordion.build(page_id="Page 1"), cls=plotly.utils.PlotlyJSONEncoder))
         assert result == expected

From e6307aa7f72e792eb94232620027d50a64602df5 Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Mon, 2 Oct 2023 13:18:30 +0200
Subject: [PATCH 06/18] Lint

---
 vizro-core/src/vizro/models/_navigation/_accordion.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vizro-core/src/vizro/models/_navigation/_accordion.py b/vizro-core/src/vizro/models/_navigation/_accordion.py
index 1b9568959..6eb945325 100644
--- a/vizro-core/src/vizro/models/_navigation/_accordion.py
+++ b/vizro-core/src/vizro/models/_navigation/_accordion.py
@@ -29,7 +29,7 @@ class Accordion(VizroBaseModel):
     def build(self, page_id):
         return self._create_accordion(page_id=page_id)
 
-    def _create_accordion_buttons(self, pages):
+    def _create_accordion_buttons(self, pages, page_id):
         """Creates a button for each provided page."""
         # TODO: Better if we loop through pages from MM so the Accordion.build does not depend on dashboard build.
         # However, this would require that only pages used in the Dashboard are registered in the MM.

From 9fecf3ca386c011f941d90c0bf5454fdeabe861a Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Mon, 2 Oct 2023 13:23:59 +0200
Subject: [PATCH 07/18] Replace active class with active param

---
 ...ratkusic_graca_highlight_active_accordion_item.md |  2 +-
 .../src/vizro/models/_navigation/_accordion.py       |  3 ++-
 vizro-core/src/vizro/static/css/accordion.css        |  5 ++---
 .../tests/unit/vizro/models/_navigation/conftest.py  | 12 +++++++++---
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md b/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
index b598a9e40..dc417ce13 100644
--- a/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
+++ b/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
@@ -31,7 +31,7 @@ Uncomment the section that is right (remove the HTML comment wrapper).
 
 ### Fixed
 
-- Fixed highlighting for active accordion item and arranged a setup to maintain the expanded state of the parent accordion item when page is active. ([#74](https://github.com/mckinsey/vizro/pull/74))
+- Add highlighting to selected page accordion button and change the collapsible default behavior of accordion ([#74](https://github.com/mckinsey/vizro/pull/74))
 
 <!--
 ### Security
diff --git a/vizro-core/src/vizro/models/_navigation/_accordion.py b/vizro-core/src/vizro/models/_navigation/_accordion.py
index 6eb945325..7be3d03e6 100644
--- a/vizro-core/src/vizro/models/_navigation/_accordion.py
+++ b/vizro-core/src/vizro/models/_navigation/_accordion.py
@@ -38,7 +38,8 @@ def _create_accordion_buttons(self, pages, page_id):
             dbc.Button(
                 children=[page["name"]],
                 key=page["relative_path"],
-                className="accordion-item-button-active" if page_id == page["name"] else "accordion-item-button",
+                className="accordion-item-button",
+                active=True if page_id == page["name"] else False,
                 href=page["relative_path"],
             )
             for page in dash.page_registry.values()
diff --git a/vizro-core/src/vizro/static/css/accordion.css b/vizro-core/src/vizro/static/css/accordion.css
index cb7f117c5..5aa55f306 100644
--- a/vizro-core/src/vizro/static/css/accordion.css
+++ b/vizro-core/src/vizro/static/css/accordion.css
@@ -101,8 +101,7 @@
   gap: var(--spacing-01);
 }
 
-div.page_container .accordion-item-button,
-.accordion-item-button-active {
+div.page_container .accordion-item-button {
   background-color: inherit;
   width: 100%;
   display: flex;
@@ -113,7 +112,7 @@ div.page_container .accordion-item-button,
   line-height: var(--text-size-03);
 }
 
-.accordion-item-button-active {
+.accordion-item-button.btn.btn-primary.active {
   background-color: var(--state-overlays-selected);
   color: var(--text-primary);
 }
diff --git a/vizro-core/tests/unit/vizro/models/_navigation/conftest.py b/vizro-core/tests/unit/vizro/models/_navigation/conftest.py
index a08cdcc72..860d16ed7 100644
--- a/vizro-core/tests/unit/vizro/models/_navigation/conftest.py
+++ b/vizro-core/tests/unit/vizro/models/_navigation/conftest.py
@@ -22,13 +22,15 @@ def accordion_from_page_as_list():
     accordion_buttons = [
         dbc.Button(
             children=["Page 1"],
-            className="accordion-item-button-active",
+            className="accordion-item-button",
+            active=True,
             key="/",
             href="/",
         ),
         dbc.Button(
             children=["Page 2"],
             className="accordion-item-button",
+            active=False,
             key="/page-2",
             href="/page-2",
         ),
@@ -62,13 +64,17 @@ def accordion_from_page_as_list():
 def accordion_from_pages_as_dict():
     accordion_items = [
         dbc.AccordionItem(
-            children=[dbc.Button(children=["Page 1"], className="accordion-item-button-active", key="/", href="/")],
+            children=[
+                dbc.Button(children=["Page 1"], className="accordion-item-button", active=True, key="/", href="/")
+            ],
             title="PAGE 1",
             class_name="accordion_item",
         ),
         dbc.AccordionItem(
             children=[
-                dbc.Button(children=["Page 2"], className="accordion-item-button", key="/page-2", href="/page-2")
+                dbc.Button(
+                    children=["Page 2"], className="accordion-item-button", active=False, key="/page-2", href="/page-2"
+                )
             ],
             title="PAGE 2",
             class_name="accordion_item",

From 4bdca796a569ead44663aeee3bc631ad16ddcbf2 Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Tue, 3 Oct 2023 16:19:42 +0200
Subject: [PATCH 08/18] Refactor code

- Rename to active_page_id
- Compare with page["module"]
- Optimise for loop
---
 .../vizro/models/_navigation/_accordion.py    | 39 +++++++++----------
 .../vizro/models/_navigation/navigation.py    |  4 +-
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/vizro-core/src/vizro/models/_navigation/_accordion.py b/vizro-core/src/vizro/models/_navigation/_accordion.py
index b559a50dd..80466b734 100644
--- a/vizro-core/src/vizro/models/_navigation/_accordion.py
+++ b/vizro-core/src/vizro/models/_navigation/_accordion.py
@@ -26,25 +26,24 @@ class Accordion(VizroBaseModel):
     _validate_pages = validator("pages", allow_reuse=True, always=True)(_validate_pages)
 
     @_log_call
-    def build(self, page_id):
-        return self._create_accordion(page_id=page_id)
+    def build(self, active_page_id):
+        return self._create_accordion(active_page_id=active_page_id)
 
-    def _create_accordion_buttons(self, pages, page_id):
-        """Creates a button for each provided page."""
-        # TODO: Better if we loop through pages from MM so the Accordion.build does not depend on dashboard build.
-        # However, this would require that only pages used in the Dashboard are registered in the MM.
-        # Note: Relative path currently deviates from page.path for first page.
-        return [
-            dbc.Button(
-                children=[page["name"]],
-                key=page["relative_path"],
-                className="accordion-item-button",
-                active=True if page_id == page["name"] else False,
-                href=page["relative_path"],
+    def _create_accordion_buttons(self, pages, active_page_id):
+        """Creates a button for each provided page that is registered."""
+        accordion_buttons = []
+        for page_id in pages:
+            page = dash.page_registry[page_id]
+            accordion_buttons.append(
+                dbc.Button(
+                    children=[page["name"]],
+                    key=page["relative_path"],
+                    className="accordion-item-button",
+                    active=True if active_page_id == page["module"] else False,
+                    href=page["relative_path"],
+                )
             )
-            for page in dash.page_registry.values()
-            if page["module"] in pages
-        ]
+        return accordion_buttons
 
     def _create_accordion_item(self, accordion_buttons, title=ACCORDION_DEFAULT_TITLE):
         """Creates an accordion item for each sub-group of pages."""
@@ -75,17 +74,17 @@ def _get_accordion_container(self, accordion_items, accordion_buttons):
             id=f"{self.id}_outer",
         )
 
-    def _create_accordion(self, page_id):
+    def _create_accordion(self, active_page_id):
         """Creates a custom accordion only with user-provided pages."""
         accordion_items = []
         if isinstance(self.pages, dict):
             for page_group, page_members in self.pages.items():
-                accordion_buttons = self._create_accordion_buttons(pages=page_members, page_id=page_id)
+                accordion_buttons = self._create_accordion_buttons(pages=page_members, active_page_id=active_page_id)
                 accordion_items.append(
                     self._create_accordion_item(accordion_buttons=accordion_buttons, title=page_group)
                 )
 
         if isinstance(self.pages, list):
-            accordion_buttons = self._create_accordion_buttons(pages=self.pages, page_id=page_id)
+            accordion_buttons = self._create_accordion_buttons(pages=self.pages, active_page_id=active_page_id)
             accordion_items.append(self._create_accordion_item(accordion_buttons=accordion_buttons))
         return self._get_accordion_container(accordion_items=accordion_items, accordion_buttons=accordion_buttons)
diff --git a/vizro-core/src/vizro/models/_navigation/navigation.py b/vizro-core/src/vizro/models/_navigation/navigation.py
index 72df5c2e1..685af0878 100644
--- a/vizro-core/src/vizro/models/_navigation/navigation.py
+++ b/vizro-core/src/vizro/models/_navigation/navigation.py
@@ -77,5 +77,5 @@ def _set_selector(self):
         self._selector = Accordion(pages=self.pages)
 
     @_log_call
-    def build(self, page_id):
-        return self._selector.build(page_id=page_id)
+    def build(self, active_page_id):
+        return self._selector.build(active_page_id=active_page_id)

From e320bb884c6d8f1484ce8e8968cf654e6b88467d Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Tue, 3 Oct 2023 16:26:17 +0200
Subject: [PATCH 09/18] Fix tests

---
 vizro-core/src/vizro/models/_page.py                   |  6 +++---
 .../unit/vizro/models/_navigation/test_accordion.py    | 10 +++++-----
 .../unit/vizro/models/_navigation/test_navigation.py   |  6 +++---
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py
index 90c4288a3..fce10cab8 100644
--- a/vizro-core/src/vizro/models/_page.py
+++ b/vizro-core/src/vizro/models/_page.py
@@ -171,9 +171,9 @@ def _create_nav_panel(self):
 
         _, dashboard = next(model_manager._items_with_type(Dashboard))
         if dashboard.navigation:
-            return dashboard.navigation.build(page_id=self.id)
+            return dashboard.navigation.build(active_page_id=self.id)
 
-        return Accordion().build(page_id=self.id)
+        return Accordion().build(active_page_id=self.id)
 
     def _create_component_container(self, components_content):
         component_container = html.Div(
@@ -241,4 +241,4 @@ def _make_page_layout(self, controls_content, components_content):
             id=self.id,
             children=[dcc.Store(id=f"{ON_PAGE_LOAD_ACTION_PREFIX}_trigger_{self.id}"), left_side, right_side],
             className="page_container",
-        )
+        )
\ No newline at end of file
diff --git a/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py b/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
index 75c32e48a..f2a84b30d 100644
--- a/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
+++ b/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
@@ -43,27 +43,27 @@ class TestAccordionBuild:
 
     @pytest.mark.parametrize("pages", [["Page 1", "Page 2"], None])
     def test_accordion_build_default(self, pages, accordion_from_page_as_list):
-        accordion = Accordion(pages=pages, id="accordion_list").build(page_id="Page 1")
+        accordion = Accordion(pages=pages, id="accordion_list").build(active_page_id="Page 1")
         result = json.loads(json.dumps(accordion, cls=plotly.utils.PlotlyJSONEncoder))
         expected = json.loads(json.dumps(accordion_from_page_as_list, cls=plotly.utils.PlotlyJSONEncoder))
         assert result == expected
 
     def test_accordion_build_pages_as_list(self, pages_as_list, accordion_from_page_as_list):
-        accordion = Accordion(pages=pages_as_list, id="accordion_list").build(page_id="Page 1")
+        accordion = Accordion(pages=pages_as_list, id="accordion_list").build(active_page_id="Page 1")
         result = json.loads(json.dumps(accordion, cls=plotly.utils.PlotlyJSONEncoder))
         expected = json.loads(json.dumps(accordion_from_page_as_list, cls=plotly.utils.PlotlyJSONEncoder))
         assert result == expected
 
     def test_accordion_build_pages_as_dict(self, pages_as_dict, accordion_from_pages_as_dict):
-        accordion = Accordion(pages=pages_as_dict, id="accordion_dict").build(page_id="Page 1")
+        accordion = Accordion(pages=pages_as_dict, id="accordion_dict").build(active_page_id="Page 1")
         result = json.loads(json.dumps(accordion, cls=plotly.utils.PlotlyJSONEncoder))
         expected = json.loads(json.dumps(accordion_from_pages_as_dict, cls=plotly.utils.PlotlyJSONEncoder))
         assert result == expected
 
     def test_accordion_build_single_page_accordion(self):
-        accordion = Accordion(pages=["Page 1"], id="single_accordion").build(page_id="Page 1")
+        accordion = Accordion(pages=["Page 1"], id="single_accordion").build(active_page_id="Page 1")
         assert accordion is None
 
     def test_navigation_not_all_pages_included(self):
         with pytest.warns(UserWarning):
-            Accordion(pages=["Page 1"])
+            Accordion(pages=["Page 1"])
\ No newline at end of file
diff --git a/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py b/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py
index e54aae312..7219b0435 100644
--- a/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py
+++ b/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py
@@ -56,6 +56,6 @@ def test_navigation_build(self, pages):
         accordion = Accordion(pages=pages)
         navigation._selector.id = accordion.id
 
-        result = json.loads(json.dumps(navigation.build(page_id="Page 1"), cls=plotly.utils.PlotlyJSONEncoder))
-        expected = json.loads(json.dumps(accordion.build(page_id="Page 1"), cls=plotly.utils.PlotlyJSONEncoder))
-        assert result == expected
+        result = json.loads(json.dumps(navigation.build(active_page_id="Page 1"), cls=plotly.utils.PlotlyJSONEncoder))
+        expected = json.loads(json.dumps(accordion.build(active_page_id="Page 1"), cls=plotly.utils.PlotlyJSONEncoder))
+        assert result == expected
\ No newline at end of file

From ca5e6752a6bfa6ed3777758091421994e2a44e32 Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Tue, 3 Oct 2023 16:27:41 +0200
Subject: [PATCH 10/18] Lint

---
 vizro-core/src/vizro/models/_page.py                            | 2 +-
 .../tests/unit/vizro/models/_navigation/test_accordion.py       | 2 +-
 .../tests/unit/vizro/models/_navigation/test_navigation.py      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py
index fce10cab8..d3c80bf09 100644
--- a/vizro-core/src/vizro/models/_page.py
+++ b/vizro-core/src/vizro/models/_page.py
@@ -241,4 +241,4 @@ def _make_page_layout(self, controls_content, components_content):
             id=self.id,
             children=[dcc.Store(id=f"{ON_PAGE_LOAD_ACTION_PREFIX}_trigger_{self.id}"), left_side, right_side],
             className="page_container",
-        )
\ No newline at end of file
+        )
diff --git a/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py b/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
index f2a84b30d..c9092bf8a 100644
--- a/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
+++ b/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
@@ -66,4 +66,4 @@ def test_accordion_build_single_page_accordion(self):
 
     def test_navigation_not_all_pages_included(self):
         with pytest.warns(UserWarning):
-            Accordion(pages=["Page 1"])
\ No newline at end of file
+            Accordion(pages=["Page 1"])
diff --git a/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py b/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py
index 7219b0435..a03f2b16d 100644
--- a/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py
+++ b/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py
@@ -58,4 +58,4 @@ def test_navigation_build(self, pages):
 
         result = json.loads(json.dumps(navigation.build(active_page_id="Page 1"), cls=plotly.utils.PlotlyJSONEncoder))
         expected = json.loads(json.dumps(accordion.build(active_page_id="Page 1"), cls=plotly.utils.PlotlyJSONEncoder))
-        assert result == expected
\ No newline at end of file
+        assert result == expected

From 5081c8925f0ee88e17e0814420a4f0f4a8bf6549 Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Tue, 3 Oct 2023 21:43:45 +0200
Subject: [PATCH 11/18] Move page registering to Dashboard.pre_build

---
 vizro-core/src/vizro/models/_dashboard.py     |  8 +++-
 vizro-core/tests/unit/vizro/conftest.py       |  4 +-
 .../models/_navigation/test_accordion.py      |  4 +-
 .../models/_navigation/test_navigation.py     |  4 +-
 .../tests/unit/vizro/models/test_dashboard.py | 39 ++++++++++---------
 .../tests/unit/vizro/models/test_page.py      |  2 +-
 6 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py
index 4f88c3b49..c45d88c6e 100644
--- a/vizro-core/src/vizro/models/_dashboard.py
+++ b/vizro-core/src/vizro/models/_dashboard.py
@@ -79,16 +79,20 @@ def __init__(self, *args, **kwargs):
         pio.templates.default = self.theme
 
     @_log_call
-    def build(self):
+    def pre_build(self):
         # Setting order here ensures that the pages in dash.page_registry preserves the order of the List[Page].
         # For now the homepage (path /) corresponds to self.pages[0].
         # Note redirect_from=["/"] doesn't work and so the / route must be defined separately.
         for order, page in enumerate(self.pages):
             path = page.path if order else "/"
             dash.register_page(module=page.id, name=page.title, path=path, order=order, layout=page.build)
+        self._create_error_page_404()
+
+    @_log_call
+    def build(self):
+        for page in self.pages:
             page.build()  # TODO: ideally remove, but necessary to register slider callbacks
         self._update_theme()
-        self._create_error_page_404()
 
         return dbc.Container(
             id="dashboard_container",
diff --git a/vizro-core/tests/unit/vizro/conftest.py b/vizro-core/tests/unit/vizro/conftest.py
index f9a55eae5..c9cacf32e 100644
--- a/vizro-core/tests/unit/vizro/conftest.py
+++ b/vizro-core/tests/unit/vizro/conftest.py
@@ -42,7 +42,7 @@ def dashboard(page1, page2):
 
 
 @pytest.fixture()
-def dashboard_build(dashboard):
-    yield dashboard.build()
+def dashboard_prebuild(dashboard):
+    yield dashboard.pre_build()
     del dash.page_registry["Page 1"]
     del dash.page_registry["Page 2"]
diff --git a/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py b/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
index c9092bf8a..f04744c3f 100644
--- a/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
+++ b/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
@@ -9,7 +9,7 @@
 from vizro.models._navigation._accordion import Accordion
 
 
-@pytest.mark.usefixtures("dashboard_build")
+@pytest.mark.usefixtures("dashboard_prebuild")
 class TestAccordionInstantiation:
     """Tests accordion model instantiation."""
 
@@ -37,7 +37,7 @@ def test_field_invalid_pages_empty_list(self):
             Accordion(pages=[])
 
 
-@pytest.mark.usefixtures("dashboard_build")
+@pytest.mark.usefixtures("dashboard_prebuild")
 class TestAccordionBuild:
     """Tests accordion build method."""
 
diff --git a/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py b/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py
index a03f2b16d..1ed90f7eb 100644
--- a/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py
+++ b/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py
@@ -9,7 +9,7 @@
 from vizro.models._navigation._accordion import Accordion
 
 
-@pytest.mark.usefixtures("dashboard_build")
+@pytest.mark.usefixtures("dashboard_prebuild")
 class TestNavigationInstantiation:
     """Tests navigation model instantiation."""
 
@@ -45,7 +45,7 @@ def test_field_invalid_pages_input(self, pages, expected_error):
             vm.Navigation(pages=pages)
 
 
-@pytest.mark.usefixtures("dashboard_build")
+@pytest.mark.usefixtures("dashboard_prebuild")
 class TestNavigationBuild:
     """Tests navigation build method."""
 
diff --git a/vizro-core/tests/unit/vizro/models/test_dashboard.py b/vizro-core/tests/unit/vizro/models/test_dashboard.py
index 5d46680a5..73a307403 100644
--- a/vizro-core/tests/unit/vizro/models/test_dashboard.py
+++ b/vizro-core/tests/unit/vizro/models/test_dashboard.py
@@ -130,32 +130,35 @@ def test_field_invalid_theme_input_type(self, page1):
             vm.Dashboard(pages=[page1], theme="not_existing")
 
 
-class TestDashboardBuild:
-    """Tests dashboard build method."""
-
-    def test_dashboard_build(self, dashboard_container, dashboard_build):
-        result = json.loads(json.dumps(dashboard_build, cls=plotly.utils.PlotlyJSONEncoder))
-        expected = json.loads(json.dumps(dashboard_container, cls=plotly.utils.PlotlyJSONEncoder))
-        assert result == expected
+class TestDashboardPreBuild:
+    """Tests dashboard pre_build method."""
 
-    def test_dashboard_page_registry(self, mock_page_registry, dashboard_build):
+    def test_dashboard_page_registry(self, mock_page_registry, dashboard_prebuild):
         result = dash.page_registry
         expected = mock_page_registry
         # Str conversion required as comparison of OrderedDict values result in False otherwise
         assert str(result.items()) == str(expected.items())
 
+    def test_create_layout_page_404(self):
+        result = create_layout_page_404()
+        result_image = result.children[0]
+        result_div = result.children[1]
+
+        assert isinstance(result, html.Div)
+        assert isinstance(result_image, html.Img)
+        assert isinstance(result_div, html.Div)
+
+
+class TestDashboardBuild:
+    """Tests dashboard build method."""
+
+    def test_dashboard_build(self, dashboard_container, dashboard):
+        result = json.loads(json.dumps(dashboard.build(), cls=plotly.utils.PlotlyJSONEncoder))
+        expected = json.loads(json.dumps(dashboard_container, cls=plotly.utils.PlotlyJSONEncoder))
+        assert result == expected
+
 
 @pytest.mark.parametrize("on, expected", [(True, "vizro_dark"), (False, "vizro_light")])
 def test_update_theme(on, expected):
     result = update_theme(on)
     assert result == expected
-
-
-def test_create_layout_page_404():
-    result = create_layout_page_404()
-    result_image = result.children[0]
-    result_div = result.children[1]
-
-    assert isinstance(result, html.Div)
-    assert isinstance(result_image, html.Img)
-    assert isinstance(result_div, html.Div)
diff --git a/vizro-core/tests/unit/vizro/models/test_page.py b/vizro-core/tests/unit/vizro/models/test_page.py
index 6505eff57..bf67e356f 100644
--- a/vizro-core/tests/unit/vizro/models/test_page.py
+++ b/vizro-core/tests/unit/vizro/models/test_page.py
@@ -101,6 +101,6 @@ def test_action_auto_generation_valid(self, standard_px_chart):
 # TODO: Add unit tests for private methods in page build
 def test_page_build_left_side_removed(standard_px_chart):
     page = vm.Page(title="Single Page", components=[vm.Graph(id="scatter_chart", figure=standard_px_chart)])
-    vm.Dashboard(pages=[page]).build()
+    vm.Dashboard(pages=[page]).pre_build()
     assert ("className='left_side'" not in str(page.build())) is True
     del dash.page_registry["Single Page"]

From 6401a26af086a8ffb2c0b36e2ade7a012c583d0d Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Tue, 3 Oct 2023 21:48:14 +0200
Subject: [PATCH 12/18] Update changelog

---
 ...adija_ratkusic_graca_highlight_active_accordion_item.md | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md b/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
index dc417ce13..2ecdf1a54 100644
--- a/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
+++ b/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
@@ -16,12 +16,11 @@ Uncomment the section that is right (remove the HTML comment wrapper).
 - A bullet item for the Added category.
 
 -->
-<!--
+
 ### Changed
 
-- A bullet item for the Changed category.
+- Move creation of `dash.page_registry` to `Dashboard.pre-build` ([#74](https://github.com/mckinsey/vizro/pull/74))
 
--->
 <!--
 ### Deprecated
 
@@ -31,7 +30,7 @@ Uncomment the section that is right (remove the HTML comment wrapper).
 
 ### Fixed
 
-- Add highlighting to selected page accordion button and change the collapsible default behavior of accordion ([#74](https://github.com/mckinsey/vizro/pull/74))
+- Add highlighting to accordion button of active page and change the collapsible default behavior of accordion ([#74](https://github.com/mckinsey/vizro/pull/74))
 
 <!--
 ### Security

From a9dc868b9a90dcc92dbfe65421fb88382303e68a Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Tue, 3 Oct 2023 23:38:35 +0200
Subject: [PATCH 13/18] Remove Accordion.build from page.build

---
 vizro-core/src/vizro/models/_dashboard.py     | 14 +++--
 .../vizro/models/_navigation/navigation.py    | 54 +++++++++----------
 vizro-core/src/vizro/models/_page.py          |  9 ++--
 .../tests/unit/vizro/models/test_dashboard.py |  1 +
 4 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py
index c45d88c6e..c7c709d33 100644
--- a/vizro-core/src/vizro/models/_dashboard.py
+++ b/vizro-core/src/vizro/models/_dashboard.py
@@ -12,11 +12,11 @@
 import vizro
 from vizro._constants import MODULE_PAGE_404, STATIC_URL_PREFIX
 from vizro.actions._action_loop._action_loop import ActionLoop
-from vizro.models import VizroBaseModel
+from vizro.models import Navigation, VizroBaseModel
 from vizro.models._models_utils import _log_call
 
 if TYPE_CHECKING:
-    from vizro.models import Navigation, Page
+    from vizro.models import Page
 
 logger = logging.getLogger(__name__)
 
@@ -66,11 +66,19 @@ class Dashboard(VizroBaseModel):
     title: Optional[str] = Field(None, description="Dashboard title to appear on every page on top left-side.")
 
     @validator("pages", always=True)
-    def validate_pages_empty_list(cls, pages):
+    def validate_pages(cls, pages):
         if not pages:
             raise ValueError("Ensure this value has at least 1 item.")
         return pages
 
+    @validator("navigation", always=True)
+    def validate_navigation(cls, navigation, values):
+        if "pages" not in values:
+            return navigation
+        if navigation is None:
+            return Navigation(pages=[page.id for page in values["pages"]])
+        return navigation
+
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         # pio is the backend global state and shouldn't be changed while
diff --git a/vizro-core/src/vizro/models/_navigation/navigation.py b/vizro-core/src/vizro/models/_navigation/navigation.py
index 685af0878..0e4b2a6df 100644
--- a/vizro-core/src/vizro/models/_navigation/navigation.py
+++ b/vizro-core/src/vizro/models/_navigation/navigation.py
@@ -3,10 +3,8 @@
 import warnings
 from typing import TYPE_CHECKING, Optional
 
-import dash
 from pydantic import PrivateAttr, validator
 
-from vizro._constants import MODULE_PAGE_404
 from vizro.managers import model_manager
 from vizro.models import VizroBaseModel
 from vizro.models._models_utils import _log_call
@@ -20,36 +18,34 @@
 def _validate_pages(pages):
     from vizro.models import Page
 
-    if pages is not None and not pages:
-        raise ValueError("Ensure this value has at least 1 item.")
-
-    if pages:
-        registered_pages = [page[0] for page in model_manager._items_with_type(Page)]
-
-        if isinstance(pages, dict):
-            missing_pages = [
-                page
-                for page in registered_pages
-                if page not in {page for nav_pages in pages.values() for page in nav_pages}
-            ]
-            unknown_pages = [page for nav_pages in pages.values() for page in nav_pages if page not in registered_pages]
-        else:
-            missing_pages = [page for page in registered_pages if page not in pages]
-            unknown_pages = [page for page in pages if page not in registered_pages]
-
-        if missing_pages:
-            warnings.warn(
-                f"Not all registered pages used in Navigation 'pages'. Missing pages {missing_pages}!", UserWarning
-            )
-
-        if unknown_pages:
-            raise ValueError(
-                f"Unknown page ID or page title provided to Navigation 'pages'. " f"Unknown pages: {unknown_pages}"
-            )
+    registered_pages = [page[0] for page in model_manager._items_with_type(Page)]
 
     if pages is None:
-        return [page for page in dash.page_registry.keys() if page != MODULE_PAGE_404]
+        return registered_pages
+
+    if not pages:
+        raise ValueError("Ensure this value has at least 1 item.")
 
+    if isinstance(pages, dict):
+        missing_pages = [
+            page
+            for page in registered_pages
+            if page not in {page for nav_pages in pages.values() for page in nav_pages}
+        ]
+        unknown_pages = [page for nav_pages in pages.values() for page in nav_pages if page not in registered_pages]
+    else:
+        missing_pages = [page for page in registered_pages if page not in pages]
+        unknown_pages = [page for page in pages if page not in registered_pages]
+
+    if missing_pages:
+        warnings.warn(
+            f"Not all registered pages used in Navigation 'pages'. Missing pages {missing_pages}!", UserWarning
+        )
+
+    if unknown_pages:
+        raise ValueError(
+            f"Unknown page ID or page title provided to Navigation 'pages'. " f"Unknown pages: {unknown_pages}"
+        )
     return pages
 
 
diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py
index d3c80bf09..dad7b4914 100644
--- a/vizro-core/src/vizro/models/_page.py
+++ b/vizro-core/src/vizro/models/_page.py
@@ -167,13 +167,10 @@ def _create_control_panel(controls_content):
         return control_panel if controls_content else None
 
     def _create_nav_panel(self):
-        from vizro.models._navigation._accordion import Accordion
-
         _, dashboard = next(model_manager._items_with_type(Dashboard))
-        if dashboard.navigation:
-            return dashboard.navigation.build(active_page_id=self.id)
-
-        return Accordion().build(active_page_id=self.id)
+        # TODO: Optimally remove pre_build() call but currently required due to page.build() in dashboard.build()
+        dashboard.navigation.pre_build()  # type: ignore[union-attr]
+        return dashboard.navigation.build(active_page_id=self.id)  # type: ignore[union-attr]
 
     def _create_component_container(self, components_content):
         component_container = html.Div(
diff --git a/vizro-core/tests/unit/vizro/models/test_dashboard.py b/vizro-core/tests/unit/vizro/models/test_dashboard.py
index 73a307403..ce388934b 100644
--- a/vizro-core/tests/unit/vizro/models/test_dashboard.py
+++ b/vizro-core/tests/unit/vizro/models/test_dashboard.py
@@ -153,6 +153,7 @@ class TestDashboardBuild:
     """Tests dashboard build method."""
 
     def test_dashboard_build(self, dashboard_container, dashboard):
+        dashboard.pre_build()
         result = json.loads(json.dumps(dashboard.build(), cls=plotly.utils.PlotlyJSONEncoder))
         expected = json.loads(json.dumps(dashboard_container, cls=plotly.utils.PlotlyJSONEncoder))
         assert result == expected

From e3851c32a865e96fd6c760f0423e2a6ff6aee3f0 Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Tue, 3 Oct 2023 23:48:52 +0200
Subject: [PATCH 14/18] Remove navigation.pre_build from page and fix tests

---
 vizro-core/src/vizro/models/_page.py                 | 2 --
 vizro-core/tests/unit/vizro/models/test_dashboard.py | 1 +
 vizro-core/tests/unit/vizro/models/test_page.py      | 4 +++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py
index dad7b4914..77f4de2d7 100644
--- a/vizro-core/src/vizro/models/_page.py
+++ b/vizro-core/src/vizro/models/_page.py
@@ -168,8 +168,6 @@ def _create_control_panel(controls_content):
 
     def _create_nav_panel(self):
         _, dashboard = next(model_manager._items_with_type(Dashboard))
-        # TODO: Optimally remove pre_build() call but currently required due to page.build() in dashboard.build()
-        dashboard.navigation.pre_build()  # type: ignore[union-attr]
         return dashboard.navigation.build(active_page_id=self.id)  # type: ignore[union-attr]
 
     def _create_component_container(self, components_content):
diff --git a/vizro-core/tests/unit/vizro/models/test_dashboard.py b/vizro-core/tests/unit/vizro/models/test_dashboard.py
index ce388934b..54afe04c6 100644
--- a/vizro-core/tests/unit/vizro/models/test_dashboard.py
+++ b/vizro-core/tests/unit/vizro/models/test_dashboard.py
@@ -154,6 +154,7 @@ class TestDashboardBuild:
 
     def test_dashboard_build(self, dashboard_container, dashboard):
         dashboard.pre_build()
+        dashboard.navigation.pre_build()
         result = json.loads(json.dumps(dashboard.build(), cls=plotly.utils.PlotlyJSONEncoder))
         expected = json.loads(json.dumps(dashboard_container, cls=plotly.utils.PlotlyJSONEncoder))
         assert result == expected
diff --git a/vizro-core/tests/unit/vizro/models/test_page.py b/vizro-core/tests/unit/vizro/models/test_page.py
index bf67e356f..7441a98e7 100644
--- a/vizro-core/tests/unit/vizro/models/test_page.py
+++ b/vizro-core/tests/unit/vizro/models/test_page.py
@@ -101,6 +101,8 @@ def test_action_auto_generation_valid(self, standard_px_chart):
 # TODO: Add unit tests for private methods in page build
 def test_page_build_left_side_removed(standard_px_chart):
     page = vm.Page(title="Single Page", components=[vm.Graph(id="scatter_chart", figure=standard_px_chart)])
-    vm.Dashboard(pages=[page]).pre_build()
+    dashboard = vm.Dashboard(pages=[page])
+    dashboard.pre_build()
+    dashboard.navigation.pre_build()
     assert ("className='left_side'" not in str(page.build())) is True
     del dash.page_registry["Single Page"]

From 203975f521731a9806a6988c7fafe352a63c8c63 Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Wed, 4 Oct 2023 10:27:16 +0200
Subject: [PATCH 15/18] Update changelog

---
 ..._ratkusic_graca_highlight_active_accordion_item.md | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md b/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
index 2ecdf1a54..644bd4e7b 100644
--- a/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
+++ b/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
@@ -10,16 +10,15 @@ Uncomment the section that is right (remove the HTML comment wrapper).
 - A bullet item for the Removed category.
 
 -->
-<!--
-### Added
 
-- A bullet item for the Added category.
+### Added
 
--->
+- Add validator for `dashboard.navigation` to default to `Navigation()` if not provided ([#74](https://github.com/mckinsey/vizro/pull/74))
 
 ### Changed
 
-- Move creation of `dash.page_registry` to `Dashboard.pre-build` ([#74](https://github.com/mckinsey/vizro/pull/74))
+- Move creation of `dash.page_registry` to `Dashboard.pre_build` ([#74](https://github.com/mckinsey/vizro/pull/74))
+- Change the collapsible default behavior and highlighting color of the selected accordion group ([#74](https://github.com/mckinsey/vizro/pull/74))
 
 <!--
 ### Deprecated
@@ -30,7 +29,7 @@ Uncomment the section that is right (remove the HTML comment wrapper).
 
 ### Fixed
 
-- Add highlighting to accordion button of active page and change the collapsible default behavior of accordion ([#74](https://github.com/mckinsey/vizro/pull/74))
+- Add highlighting to accordion button of active page ([#74](https://github.com/mckinsey/vizro/pull/74))
 
 <!--
 ### Security

From 2fa3429701796e6e524c313cfba8b96ec1f12b07 Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Wed, 4 Oct 2023 16:17:09 +0200
Subject: [PATCH 16/18] PR comments

---
 ...nadija_ratkusic_graca_highlight_active_accordion_item.md | 4 ++--
 vizro-core/src/vizro/models/_navigation/_accordion.py       | 4 ++--
 vizro-core/src/vizro/models/_navigation/navigation.py       | 2 +-
 vizro-core/src/vizro/models/_page.py                        | 6 +++---
 .../tests/unit/vizro/models/_navigation/test_accordion.py   | 4 ++--
 .../tests/unit/vizro/models/_navigation/test_navigation.py  | 4 ++--
 vizro-core/tests/unit/vizro/models/test_page.py             | 2 +-
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md b/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
index 644bd4e7b..bd0ac5577 100644
--- a/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
+++ b/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
@@ -13,12 +13,12 @@ Uncomment the section that is right (remove the HTML comment wrapper).
 
 ### Added
 
-- Add validator for `dashboard.navigation` to default to `Navigation()` if not provided ([#74](https://github.com/mckinsey/vizro/pull/74))
+- Add validator for `Dashboard.navigation` to default to `Navigation()` if not provided ([#74](https://github.com/mckinsey/vizro/pull/74))
 
 ### Changed
 
 - Move creation of `dash.page_registry` to `Dashboard.pre_build` ([#74](https://github.com/mckinsey/vizro/pull/74))
-- Change the collapsible default behavior and highlighting color of the selected accordion group ([#74](https://github.com/mckinsey/vizro/pull/74))
+- Change the default collapsible behavior and highlighting color of the selected accordion group ([#74](https://github.com/mckinsey/vizro/pull/74))
 
 <!--
 ### Deprecated
diff --git a/vizro-core/src/vizro/models/_navigation/_accordion.py b/vizro-core/src/vizro/models/_navigation/_accordion.py
index 80466b734..45d236010 100644
--- a/vizro-core/src/vizro/models/_navigation/_accordion.py
+++ b/vizro-core/src/vizro/models/_navigation/_accordion.py
@@ -26,7 +26,7 @@ class Accordion(VizroBaseModel):
     _validate_pages = validator("pages", allow_reuse=True, always=True)(_validate_pages)
 
     @_log_call
-    def build(self, active_page_id):
+    def build(self, *, active_page_id=None):
         return self._create_accordion(active_page_id=active_page_id)
 
     def _create_accordion_buttons(self, pages, active_page_id):
@@ -39,7 +39,7 @@ def _create_accordion_buttons(self, pages, active_page_id):
                     children=[page["name"]],
                     key=page["relative_path"],
                     className="accordion-item-button",
-                    active=True if active_page_id == page["module"] else False,
+                    active=page_id == active_page_id,
                     href=page["relative_path"],
                 )
             )
diff --git a/vizro-core/src/vizro/models/_navigation/navigation.py b/vizro-core/src/vizro/models/_navigation/navigation.py
index 0e4b2a6df..26fb9cffd 100644
--- a/vizro-core/src/vizro/models/_navigation/navigation.py
+++ b/vizro-core/src/vizro/models/_navigation/navigation.py
@@ -73,5 +73,5 @@ def _set_selector(self):
         self._selector = Accordion(pages=self.pages)
 
     @_log_call
-    def build(self, active_page_id):
+    def build(self, *, active_page_id=None):
         return self._selector.build(active_page_id=active_page_id)
diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py
index 77f4de2d7..93e8a08fc 100644
--- a/vizro-core/src/vizro/models/_page.py
+++ b/vizro-core/src/vizro/models/_page.py
@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from typing import List, Optional
+from typing import List, Optional, cast
 
 import dash_bootstrap_components as dbc
 import dash_daq as daq
@@ -12,7 +12,7 @@
 from vizro.actions import _on_page_load
 from vizro.managers import model_manager
 from vizro.managers._model_manager import DuplicateIDError
-from vizro.models import Action, Dashboard, Graph, Layout, VizroBaseModel
+from vizro.models import Action, Dashboard, Graph, Layout, Navigation, VizroBaseModel
 from vizro.models._action._actions_chain import ActionsChain, Trigger
 from vizro.models._models_utils import _log_call, get_unique_grid_component_ids
 
@@ -168,7 +168,7 @@ def _create_control_panel(controls_content):
 
     def _create_nav_panel(self):
         _, dashboard = next(model_manager._items_with_type(Dashboard))
-        return dashboard.navigation.build(active_page_id=self.id)  # type: ignore[union-attr]
+        return cast(Navigation, dashboard.navigation).build(active_page_id=self.id)
 
     def _create_component_container(self, components_content):
         component_container = html.Div(
diff --git a/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py b/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
index f04744c3f..0abf478fc 100644
--- a/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
+++ b/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
@@ -61,9 +61,9 @@ def test_accordion_build_pages_as_dict(self, pages_as_dict, accordion_from_pages
         assert result == expected
 
     def test_accordion_build_single_page_accordion(self):
-        accordion = Accordion(pages=["Page 1"], id="single_accordion").build(active_page_id="Page 1")
+        accordion = Accordion(pages=["Page 1"], id="single_accordion").build()
         assert accordion is None
 
     def test_navigation_not_all_pages_included(self):
         with pytest.warns(UserWarning):
-            Accordion(pages=["Page 1"])
+            Accordion(pages=["Page 1"])
\ No newline at end of file
diff --git a/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py b/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py
index 1ed90f7eb..2f3590224 100644
--- a/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py
+++ b/vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py
@@ -56,6 +56,6 @@ def test_navigation_build(self, pages):
         accordion = Accordion(pages=pages)
         navigation._selector.id = accordion.id
 
-        result = json.loads(json.dumps(navigation.build(active_page_id="Page 1"), cls=plotly.utils.PlotlyJSONEncoder))
-        expected = json.loads(json.dumps(accordion.build(active_page_id="Page 1"), cls=plotly.utils.PlotlyJSONEncoder))
+        result = json.loads(json.dumps(navigation.build(), cls=plotly.utils.PlotlyJSONEncoder))
+        expected = json.loads(json.dumps(accordion.build(), cls=plotly.utils.PlotlyJSONEncoder))
         assert result == expected
diff --git a/vizro-core/tests/unit/vizro/models/test_page.py b/vizro-core/tests/unit/vizro/models/test_page.py
index 7441a98e7..0eadd58dd 100644
--- a/vizro-core/tests/unit/vizro/models/test_page.py
+++ b/vizro-core/tests/unit/vizro/models/test_page.py
@@ -104,5 +104,5 @@ def test_page_build_left_side_removed(standard_px_chart):
     dashboard = vm.Dashboard(pages=[page])
     dashboard.pre_build()
     dashboard.navigation.pre_build()
-    assert ("className='left_side'" not in str(page.build())) is True
+    assert "className='left_side'" not in str(page.build())
     del dash.page_registry["Single Page"]

From a316e42bdae77465b45b518550370b39a628b21c Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Wed, 4 Oct 2023 16:38:02 +0200
Subject: [PATCH 17/18] Fix access to dash.page_registry

---
 vizro-core/src/vizro/models/_navigation/_accordion.py        | 5 ++++-
 .../tests/unit/vizro/models/_navigation/test_accordion.py    | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/vizro-core/src/vizro/models/_navigation/_accordion.py b/vizro-core/src/vizro/models/_navigation/_accordion.py
index 45d236010..ea3876a6d 100644
--- a/vizro-core/src/vizro/models/_navigation/_accordion.py
+++ b/vizro-core/src/vizro/models/_navigation/_accordion.py
@@ -33,7 +33,10 @@ def _create_accordion_buttons(self, pages, active_page_id):
         """Creates a button for each provided page that is registered."""
         accordion_buttons = []
         for page_id in pages:
-            page = dash.page_registry[page_id]
+            try:
+                page = dash.page_registry[page_id]
+            except KeyError:
+                raise KeyError(f"Page with ID {page_id} cannot be found. Please add the page to `Dashboard.pages`")
             accordion_buttons.append(
                 dbc.Button(
                     children=[page["name"]],
diff --git a/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py b/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
index 0abf478fc..b60575485 100644
--- a/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
+++ b/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
@@ -66,4 +66,4 @@ def test_accordion_build_single_page_accordion(self):
 
     def test_navigation_not_all_pages_included(self):
         with pytest.warns(UserWarning):
-            Accordion(pages=["Page 1"])
\ No newline at end of file
+            Accordion(pages=["Page 1"])

From bb8d9f0776b20f23e47806a4df8a3defa7452ea4 Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Thu, 5 Oct 2023 00:02:25 +0200
Subject: [PATCH 18/18] Update KeyError

---
 vizro-core/src/vizro/models/_navigation/_accordion.py | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/vizro-core/src/vizro/models/_navigation/_accordion.py b/vizro-core/src/vizro/models/_navigation/_accordion.py
index ea3876a6d..b2d0c7418 100644
--- a/vizro-core/src/vizro/models/_navigation/_accordion.py
+++ b/vizro-core/src/vizro/models/_navigation/_accordion.py
@@ -35,8 +35,10 @@ def _create_accordion_buttons(self, pages, active_page_id):
         for page_id in pages:
             try:
                 page = dash.page_registry[page_id]
-            except KeyError:
-                raise KeyError(f"Page with ID {page_id} cannot be found. Please add the page to `Dashboard.pages`")
+            except KeyError as exc:
+                raise KeyError(
+                    f"Page with ID {page_id} cannot be found. Please add the page to `Dashboard.pages`"
+                ) from exc
             accordion_buttons.append(
                 dbc.Button(
                     children=[page["name"]],