From 62b4f87bcfabc7a39f70731cde92d4aa95b576ae Mon Sep 17 00:00:00 2001
From: Lucas Cumsille M <hello@lucascm.dev>
Date: Wed, 3 Jun 2026 05:15:49 +0000
Subject: [PATCH 1/9] Make `person-navigation` a reusable component

- Moved styles from the `_mp.scss` page to `_in-page-nav.scss`
- Fix wrong hierarchy markup in where the main title of the navigation was an `h3` element and then children were `h2`.
---
 www/docs/style/sass/app.scss                  |   2 +-
 www/docs/style/sass/pages/_mp.scss            | 164 ---------------
 www/docs/style/sass/parts/_in-page-nav.scss   | 189 ++++++++++++++++++
 .../style/sass/parts/_table-of-contents.scss  |  33 ---
 .../templates/html/mp/_person_navigation.php  |  44 ++--
 5 files changed, 212 insertions(+), 220 deletions(-)
 create mode 100644 www/docs/style/sass/parts/_in-page-nav.scss
 delete mode 100644 www/docs/style/sass/parts/_table-of-contents.scss

diff --git a/www/docs/style/sass/app.scss b/www/docs/style/sass/app.scss
index 6a49949153..b567059ec3 100644
--- a/www/docs/style/sass/app.scss
+++ b/www/docs/style/sass/app.scss
@@ -309,7 +309,7 @@ form {
 @import "parts/sidebar_right";
 @import "parts/dataframe";
 @import "parts/accordion";
-@import "parts/table-of-contents";
+@import "parts/in-page-nav";
 @import "parts/glossary";
 
 @import "print";
diff --git a/www/docs/style/sass/pages/_mp.scss b/www/docs/style/sass/pages/_mp.scss
index 43a0382d46..cdf0e06cae 100644
--- a/www/docs/style/sass/pages/_mp.scss
+++ b/www/docs/style/sass/pages/_mp.scss
@@ -279,87 +279,6 @@
     }
 }
 
-.person-navigation {
-    max-height: 75dvh;
-    overflow-y: auto;
-
-    &--subpage-heading {
-        text-underline-offset: 0.25rem;
-        h2 {
-            font-size: 0.9rem;
-            margin-bottom: 0;
-        }
-    }
-
-    h3 {
-        font-size: 0.8rem;
-        padding: 0.5em 2em 0.5em 1em;
-        color: $primary-color;
-        margin-top: 0.25rem;
-        font-weight: bold;
-    }
-
-    ul {
-        font-size: em-calc(18);
-        margin-left: 0px;
-
-        li {
-            top: 1px;
-            position: relative;
-            line-height: 48px;
-            margin-left: 0px;
-            width: 100%;
-            a {
-                color: #6c6b68;
-            }
-            &.active{
-                a {
-                    color: #333;
-                }
-                h2 {
-                    box-shadow: -2em 0em 0px $primary-color;
-                    outline: 8px solid #fff;
-                }
-            }
-
-            .subpage-content-list:last-child {
-                margin-bottom: -0.5em;
-            }
-        }
-
-        .subpage-content-list {
-            display: none;
-            margin: 1rem 0;
-            margin-bottom: 0;
-            margin-top: 0.25rem;
-            background-color: transparent;
-
-            h3 {
-                margin: 0;
-            }
-
-            li {
-                padding: 0.5rem 0;
-                margin-left: 1em;
-                margin-bottom: 0;
-                font-size: 0.8rem;
-                border-bottom: 1px solid #f3f1eb;
-                width: 90%;
-                margin-right: 0;
-            }
-        }
-
-        .active {
-            .subpage-content-list {
-                @media (min-width: $medium-screen) {
-                    display: flex;
-                    flex-direction: column;
-                }
-            }
-        }
-    }
-}
-
 .person-panels {
     padding-top: em-calc(36);
     clear: both;
@@ -389,89 +308,6 @@
         }
     }
 
