Implement per-section sidebars matching Figma wireframe (#109)

Each section (How to Use, About, Architecture, Research) now shows
only its own sidebar items instead of a single combined sidebar.
Updates navigation tests to verify section isolation.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: rdhyee

_quarto.yml

@@ -58,15 +58,11 @@ website:
       - icon: slack
         href: https://isamples.slack.com/
   sidebar:
-    style: "docked"
-    search: true
-    contents:
-      - href: index.qmd
-        text: Home
-      - href: tutorials/progressive_globe.qmd
-        text: Interactive Explorer
-      - section: "How to Use"
-        contents:
+    - id: how-to-use
+      title: "How to Use"
+      style: "docked"
+      search: true
+      contents:
         - href: how-to-use.qmd
           text: Overview
         - text: "Deep-Dive Analysis"
@@ -77,8 +73,11 @@ website:
           href: tutorials/isamples_explorer.qmd
         - text: "Technical: Narrow vs Wide"
           href: tutorials/narrow_vs_wide_performance.qmd
-      - section: "About"
-        contents:
+    - id: about
+      title: "About"
+      style: "docked"
+      search: true
+      contents:
         - href: about.qmd
           text: Objectives
         - text: "PIs and Contributors"
@@ -87,18 +86,24 @@ website:
           href: "about.qmd#photo-gallery"
         - text: "Background & History"
           href: "about.qmd#background-history"
-      - section: "Architecture & Vocabularies"
-        contents:
-          - href: design/index.qmd
-            text: Overview
-          - href: design/requirements.md
-            text: Requirements
-          - text: Schema
-            href: "https://isamplesorg.github.io/metadata/"
-          - href: models/index.qmd
-            text: Vocabularies
-      - section: "Research & Resources"
-        contents:
+    - id: architecture
+      title: "Architecture & Vocabularies"
+      style: "docked"
+      search: true
+      contents:
+        - href: design/index.qmd
+          text: Overview
+        - href: design/requirements.md
+          text: Requirements
+        - text: Schema
+          href: "https://isamplesorg.github.io/metadata/"
+        - href: models/index.qmd
+          text: Vocabularies
+    - id: research
+      title: "Research & Resources"
+      style: "docked"
+      search: true
+      contents:
         - text: Publications & Conferences
           href: pubs.qmd
         - text: Zenodo Community

tests/test_navigation.py

@@ -8,37 +8,45 @@
 from conftest import SITE_URL
 
 
-class TestSidebarSections:
-    """Sidebar should show the wireframe's section names."""
+class TestPerSectionSidebars:
+    """Each section should show ONLY its own sidebar items (per-section sidebars)."""
 
-    def test_sidebar_shows_architecture_and_vocabularies(self, page):
-        page.goto(f"{SITE_URL}/about.html", wait_until="domcontentloaded")
+    def test_how_to_use_sidebar_only_shows_own_items(self, page):
+        page.goto(f"{SITE_URL}/how-to-use.html", wait_until="domcontentloaded")
         sidebar = page.locator(".sidebar-navigation")
-        assert sidebar.get_by_text("Architecture & Vocabularies").count() > 0
+        assert sidebar.get_by_text("Overview", exact=True).count() > 0
+        # Should NOT show items from other sections
+        assert sidebar.get_by_text("Objectives", exact=True).count() == 0
+        assert sidebar.get_by_text("Vocabularies", exact=True).count() == 0
 
-    def test_sidebar_does_not_show_old_information_architecture(self, page):
+    def test_about_sidebar_only_shows_own_items(self, page):
         page.goto(f"{SITE_URL}/about.html", wait_until="domcontentloaded")
         sidebar = page.locator(".sidebar-navigation")
-        assert sidebar.get_by_text("Information Architecture").count() == 0
+        assert sidebar.get_by_text("Objectives", exact=True).count() > 0
+        # Should NOT show items from other sections
+        assert sidebar.get_by_text("Deep-Dive Analysis").count() == 0
+        assert sidebar.get_by_text("Vocabularies", exact=True).count() == 0
 
-    def test_sidebar_shows_research_and_resources(self, page):
-        page.goto(f"{SITE_URL}/about.html", wait_until="domcontentloaded")
+    def test_architecture_sidebar_only_shows_own_items(self, page):
+        page.goto(f"{SITE_URL}/design/index.html", wait_until="domcontentloaded")
         sidebar = page.locator(".sidebar-navigation")
-        assert sidebar.get_by_text("Research & Resources").count() > 0
+        assert sidebar.get_by_text("Vocabularies", exact=True).count() > 0
+        # Should NOT show items from other sections
+        assert sidebar.get_by_text("Objectives", exact=True).count() == 0
+        assert sidebar.get_by_text("Deep-Dive Analysis").count() == 0
 
-    def test_sidebar_does_not_show_separate_published_research(self, page):
-        page.goto(f"{SITE_URL}/about.html", wait_until="domcontentloaded")
+    def test_research_sidebar_only_shows_own_items(self, page):
+        page.goto(f"{SITE_URL}/pubs.html", wait_until="domcontentloaded")
         sidebar = page.locator(".sidebar-navigation")
-        assert sidebar.get_by_text("Published Research", exact=True).count() == 0
+        assert sidebar.get_by_text("Publications & Conferences").count() > 0
+        # Should NOT show items from other sections
+        assert sidebar.get_by_text("Objectives", exact=True).count() == 0
+        assert sidebar.get_by_text("Deep-Dive Analysis").count() == 0
 
-    def test_sidebar_does_not_show_separate_resources(self, page):
-        page.goto(f"{SITE_URL}/about.html", wait_until="domcontentloaded")
+    def test_sidebar_does_not_show_old_information_architecture(self, page):
+        page.goto(f"{SITE_URL}/design/index.html", wait_until="domcontentloaded")
         sidebar = page.locator(".sidebar-navigation")
-        # "Resources" alone shouldn't appear as a section header
-        # (it's OK inside "Research & Resources")
-        sections = sidebar.locator(".sidebar-section .sidebar-section-header")
-        texts = [s.text_content().strip() for s in sections.all()]
-        assert "Resources" not in texts
+        assert sidebar.get_by_text("Information Architecture").count() == 0
 
 
 class TestSidebarHowToUse:
@@ -122,17 +130,17 @@ class TestSidebarResearchResources:
     """Research & Resources should have 3 items matching wireframe."""
 
     def test_has_publications_and_conferences(self, page):
-        page.goto(f"{SITE_URL}/about.html", wait_until="domcontentloaded")
+        page.goto(f"{SITE_URL}/pubs.html", wait_until="domcontentloaded")
         sidebar = page.locator(".sidebar-navigation")
         assert sidebar.get_by_text("Publications & Conferences").count() > 0
 
     def test_has_zenodo_community(self, page):
-        page.goto(f"{SITE_URL}/about.html", wait_until="domcontentloaded")
+        page.goto(f"{SITE_URL}/pubs.html", wait_until="domcontentloaded")
         sidebar = page.locator(".sidebar-navigation")
         assert sidebar.get_by_text("Zenodo Community").count() > 0
 
     def test_has_github_repositories(self, page):
-        page.goto(f"{SITE_URL}/about.html", wait_until="domcontentloaded")
+        page.goto(f"{SITE_URL}/pubs.html", wait_until="domcontentloaded")
         sidebar = page.locator(".sidebar-navigation")
         assert sidebar.get_by_text("Github Repositories").count() > 0