-    .in-page-nav {
-        & > * {
-            @include radius(3px);
-            margin-bottom: 0px;
-            font-size: em-calc(16);
-            margin-bottom: 2.22222rem;
-            position: sticky;
-            top: 1rem;
-            z-index: 999;
-        }
-
-        h3.browse-content {
-            margin-top: 0;
-            margin-bottom: 0;
-            padding: 0.5em 0.75em;
-            background: #9ddc93;
-            font-size: 1.1rem;
-            color: $body-font-color;
-            position: sticky;
-            top: 0;
-            z-index: 1;
-        }
-
-        ul {
-            background-color: white;
-            margin-left: 0;
-        }
-
-        li {
-            list-style-position: inside;
-            list-style: none;
-            padding: 0.5em 0.5em 0.5em 1em;
-            line-height: 1.3em;
-            color: $borders;
-            &.active {
-                color: $primary-color;
-            }
-            &:last-of-type {
-                border-bottom: 0px;
-            }
-            a {
-                color: $body-font-color;
-            }
-        }
-
-        .featured_side__mysociety {
-            color: white;
-            background: #333333;
-            padding: 0.75em 1em;
-        }
-
-        .featured_side__content,
-        .sidebar__unit__donation {
-            background-color: white;
-            padding: 0.5em 1em 1em;
-            margin-bottom: 1.11111em;
-            > *:last-child {
-                margin-bottom: 0; 
-            }
-            @media (min-width: $medium-screen) {
-                margin-bottom: 2.22222em;
-            }
-        }
-
-        .sidebar__newsletter-form {
-            input[type="email"],
-            .button {
-                height: 36px;
-                font-size: 0.9rem;
-            }
-            .sidebar__newsletter-form__footer {
-                font-size: 0.8rem;
-                > *:last-child {
-                    margin-bottom: 0; 
-                }
-            }
-        }
-
-        .content__button {
-            margin-bottom: 0;
-        }
-    }
-
     .panel {
         h2 {
             font-size: em-calc(30);
diff --git a/www/docs/style/sass/parts/_in-page-nav.scss b/www/docs/style/sass/parts/_in-page-nav.scss
new file mode 100644
index 0000000000..fa79206e0f
--- /dev/null
+++ b/www/docs/style/sass/parts/_in-page-nav.scss
@@ -0,0 +1,189 @@
+.in-page-nav {
+    & > * {
+        @include radius(3px);
+        margin-bottom: 0px;
+        font-size: em-calc(16);
+        margin-bottom: 2.22222rem;
+        position: sticky;
+        top: 1rem;
+        z-index: 999;
+    }
+
+    h2.browse-content {
+        margin-top: 0;
+        margin-bottom: 0;
+        padding: 0.5em 0.75em;
+        background: #9ddc93;
+        font-size: 1.1rem;
+        color: $body-font-color;
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    ul {
+        background-color: white;
+        margin-left: 0;
+    }
+
+    li {
+        list-style-position: inside;
+        list-style: none;
+        padding: 0.5em 0.5em 0.5em 1em;
+        line-height: 1.3em;
+        color: $borders;
+        &.active {
+            color: $primary-color;
+        }
+        &:last-of-type {
+            border-bottom: 0px;
+        }
+        a {
+            color: $body-font-color;
+        }
+    }
+
+    .featured_side__mysociety {
+        color: white;
+        background: #333333;
+        padding: 0.75em 1em;
+    }
+
+    .featured_side__content,
+    .sidebar__unit__donation {
+        background-color: white;
+        padding: 0.5em 1em 1em;
+        margin-bottom: 1.11111em;
+        @media (min-width: $medium-screen) {
+            margin-bottom: 2.22222em;
+        }
+    }
+
+    .sidebar__unit__featured_side {
+        display: none;
+
+        @media (min-width: $medium-screen) {
+            display: block;
+        }
+    }
+
+    .content__button {
+        margin-bottom: 0;
+    }
+}
+
+.js-table-content-button {
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    margin-bottom: 0;
+
+    i {
+        margin-right: 0.25em;
+    }
+
+    @media (min-width: $medium-screen) {
+        display: none;
+    }
+}
+
+.js-table-of-content {
+    @media (max-width: $medium-screen) {
+        display: none;
+        position: fixed;
+        right: 1rem;
+        bottom: 4rem;
+        max-width: 300px;
+        width: 80dvw;
+        z-index: 999;
+        box-shadow: -1px 2px 5px 6px rgba(62, 62, 62, 0.3);
+        background-color: #fff;
+    }
+
+    @media (min-width: $medium-screen) {
+        display: block;
+        width: auto;
+    }
+}
+
+.table-of-content {
+    max-height: 75dvh;
+    overflow-y: auto;
+
+    &--subpage-heading {
+        text-underline-offset: 0.25rem;
+        h3 {
+            font-size: 0.9rem;
+            margin-bottom: 0;
+        }
+    }
+
+    h4 {
+        font-size: 0.8rem;
+        padding: 0.5em 2em 0.5em 1em;
+        color: $primary-color;
+        margin-top: 0.25rem;
+        font-weight: bold;
+    }
+
+    ul {
+        font-size: em-calc(18);
+        margin-left: 0px;
+
+        li {
+            top: 1px;
+            position: relative;
+            line-height: 48px;
+            margin-left: 0px;
+            width: 100%;
+            a {
+                color: #6c6b68;
+            }
+            &.active{
+                a {
+                    color: #333;
+                }
+                h3 {
+                    box-shadow: -2em 0em 0px $primary-color;
+                    outline: 8px solid #fff;
+                }
+            }
+
+            .subpage-content-list:last-child {
+                margin-bottom: -0.5em;
+            }
+        }
+
+        .subpage-content-list {
+            display: none;
+            margin: 1rem 0;
+            margin-bottom: 0;
+            margin-top: 0.25rem;
+            background-color: transparent;
+
+            h4 {
+                margin: 0;
+            }
+
+            li {
+                padding: 0.5rem 0;
+                margin-left: 1em;
+                margin-bottom: 0;
+                font-size: 0.8rem;
+                border-bottom: 1px solid #f3f1eb;
+                width: 90%;
+                margin-right: 0;
+                line-height: 0.8rem;
+            }
+        }
+
+        .active {
+            .subpage-content-list {
+                @media (min-width: $medium-screen) {
+                    display: flex;
+                    flex-direction: column;
+                }
+            }
+        }
+    }
+}
diff --git a/www/docs/style/sass/parts/_table-of-contents.scss b/www/docs/style/sass/parts/_table-of-contents.scss
deleted file mode 100644
index 400fd811c3..0000000000
--- a/www/docs/style/sass/parts/_table-of-contents.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.js-table-content-button {
-    position: fixed;
-    bottom: 1rem;
-    right: 1rem;
-    margin-bottom: 0;
-
-    i {
-        margin-right: 0.25em;
-    }
-
-    @media (min-width: $medium-screen) {
-        display: none;
-    }
-}
-
-.js-table-of-content {
-    @media (max-width: $medium-screen) {
-        display: none;
-        position: fixed;
-        right: 1rem;
-        bottom: 4rem;
-        max-width: 300px;
-        width: 80dvw;
-        z-index: 999;
-        box-shadow: -1px 2px 5px 6px rgba(62, 62, 62, 0.3);
-        background-color: #fff;
-    }
-
-    @media (min-width: $medium-screen) {
-        display: block;
-        width: auto;
-    }
-}
diff --git a/www/includes/easyparliament/templates/html/mp/_person_navigation.php b/www/includes/easyparliament/templates/html/mp/_person_navigation.php
index f5f5c9dee3..3967a5bae5 100644
--- a/www/includes/easyparliament/templates/html/mp/_person_navigation.php
+++ b/www/includes/easyparliament/templates/html/mp/_person_navigation.php
@@ -4,12 +4,12 @@
     </button>   
 </div>
 
-<div class="person-navigation js-table-of-content">
-    <h3 class="browse-content"><?= ucfirst($full_name) ?></h3>
+<div class="table-of-content js-table-of-content">
+    <h2 class="browse-content"><?= ucfirst($full_name) ?></h2>
     <ul>
         <li <?php if ($pagetype == ""): ?>class="active"<?php endif; ?>>
-            <a href="<?= $member_url ?>" class="person-navigation--subpage-heading">
-                <h2>📌 <?= gettext('Overview') ?></h2>
+            <a href="<?= $member_url ?>" class="table-of-content--subpage-heading">
+                <h3>📌 <?= gettext('Overview') ?></h3>
             </a>
             <ul class="subpage-content-list">
                 <li><a href="#profile"><?= gettext('Profile') ?></a></li>
@@ -18,8 +18,8 @@
 
         <?php if (count($recent_appearances['appearances'])): ?>
             <li <?php if ($pagetype == "speeches"): ?>class="active"<?php endif; ?>>
-                <a href="<?= $member_url ?>/speeches" class="person-navigation--subpage-heading">
-                    <h2>💬 <?= gettext('Speeches and Questions') ?></h2>
+                <a href="<?= $member_url ?>/speeches" class="table-of-content--subpage-heading">
+                    <h3>💬 <?= gettext('Speeches and Questions') ?></h3>
                 </a>
                 
                 <?php if ($pagetype == "speeches"): ?>
@@ -39,8 +39,8 @@
         
         <?php if (!empty($memberships) && (array_key_exists('posts', $memberships) || array_key_exists('previous_posts', $memberships) || array_key_exists('appg_membership', $memberships))): ?>
             <li <?php if ($pagetype == "memberships"): ?>class="active"<?php endif; ?>>
-                <a href="<?= $member_url ?>/memberships" class="person-navigation--subpage-heading">
-                    <h2>👥 <?= gettext('Committees / APPGs') ?></h2>
+                <a href="<?= $member_url ?>/memberships" class="table-of-content--subpage-heading">
+                    <h3>👥 <?= gettext('Committees / APPGs') ?></h3>
                 </a>
 
                 <?php if (!empty($memberships)): ?>
@@ -68,8 +68,8 @@
 
         <?php if (array_key_exists('letters_signed', $memberships) || array_key_exists('edms_signed', $memberships) || array_key_exists('topics_of_interest', $memberships) || array_key_exists('eu_stance', $memberships)): ?>
             <li <?php if ($pagetype == "signatures"): ?>class="active"<?php endif; ?>>
-                <a href="<?= $member_url ?>/signatures" class="person-navigation--subpage-heading">
-                    <h2>✍️ <?= gettext('Signatures') ?></h2>
+                <a href="<?= $member_url ?>/signatures" class="table-of-content--subpage-heading">
+                    <h3>✍️ <?= gettext('Signatures') ?></h3>
                 </a>
 
                 <nav class="subpage-content-list js-accordion" aria-label="Signatures list">
@@ -93,13 +93,13 @@
 
         <?php if ($this_page == "mp"): ?>
             <li <?php if ($pagetype == "votes"): ?>class="active"<?php endif; ?>>
-                <a href="<?= $member_url ?>/votes" class="person-navigation--subpage-heading">
-                    <h2>🗳️ <?= gettext('Voting Summary') ?></h2>
+                <a href="<?= $member_url ?>/votes" class="table-of-content--subpage-heading">
+                    <h3>🗳️ <?= gettext('Voting Summary') ?></h3>
                 </a>
 
                 <?php if (!empty($has_voting_record) && !empty($key_votes_segments)): ?>
                     <nav class="subpage-content-list js-accordion" aria-label="Policy groups">
-                        <h3 class="js-accordion-button">Policy areas</h3>
+                        <h4 class="js-accordion-button">Policy areas</h4>
                         <ul class="js-accordion-content">
                             <?php if ($has_voting_record): ?>
                                 <?php foreach ($key_votes_segments as $segment): ?>
@@ -116,8 +116,8 @@
 
         <?php if (in_array($this_page, ["mp", "msp", "ms"])): ?>
             <li <?php if ($pagetype == "recent"): ?>class="active"<?php endif; ?>>
-                <a href="<?= $member_url ?>/recent" class="person-navigation--subpage-heading">
-                    <h2>📜 <?= gettext('Recent Votes') ?></h2>
+                <a href="<?= $member_url ?>/recent" class="table-of-content--subpage-heading">
+                    <h3>📜 <?= gettext('Recent Votes') ?></h3>
                 </a>
             </li>
         <?php endif; ?>
@@ -126,8 +126,8 @@
 
         <?php if ($register_interests): ?>
             <li <?php if ($pagetype == "register"): ?>class="active"<?php endif; ?>>
-                <a href="<?= $member_url ?>/register" class="person-navigation--subpage-heading">
-                    <h2>📖 <?= gettext('Register of Interests') ?></h2>
+                <a href="<?= $member_url ?>/register" class="table-of-content--subpage-heading">
+                    <h3>📖 <?= gettext('Register of Interests') ?></h3>
                 </a>
 
                 <?php if (!empty($register_interests)): ?>
@@ -135,7 +135,7 @@
                         <?php /** @var MySociety\TheyWorkForYou\DataClass\Regmem\Person $register */ ?>
 
                         <nav class="subpage-content-list js-accordion" aria-label="<?= $register->displayChamber() ?> list">
-                            <h3 class="js-accordion-button"><?= $register->displayChamber() ?></h3>
+                            <h4 class="js-accordion-button"><?= $register->displayChamber() ?></h4>
                             <ul class="js-accordion-content">
                                 <?php foreach ($register->getCategories() as $category): ?>
                                     <?php if ($category->only_null_entries()): ?>
@@ -152,8 +152,8 @@
 
         <?php if ($register_2024_enriched): ?>
             <li <?php if ($pagetype == "election_register"): ?>class="active"<?php endif; ?>>
-                <a href="<?= $member_url ?>/election_register" class="person-navigation--subpage-heading">
-                    <h2>🏛️ <?= gettext('2024 Election Donations') ?></h2>
+                <a href="<?= $member_url ?>/election_register" class="table-of-content--subpage-heading">
+                    <h3>🏛️ <?= gettext('2024 Election Donations') ?></h3>
                 </a>
 
                 <ul class="subpage-content-list">
@@ -175,8 +175,8 @@
 
         <?php if (in_array($this_page, ["mp"])): ?>
             <li <?php if ($pagetype == "constituency"): ?>class="active"<?php endif; ?>>
-                <a href="<?= $member_url ?>/constituency" class="person-navigation--subpage-heading">
-                    <h2>🌍 <?= gettext('Constituency information') ?></h2>
+                <a href="<?= $member_url ?>/constituency" class="table-of-content--subpage-heading">
+                    <h3>🌍 <?= gettext('Constituency information') ?></h3>
                 </a>
             </li>
         <?php endif; ?>

From 4f1e42a48efab26d7baf4cb3b28c4aedffc1bb18 Mon Sep 17 00:00:00 2001
From: Lucas Cumsille M <hello@lucascm.dev>
Date: Wed, 3 Jun 2026 06:30:17 +0000
Subject: [PATCH 2/9] Added `.js-table-of-content-markdown`

It creates a side menu from markdown template that uses the same classes as `.js-table-of-content` allowing the same style navigation we use in the MP pages.
---
 www/docs/js/main.js | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/www/docs/js/main.js b/www/docs/js/main.js
index ac3476e3e3..9a5dcd2c44 100644
--- a/www/docs/js/main.js
+++ b/www/docs/js/main.js
@@ -380,6 +380,42 @@ $(function(){
       });
   });
 
+  // JS that creates nav menu from markdown to work with js-table-of-content component.
+  $('.js-table-of-content-markdown').each(function(){
+    var $container = $(this);
+    var $title = $('.js-markdown-title');
+    if ( $title.length === 1 ) {
+      $container.append(
+        $('<a>').attr('href', '#' + $title.attr('id')).append(
+          $('<h2 class="browse-content">').text($title.text())
+        )
+      );
+    }
+    var $items = $('.js-markdown-item');
+    var $ul = $('<ul>');
+    $container.append($ul);
+    var levels = [ $ul ];
+    $items.each(function(i){
+      var $item = $(this);
+      var $li = $('<li>').append(
+        $('<a class="table-of-content--subpage-heading">')
+          .attr('href', '#' + $item.attr('id'))
+          .append( $('<h3>').text($item.text()) )
+      );
+      levels[0].append($li);
+      var $next = $items.eq(i + 1);
+      var current = parseInt($item.prop('tagName').substring(1), 10);
+      var next = $next.length ? parseInt($next.prop('tagName').substring(1), 10) : current;
+      if ( next > current ) {
+        var $childrenUl = $('<ul>');
+        $li.append($childrenUl);
+        levels.unshift($childrenUl);
+      } else if ( next < current ) {
+        levels.shift();
+      }
+    });
+  });
+
   // Mobile Sidebar functionality
   $('.js-table-content-button').on('click', function(e) {
     e.preventDefault();
@@ -412,6 +448,7 @@ $(function(){
     $('.js-table-content-button').attr('aria-expanded', 'false');
     $('.js-table-of-content').attr('aria-hidden', 'true').hide();
   }
+
   $('#add-all').on('click', function(e) {
     var $add_all = e.currentTarget;
     var $selected_related = document.querySelectorAll('input[name="selected_related_terms[]"]');

From 01014bcdd947d302f39988f7210f7da7fa3eacbe Mon Sep 17 00:00:00 2001
From: Lucas Cumsille M <hello@lucascm.dev>
Date: Wed, 3 Jun 2026 06:33:32 +0000
Subject: [PATCH 3/9] Added `js-table-of-content-markdown` to markdown template

---
 classes/Renderer/Markdown.php                 |  4 +--
 .../html/static/markdown_template.php         | 30 ++++++++++++-------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/classes/Renderer/Markdown.php b/classes/Renderer/Markdown.php
index 655beb4092..856d978b29 100644
--- a/classes/Renderer/Markdown.php
+++ b/classes/Renderer/Markdown.php
@@ -36,9 +36,9 @@ public function markdown_document(string $this_page, bool $show_menu = true, arr
             $htitle = $matches[2];
             $slug = slugify($htitle);
             if ($level == 1) {
-                $title_class = "js-toc-title";
+                $title_class = "js-markdown-title browse-content";
             } else {
-                $title_class = "js-toc-item";
+                $title_class = "js-markdown-item";
             }
             return "<h$level id=\"$slug\" class=\"$title_class\">$htitle</h$level>";
         }, $html);
diff --git a/www/includes/easyparliament/templates/html/static/markdown_template.php b/www/includes/easyparliament/templates/html/static/markdown_template.php
index 3d6d4f58ae..fe77f3dc37 100644
--- a/www/includes/easyparliament/templates/html/static/markdown_template.php
+++ b/www/includes/easyparliament/templates/html/static/markdown_template.php
@@ -1,16 +1,24 @@
-<div class="full-page static-page toc-page">
+<div class="full-page">
     <div class="full-page__row">
-        <div class="toc-page__col">
-<?php if ($show_menu) { ?>
-            <div class="toc js-toc"></div>
-<?php } ?>
-        </div>
-        <div class="toc-page__col">
-
-            <div class="panel">
-                <?= $html ?>
+        <div class="person-panels">
+            <div class="sidebar__unit in-page-nav">
+                <div>
+                    <?php if ($show_menu) { ?>
+                    <div class="page-mobile-navigation-controller">
+                        <button class="js-table-content-button" aria-label="open/close navigation subpages">
+                            <i class="fi-list"></i><?= sprintf(gettext('%s Menu'), $page_title) ?>
+                        </button>   
+                    </div>
+                    <div class="js-table-of-content-markdown js-table-of-content table-of-content"></div>
+                    <?php } ?>
+                </div>
             </div>
-        </div>  
 
+            <div class="primary-content__unit">
+                <div class="panel">
+                    <?= $html ?>
+                </div>
+            </div>
+        </div>
     </div>
 </div>

From 360ce844c82925df7377f98692156881740e818b Mon Sep 17 00:00:00 2001
From: Lucas Cumsille M <hello@lucascm.dev>
Date: Wed, 3 Jun 2026 09:21:43 +0000
Subject: [PATCH 4/9] Added Newsletter and Donation sidebar to static markdown
 pages

---
 .../templates/html/static/_donation.php       | 17 ++++++++++
 .../templates/html/static/_newsletter.php     | 32 +++++++++++++++++++
 .../html/static/markdown_template.php         |  3 ++
 3 files changed, 52 insertions(+)
 create mode 100644 www/includes/easyparliament/templates/html/static/_donation.php
 create mode 100644 www/includes/easyparliament/templates/html/static/_newsletter.php

diff --git a/www/includes/easyparliament/templates/html/static/_donation.php b/www/includes/easyparliament/templates/html/static/_donation.php
new file mode 100644
index 0000000000..59fcd1ae0a
--- /dev/null
+++ b/www/includes/easyparliament/templates/html/static/_donation.php
@@ -0,0 +1,17 @@
+
+
+<?php $featured_item = $announcement_manager->get_random_valid_item("sidebar_donation_static"); ?>
+
+<?php if ($featured_item) { ?>
+
+<div class="sidebar__unit__featured_side">
+  <div class="featured_side__content">
+  <a href="<?= $featured_item->url ?>"><h3 class="content__title"><?= $featured_item->title ?></h3></a>
+  <p class="content__description"><?= $featured_item->content ?></p>  
+  <?php if (isset($featured_item->button_text)) { ?>
+  <a class="button content__button <?= $featured_item->button_class ?>" href="<?= $featured_item->url ?>"><?= ($featured_item->button_text ?? "Read more") ?></a>
+  <?php } ?>
+  </div>
+</div>
+
+<?php }; ?>
diff --git a/www/includes/easyparliament/templates/html/static/_newsletter.php b/www/includes/easyparliament/templates/html/static/_newsletter.php
new file mode 100644
index 0000000000..7d9aef4bb5
--- /dev/null
+++ b/www/includes/easyparliament/templates/html/static/_newsletter.php
@@ -0,0 +1,32 @@
+<?php $newsletter_item = $announcement_manager->get_random_valid_item("sidebar_newsletter_static"); ?>
+
+<?php if ($newsletter_item) { ?>
+<form method="post" class="sidebar__unit__featured_side sidebar__newsletter-form" action="//mysociety.us9.list-manage.com/subscribe/post?u=53d0d2026dea615ed488a8834&amp;id=287dc28511" onsubmit="trackFormSubmit(this, 'FooterNewsletterSignup', 'submit', null); return false;">
+  <?php if (isset($newsletter_item->thumbnail_image_url)) { ?>
+  <img class="featured_side__image" src="<?= $newsletter_item->thumbnail_image_url ?>" alt="<?= $newsletter_item->thumbnail_image_alt_text ?? '' ?>">
+  <?php } ?>
+  <div class="featured_side__content">
+    <h3 class="content__title"><?= $newsletter_item->title ?? gettext('Sign up to mySociety’s newsletter') ?></h3>
+    <?php if (isset($newsletter_item->content)) { ?>
+    <p class="content__description"><?= $newsletter_item->content ?></p>
+    <?php } ?>
+    <input type="email" placeholder="<?= gettext('Your email address') ?>" name="EMAIL"/>
+    <div>
+      <label style="position: absolute; left: -5000px;">
+        Leave this box empty: <input type="text" name="b_53d0d2026dea615ed488a8834_287dc28511" tabindex="-1" value="" />
+      </label>
+      <!-- Adds the tag: "twfy" -->
+      <input type="hidden" name="tags" value="11866267">
+      <!-- Adds the interest groups: "Democracy and Parliaments" -->
+      <input type="hidden" name="group[11745][4]" value="1">
+      <input type="submit" value="<?= $newsletter_item->button_text ?? gettext('Subscribe') ?>" name="subscribe" class="button prefix <?= $newsletter_item->button_class ?? '' ?>">
+    </div>
+
+    <?php if (!empty($newsletter_item->footer_html)) { ?>
+        <div class="sidebar__newsletter-form__footer">
+            <?= $newsletter_item->footer_html ?>
+        </div>
+    <?php } ?>
+  </div>
+</form>
+<?php }; ?>
diff --git a/www/includes/easyparliament/templates/html/static/markdown_template.php b/www/includes/easyparliament/templates/html/static/markdown_template.php
index fe77f3dc37..badb011fea 100644
--- a/www/includes/easyparliament/templates/html/static/markdown_template.php
+++ b/www/includes/easyparliament/templates/html/static/markdown_template.php
@@ -11,6 +11,9 @@
                     </div>
                     <div class="js-table-of-content-markdown js-table-of-content table-of-content"></div>
                     <?php } ?>
+
+                    <?php include '_donation.php'; ?>
+                    <?php include '_newsletter.php'; ?>
                 </div>
             </div>
 

From 0407f72134fa12f13ebf1a53afc2e3182684676e Mon Sep 17 00:00:00 2001
From: Lucas Cumsille M <hello@lucascm.dev>
Date: Tue, 9 Jun 2026 15:07:48 +0000
Subject: [PATCH 5/9] Added responsive beahviour for children of
 `sidebar__unit`

---
 www/docs/style/sass/parts/_in-page-nav.scss | 37 ++++++++++++++++-----
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/www/docs/style/sass/parts/_in-page-nav.scss b/www/docs/style/sass/parts/_in-page-nav.scss
index fa79206e0f..d661e5add3 100644
--- a/www/docs/style/sass/parts/_in-page-nav.scss
+++ b/www/docs/style/sass/parts/_in-page-nav.scss
@@ -1,12 +1,27 @@
 .in-page-nav {
     & > * {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        flex-direction: column;
+        gap: 1rem;
         @include radius(3px);
         margin-bottom: 0px;
+        margin-top: 1rem;
         font-size: em-calc(16);
         margin-bottom: 2.22222rem;
         position: sticky;
-        top: 1rem;
+        top: 0;
         z-index: 999;
+
+        @media (min-width: $large-screen) {
+            align-items: normal;
+            margin-top: -1rem; // This is for the fist invisible child(.page-mobile-navigation-controller) that gives one extra space thanks to the gap:1rem;
+        }
+
+        > * {
+            max-width: 22rem;
+        }
     }
 
     h2.browse-content {
@@ -53,17 +68,20 @@
     .sidebar__unit__donation {
         background-color: white;
         padding: 0.5em 1em 1em;
-        margin-bottom: 1.11111em;
-        @media (min-width: $medium-screen) {
-            margin-bottom: 2.22222em;
-        }
     }
 
     .sidebar__unit__featured_side {
-        display: none;
+        display: block;
 
-        @media (min-width: $medium-screen) {
-            display: block;
+        input {
+            font-size: 0.9rem;
+        }
+    }
+
+    .sidebar__newsletter-form__footer {
+        font-size: 0.8rem;
+        > *:last-child {
+            margin-bottom: 0; 
         }
     }
 
@@ -128,7 +146,8 @@
 
     ul {
         font-size: em-calc(18);
-        margin-left: 0px;
+        margin-left: 0;
+        margin-bottom: 0;
 
         li {
             top: 1px;

From d86b06f1694d0eb05029c5b1db276f18f9f6e932 Mon Sep 17 00:00:00 2001
From: Lucas Cumsille M <hello@lucascm.dev>
Date: Wed, 10 Jun 2026 13:34:05 +0000
Subject: [PATCH 6/9] Make _donation and _newsletter announcement reusable

- Deleted the first line on each template so they can be reused and the variable `$featured_item` and `newsletter_item` can have different copies.

- Updated `mp/_sidebar.php` so it uses the correct variable `$featured_item`
---
 www/includes/easyparliament/templates/html/mp/_sidebar.php    | 2 +-
 .../easyparliament/templates/html/sidebar/_donation.php       | 4 ----
 .../easyparliament/templates/html/sidebar/_newsletter.php     | 2 --
 3 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/www/includes/easyparliament/templates/html/mp/_sidebar.php b/www/includes/easyparliament/templates/html/mp/_sidebar.php
index ed782d9b12..7c775f1a6a 100644
--- a/www/includes/easyparliament/templates/html/mp/_sidebar.php
+++ b/www/includes/easyparliament/templates/html/mp/_sidebar.php
@@ -1,7 +1,7 @@
 <?php include '_person_navigation.php'; ?>
 <?php include '_featured_content.php'; ?>
 
-<?php $newsletter_item = $announcement_manager->get_random_valid_item("sidebar", "donation"); ?>
+<?php $featured_item = $announcement_manager->get_random_valid_item("sidebar", "donation"); ?>
 <?php include INCLUDESPATH . 'easyparliament/templates/html/sidebar/_donation.php'; ?>
 
 <?php $newsletter_item = $announcement_manager->get_random_valid_item("sidebar", "newsletter"); ?>
diff --git a/www/includes/easyparliament/templates/html/sidebar/_donation.php b/www/includes/easyparliament/templates/html/sidebar/_donation.php
index 6744501dcd..a460ec1e79 100644
--- a/www/includes/easyparliament/templates/html/sidebar/_donation.php
+++ b/www/includes/easyparliament/templates/html/sidebar/_donation.php
@@ -1,7 +1,3 @@
-
-
-<?php $featured_item = $announcement_manager->get_random_valid_item("donation"); ?>
-
 <?php if ($featured_item) { ?>
 
 <div class="sidebar__unit__featured_side">
diff --git a/www/includes/easyparliament/templates/html/sidebar/_newsletter.php b/www/includes/easyparliament/templates/html/sidebar/_newsletter.php
index faec0b40ce..e795c258af 100644
--- a/www/includes/easyparliament/templates/html/sidebar/_newsletter.php
+++ b/www/includes/easyparliament/templates/html/sidebar/_newsletter.php
@@ -1,5 +1,3 @@
-<?php $newsletter_item = $announcement_manager->get_random_valid_item("sidebar", "newsletter"); ?>
-
 <?php if ($newsletter_item) { ?>
 <form method="post" class="sidebar__unit__featured_side sidebar__newsletter-form" action="//mysociety.us9.list-manage.com/subscribe/post?u=53d0d2026dea615ed488a8834&amp;id=287dc28511" onsubmit="trackFormSubmit(this, 'FooterNewsletterSignup', 'submit', null); return false;">
   <?php if (isset($newsletter_item->thumbnail_image_url)) { ?>

From 0d32d3c015945be48f4996dc0e55ba09f1347d45 Mon Sep 17 00:00:00 2001
From: Lucas Cumsille M <hello@lucascm.dev>
Date: Wed, 10 Jun 2026 13:38:23 +0000
Subject: [PATCH 7/9] fixup! Added Newsletter and Donation sidebar to static
 markdown pages

---
 .../templates/html/static/_donation.php       | 17 ----------
 .../templates/html/static/_newsletter.php     | 32 -------------------
 .../templates/html/static/_sidebar.php        |  5 +++
 .../html/static/markdown_template.php         |  3 +-
 4 files changed, 6 insertions(+), 51 deletions(-)
 delete mode 100644 www/includes/easyparliament/templates/html/static/_donation.php
 delete mode 100644 www/includes/easyparliament/templates/html/static/_newsletter.php
 create mode 100644 www/includes/easyparliament/templates/html/static/_sidebar.php

diff --git a/www/includes/easyparliament/templates/html/static/_donation.php b/www/includes/easyparliament/templates/html/static/_donation.php
deleted file mode 100644
index 59fcd1ae0a..0000000000
--- a/www/includes/easyparliament/templates/html/static/_donation.php
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-<?php $featured_item = $announcement_manager->get_random_valid_item("sidebar_donation_static"); ?>
-
-<?php if ($featured_item) { ?>
-
-<div class="sidebar__unit__featured_side">
-  <div class="featured_side__content">
-  <a href="<?= $featured_item->url ?>"><h3 class="content__title"><?= $featured_item->title ?></h3></a>
-  <p class="content__description"><?= $featured_item->content ?></p>  
-  <?php if (isset($featured_item->button_text)) { ?>
-  <a class="button content__button <?= $featured_item->button_class ?>" href="<?= $featured_item->url ?>"><?= ($featured_item->button_text ?? "Read more") ?></a>
-  <?php } ?>
-  </div>
-</div>
-
-<?php }; ?>
diff --git a/www/includes/easyparliament/templates/html/static/_newsletter.php b/www/includes/easyparliament/templates/html/static/_newsletter.php
deleted file mode 100644
index 7d9aef4bb5..0000000000
--- a/www/includes/easyparliament/templates/html/static/_newsletter.php
+++ /dev/null
@@ -1,32 +0,0 @@
-<?php $newsletter_item = $announcement_manager->get_random_valid_item("sidebar_newsletter_static"); ?>
-
-<?php if ($newsletter_item) { ?>
-<form method="post" class="sidebar__unit__featured_side sidebar__newsletter-form" action="//mysociety.us9.list-manage.com/subscribe/post?u=53d0d2026dea615ed488a8834&amp;id=287dc28511" onsubmit="trackFormSubmit(this, 'FooterNewsletterSignup', 'submit', null); return false;">
-  <?php if (isset($newsletter_item->thumbnail_image_url)) { ?>
-  <img class="featured_side__image" src="<?= $newsletter_item->thumbnail_image_url ?>" alt="<?= $newsletter_item->thumbnail_image_alt_text ?? '' ?>">
-  <?php } ?>
-  <div class="featured_side__content">
-    <h3 class="content__title"><?= $newsletter_item->title ?? gettext('Sign up to mySociety’s newsletter') ?></h3>
-    <?php if (isset($newsletter_item->content)) { ?>
-    <p class="content__description"><?= $newsletter_item->content ?></p>
-    <?php } ?>
-    <input type="email" placeholder="<?= gettext('Your email address') ?>" name="EMAIL"/>
-    <div>
-      <label style="position: absolute; left: -5000px;">
-        Leave this box empty: <input type="text" name="b_53d0d2026dea615ed488a8834_287dc28511" tabindex="-1" value="" />
-      </label>
-      <!-- Adds the tag: "twfy" -->
-      <input type="hidden" name="tags" value="11866267">
-      <!-- Adds the interest groups: "Democracy and Parliaments" -->
-      <input type="hidden" name="group[11745][4]" value="1">
-      <input type="submit" value="<?= $newsletter_item->button_text ?? gettext('Subscribe') ?>" name="subscribe" class="button prefix <?= $newsletter_item->button_class ?? '' ?>">
-    </div>
-
-    <?php if (!empty($newsletter_item->footer_html)) { ?>
-        <div class="sidebar__newsletter-form__footer">
-            <?= $newsletter_item->footer_html ?>
-        </div>
-    <?php } ?>
-  </div>
-</form>
-<?php }; ?>
diff --git a/www/includes/easyparliament/templates/html/static/_sidebar.php b/www/includes/easyparliament/templates/html/static/_sidebar.php
new file mode 100644
index 0000000000..749c41ee01
--- /dev/null
+++ b/www/includes/easyparliament/templates/html/static/_sidebar.php
@@ -0,0 +1,5 @@
+<?php $featured_item = $announcement_manager->get_random_valid_item("sidebar_interests", "donation"); ?>
+<?php include INCLUDESPATH . 'easyparliament/templates/html/sidebar/_donation.php'; ?>
+
+<?php $newsletter_item = $announcement_manager->get_random_valid_item("sidebar_interests", "newsletter"); ?>
+<?php include INCLUDESPATH . 'easyparliament/templates/html/sidebar/_newsletter.php'; ?>
diff --git a/www/includes/easyparliament/templates/html/static/markdown_template.php b/www/includes/easyparliament/templates/html/static/markdown_template.php
index badb011fea..cacdba3837 100644
--- a/www/includes/easyparliament/templates/html/static/markdown_template.php
+++ b/www/includes/easyparliament/templates/html/static/markdown_template.php
@@ -12,8 +12,7 @@
                     <div class="js-table-of-content-markdown js-table-of-content table-of-content"></div>
                     <?php } ?>
 
-                    <?php include '_donation.php'; ?>
-                    <?php include '_newsletter.php'; ?>
+                    <?php include '_sidebar.php'; ?>
                 </div>
             </div>
 

From 5bc7febf301caab43f0750b8c274fbcdcfce4220 Mon Sep 17 00:00:00 2001
From: Alex Parsons <alex.parsons@mysociety.org>
Date: Fri, 19 Jun 2026 12:49:57 +0000
Subject: [PATCH 8/9] fixup! Make `person-navigation` a reusable component

---
 www/docs/style/sass/parts/_in-page-nav.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/www/docs/style/sass/parts/_in-page-nav.scss b/www/docs/style/sass/parts/_in-page-nav.scss
index d661e5add3..bca0a1d861 100644
--- a/www/docs/style/sass/parts/_in-page-nav.scss
+++ b/www/docs/style/sass/parts/_in-page-nav.scss
@@ -150,7 +150,6 @@
         margin-bottom: 0;
 
         li {
-            top: 1px;
             position: relative;
             line-height: 48px;
             margin-left: 0px;

From a47573b56c1fad11cdd0f1406a7c22270aab6571 Mon Sep 17 00:00:00 2001
From: Alex Parsons <alex.parsons@mysociety.org>
Date: Fri, 19 Jun 2026 13:00:32 +0000
Subject: [PATCH 9/9] fixup! Make `person-navigation` a reusable component

---
 www/docs/style/sass/pages/_mp.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/www/docs/style/sass/pages/_mp.scss b/www/docs/style/sass/pages/_mp.scss
index cdf0e06cae..90dbfbc6ed 100644
--- a/www/docs/style/sass/pages/_mp.scss
+++ b/www/docs/style/sass/pages/_mp.scss
@@ -299,11 +299,12 @@
     // Recent votes page has sidebar *after* the primary content
     // (so that a list of content sections can be built up in $sidebar_links)
     // but we want to make sure the main content always displays on the right.
+    // The sidebar's lower order keeps it on the left regardless of DOM order.
     .primary-content__unit {
 
         @media (min-width: $medium-screen) {
             float: right; // non-flex fallback
-            order: 1;
+            order: 2;
             margin-top: 0;
         }
     }