From e38f90b5620dfd3d55b7f381b065776a970c50ec Mon Sep 17 00:00:00 2001
From: Rupert Jabelman <rupert@jabelman.org>
Date: Thu, 2 May 2024 15:57:35 +0100
Subject: [PATCH 1/9] Added subsites_menu region.

---
 localgov_base.info.yml            | 1 +
 templates/layout/header.html.twig | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/localgov_base.info.yml b/localgov_base.info.yml
index 69be0606..38475efc 100644
--- a/localgov_base.info.yml
+++ b/localgov_base.info.yml
@@ -15,6 +15,7 @@ regions:
   mobile_search: "Mobile search"
   primary_menu: "Primary menu"
   secondary_menu: "Secondary menu"
+  subsites_menu: "Subsites menu"
   banner: "Banner"
   breadcrumb: "Breadcrumb"
   messages: "Messages"
diff --git a/templates/layout/header.html.twig b/templates/layout/header.html.twig
index ee11d2a2..55353f2c 100644
--- a/templates/layout/header.html.twig
+++ b/templates/layout/header.html.twig
@@ -69,4 +69,9 @@
       </div>
     </div>
   </div>
+  {% if has_subsites_menu %}
+    <div id="lgd-header__nav--subsites" class="lgd-header__nav lgd-header__nav--subsites">
+      {{ page.subsites_menu }}
+    </div>
+  {% endif %}
 </header>

From f0e9bc121b41fda657a4f943af3fc3eaee9e87c9 Mon Sep 17 00:00:00 2001
From: Justine Pocock <justine@whoopee.digital>
Date: Fri, 10 May 2024 10:26:15 +0100
Subject: [PATCH 2/9] Add styles to a menu called subsites

---
 css/components/menu-subsites.css              | 52 +++++++++++++++++++
 localgov_base.libraries.yml                   |  5 ++
 .../block/block--system-menu-block.html.twig  |  5 ++
 3 files changed, 62 insertions(+)
 create mode 100644 css/components/menu-subsites.css

diff --git a/css/components/menu-subsites.css b/css/components/menu-subsites.css
new file mode 100644
index 00000000..25051814
--- /dev/null
+++ b/css/components/menu-subsites.css
@@ -0,0 +1,52 @@
+.menu--subsites__title {
+  font-weight: bold;
+  font-size: var(--font-size-h2);
+}
+
+.menu--subsites {
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.menu--subsites > .menu-item a {
+  display: block;
+  padding: var(--spacing);
+  color: var(--color-white);
+
+}
+
+.menu--subsites > .menu-item--active-trail a,
+.menu--subsites > .menu-item a:focus,
+.menu--subsites > .menu-item a:hover {
+  color: var(--color-black);
+  background-color: var(--color-white);
+}
+
+@media screen and (min-width: 48rem) {
+
+  .lgd-region--subsites-menu .menu--subsites {
+    display: flex;
+  }
+
+  .menu--subsites > .menu-item {
+    margin-right: var(--spacing-smaller);
+    margin-left: var(--spacing-smaller);
+  }
+
+  .menu--subsites > .menu-item a {
+    border: 1px solid transparent;
+    background-color: transparent;
+  }
+
+  .menu--subsites > .menu-item--active-trail a,
+  .menu--subsites > .menu-item a:focus,
+  .menu--subsites > .menu-item a:hover {
+    color: var(--color-black);
+    background-color: var(--color-white);
+  }
+
+  .menu--subsites > .menu-item a:hover {
+    border-color: var(--color-white);
+  }
+}
diff --git a/localgov_base.libraries.yml b/localgov_base.libraries.yml
index 5dabe4cf..203ea2e1 100644
--- a/localgov_base.libraries.yml
+++ b/localgov_base.libraries.yml
@@ -82,6 +82,11 @@ menu-main:
     theme:
       css/components/menu-main.css: {}
 
+menu-subsites:
+  css:
+    theme:
+      css/components/menu-subsites.css: {}
+
 page-title-block:
   css:
     theme:
diff --git a/templates/block/block--system-menu-block.html.twig b/templates/block/block--system-menu-block.html.twig
index c6b115a4..303a3ef2 100644
--- a/templates/block/block--system-menu-block.html.twig
+++ b/templates/block/block--system-menu-block.html.twig
@@ -47,8 +47,13 @@
   {% if derivative_plugin_id == 'main' %}
     {{ attach_library('localgov_base/menu-main') }}
   {% endif %}
+  
+  {% if derivative_plugin_id == 'subsites' %}
+    {{ attach_library('localgov_base/menu-subsites') }}
+  {% endif %}
 {% endif %}
 
+
 {% set heading_id = attributes.id ~ '-menu'|clean_id %}
 <nav aria-labelledby="{{ heading_id }}"{{ attributes.addClass(classes)|without('role', 'aria-labelledby') }}>
   {# Label. If not displayed, we still provide it for screen readers. #}

From c0d87dc1caa7be6bcccb9659fba95826b143a5ac Mon Sep 17 00:00:00 2001
From: Justine Pocock <justine@whoopee.digital>
Date: Fri, 10 May 2024 10:26:32 +0100
Subject: [PATCH 3/9] add a title to the subsite menu

---
 templates/navigation/menu--subsites.html.twig | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 templates/navigation/menu--subsites.html.twig

diff --git a/templates/navigation/menu--subsites.html.twig b/templates/navigation/menu--subsites.html.twig
new file mode 100644
index 00000000..f87592e8
--- /dev/null
+++ b/templates/navigation/menu--subsites.html.twig
@@ -0,0 +1,78 @@
+{#
+/**
+ * @file
+ * Theme override to display a menu.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link url, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ */
+#}
+
+{% if subsite_homepage_link %}
+  <div class="menu--subsites__title">
+    {{ subsite_homepage_link }}
+  </div>
+{% endif %}
+
+{% import _self as menus %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  @see https://twig.symfony.com/doc/1.x/tags/macro.html
+#}
+{{ menus.menu_links(items, attributes, 0, menu_name, '') }}
+
+{% macro menu_links(items, attributes, menu_level, menu_name) %}
+  {% import _self as menus %}
+    
+    {%
+      set menu_classes = [
+        'menu',
+        'menu--' ~ menu_name,
+      ]
+    %}
+    
+    {%
+      set sub_menu_classes = [
+        'menu',
+        'menu-' ~ menu_name ~ '--sub-menu',
+        'menu--sub-menu',
+      ]
+    %}
+
+  {% if items %}
+    {% if menu_level == 0 %}
+      <ul{{ attributes.addClass(menu_classes) }}>
+    {% else %}
+      <ul{{ attributes.removeClass(menu_classes).addClass(sub_menu_classes) }}>
+    {% endif %}
+    {% for item in items %}
+      {%
+        set classes = [
+          'menu-item',
+          item.is_expanded ? 'menu-item--expanded',
+          item.is_collapsed ? 'menu-item--collapsed',
+          item.in_active_trail ? 'menu-item--active-trail',
+        ]
+      %}
+      <li{{ item.attributes.addClass(classes) }}>
+        {{ link(item.title, item.url) }}
+        {% if item.below %}
+          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+        {% endif %}
+      </li>
+    {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}

From e605277fcfb5932325d255d560d4e286509f726d Mon Sep 17 00:00:00 2001
From: Justine Pocock <justine@whoopee.digital>
Date: Fri, 10 May 2024 13:05:37 +0100
Subject: [PATCH 4/9] add css to change colours - these are demo colors

---
 css/components/subsite-extra.css | 61 ++++++++++++++++++++++++++++++++
 localgov_base.libraries.yml      |  5 +++
 2 files changed, 66 insertions(+)
 create mode 100644 css/components/subsite-extra.css

diff --git a/css/components/subsite-extra.css b/css/components/subsite-extra.css
new file mode 100644
index 00000000..43c5297c
--- /dev/null
+++ b/css/components/subsite-extra.css
@@ -0,0 +1,61 @@
+/* If you want to be more custom, you need to be mindful of the default mode
+  The best approach would be to add a variable to variables.css for the thing you want to change,
+  change it in the correct component file and add the new variable below. 
+  This gives the default subsite theme something to fallback on.
+*/
+
+/* For demonstration purposes we've put have examples which don't have custom variables. 
+   This means we've repeated code from elsewhere 
+*/
+/* These variables should be added to the variables.css file */
+body {
+  --subsite-extra-bg-color: transparent;
+  --subsite-extra-link-color: white;
+}
+
+/* This would be changed in the menu-subsites.css */
+.lgd-region--subsites-menu {
+  background-color: var(--subsite-extra-bg-color);
+}
+
+.subsite-extra .menu--subsites > .menu-item a {
+  color: var(--subsite-extra-link-color);
+}
+
+.subsite-extra .menu--subsites > .menu-item--active-trail a, 
+.subsite-extra .menu--subsites > .menu-item a:focus, 
+.subsite-extra .menu--subsites > .menu-item a:hover {
+  color: black
+}
+
+/* This should be the beginning of this file */
+
+/* set your custom colours - the class comes from values in the field localgov_subsites_theme
+   be sure to set an accessible contrast color */
+.subsite-extra--color-hot_pink {
+  --subsite-color: hotpink;
+  --subsite-color-contrast: black;
+}
+
+.subsite-extra--color-cool_cucumber {
+  --subsite-color: #01642B;
+  --subsite-color-contrast: #8AF670;
+}
+
+/* add all the variables that you want to change colour
+  subsite-extra--color-theme_a is the default colours 
+  You might want to use that to get the menu but not have a theme.
+*/
+.subsite-extra:not(.subsite-extra--color-theme_a) {
+  --header-link-color: var(--subsite-color-contrast);
+  --heading-2-color: var(--subsite-color);
+  --call-out-box-bg-color:  var(--subsite-color);
+  --call-out-box-text-color: var(--subsite-color-contrast);
+  --fact-box-bg-light: var(--subsite-color);
+  --fact-box-border-color: var(--subsite-color-contrast);
+  --color-section-pre-footer-bg: var(--subsite-color);
+  --color-pre-footer-link: var(--subsite-color-contrast);
+  --button-bg-color: var(--subsite-color);
+  --subsite-extra-bg-color: var(--subsite-color);
+  --subsite-extra-link-color: var(--subsite-color-contrast);
+}
diff --git a/localgov_base.libraries.yml b/localgov_base.libraries.yml
index 203ea2e1..2b42d4c2 100644
--- a/localgov_base.libraries.yml
+++ b/localgov_base.libraries.yml
@@ -296,6 +296,11 @@ embedded-views:
     theme:
       css/components/embedded-views.css: {}
 
+subsite-extra:
+  css:
+    theme:
+      css/components/subsite-extra.css: {}
+
 localgov_eu_cookie_compliance:
   css:
     theme:

From a7787aba5990612691d89e83e6041098c58e63cc Mon Sep 17 00:00:00 2001
From: Mark Conroy <mark@mark.ie>
Date: Fri, 17 May 2024 16:32:30 +0100
Subject: [PATCH 5/9] updates CSS/html to make it more generic so it scales
 better

---
 css/base/variables.css                        |   7 +
 css/components/menu-subsites.css              |  52 --------
 css/components/subsite-extra.css              |  61 ---------
 css/components/subsites-menu.css              | 123 ++++++++++++++++++
 localgov_base.libraries.yml                   |   9 +-
 .../block/block--system-menu-block.html.twig  |   6 +-
 templates/layout/region.html.twig             |  28 ++--
 templates/navigation/menu--subsites.html.twig |   8 +-
 8 files changed, 153 insertions(+), 141 deletions(-)
 delete mode 100644 css/components/menu-subsites.css
 delete mode 100644 css/components/subsite-extra.css
 create mode 100644 css/components/subsites-menu.css

diff --git a/css/base/variables.css b/css/base/variables.css
index f3e7818e..f08d64fa 100644
--- a/css/base/variables.css
+++ b/css/base/variables.css
@@ -529,4 +529,11 @@ body {
   --color-page-section-background-color-6-featured-subsite-background-color: var(--color-grey-lightest);
   --color-page-section-background-color-6-featured-subsite-text-color: var(--color-black);
   --color-page-section-background-color-6-featured-subsite-link-color: var(--color-black);
+
+  /* Subsites Extras */
+  --subsite-extra-accent-color: transparent;
+  --subsite-extra-bg-color: transparent;
+  --subsite-extra-link-color: var(--color-white);
+  --subsite-extra-link-color-hover: var(--color-white);
+  --subsite-extra-link-color-active-trail: var(--color-white);
 }
diff --git a/css/components/menu-subsites.css b/css/components/menu-subsites.css
deleted file mode 100644
index 25051814..00000000
--- a/css/components/menu-subsites.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.menu--subsites__title {
-  font-weight: bold;
-  font-size: var(--font-size-h2);
-}
-
-.menu--subsites {
-  margin-bottom: 0;
-  padding-left: 0;
-  list-style: none;
-}
-
-.menu--subsites > .menu-item a {
-  display: block;
-  padding: var(--spacing);
-  color: var(--color-white);
-
-}
-
-.menu--subsites > .menu-item--active-trail a,
-.menu--subsites > .menu-item a:focus,
-.menu--subsites > .menu-item a:hover {
-  color: var(--color-black);
-  background-color: var(--color-white);
-}
-
-@media screen and (min-width: 48rem) {
-
-  .lgd-region--subsites-menu .menu--subsites {
-    display: flex;
-  }
-
-  .menu--subsites > .menu-item {
-    margin-right: var(--spacing-smaller);
-    margin-left: var(--spacing-smaller);
-  }
-
-  .menu--subsites > .menu-item a {
-    border: 1px solid transparent;
-    background-color: transparent;
-  }
-
-  .menu--subsites > .menu-item--active-trail a,
-  .menu--subsites > .menu-item a:focus,
-  .menu--subsites > .menu-item a:hover {
-    color: var(--color-black);
-    background-color: var(--color-white);
-  }
-
-  .menu--subsites > .menu-item a:hover {
-    border-color: var(--color-white);
-  }
-}
diff --git a/css/components/subsite-extra.css b/css/components/subsite-extra.css
deleted file mode 100644
index 43c5297c..00000000
--- a/css/components/subsite-extra.css
+++ /dev/null
@@ -1,61 +0,0 @@
-/* If you want to be more custom, you need to be mindful of the default mode
-  The best approach would be to add a variable to variables.css for the thing you want to change,
-  change it in the correct component file and add the new variable below. 
-  This gives the default subsite theme something to fallback on.
-*/
-
-/* For demonstration purposes we've put have examples which don't have custom variables. 
-   This means we've repeated code from elsewhere 
-*/
-/* These variables should be added to the variables.css file */
-body {
-  --subsite-extra-bg-color: transparent;
-  --subsite-extra-link-color: white;
-}
-
-/* This would be changed in the menu-subsites.css */
-.lgd-region--subsites-menu {
-  background-color: var(--subsite-extra-bg-color);
-}
-
-.subsite-extra .menu--subsites > .menu-item a {
-  color: var(--subsite-extra-link-color);
-}
-
-.subsite-extra .menu--subsites > .menu-item--active-trail a, 
-.subsite-extra .menu--subsites > .menu-item a:focus, 
-.subsite-extra .menu--subsites > .menu-item a:hover {
-  color: black
-}
-
-/* This should be the beginning of this file */
-
-/* set your custom colours - the class comes from values in the field localgov_subsites_theme
-   be sure to set an accessible contrast color */
-.subsite-extra--color-hot_pink {
-  --subsite-color: hotpink;
-  --subsite-color-contrast: black;
-}
-
-.subsite-extra--color-cool_cucumber {
-  --subsite-color: #01642B;
-  --subsite-color-contrast: #8AF670;
-}
-
-/* add all the variables that you want to change colour
-  subsite-extra--color-theme_a is the default colours 
-  You might want to use that to get the menu but not have a theme.
-*/
-.subsite-extra:not(.subsite-extra--color-theme_a) {
-  --header-link-color: var(--subsite-color-contrast);
-  --heading-2-color: var(--subsite-color);
-  --call-out-box-bg-color:  var(--subsite-color);
-  --call-out-box-text-color: var(--subsite-color-contrast);
-  --fact-box-bg-light: var(--subsite-color);
-  --fact-box-border-color: var(--subsite-color-contrast);
-  --color-section-pre-footer-bg: var(--subsite-color);
-  --color-pre-footer-link: var(--subsite-color-contrast);
-  --button-bg-color: var(--subsite-color);
-  --subsite-extra-bg-color: var(--subsite-color);
-  --subsite-extra-link-color: var(--subsite-color-contrast);
-}
diff --git a/css/components/subsites-menu.css b/css/components/subsites-menu.css
new file mode 100644
index 00000000..dfd123cc
--- /dev/null
+++ b/css/components/subsites-menu.css
@@ -0,0 +1,123 @@
+/**
+ * @file CSS for the subsites extras functionality.
+ */
+
+/*
+  The variables set here are defaults we can use for the subsites extras
+  features. We should have a good amount here, and their names should be
+  self-explanatory.
+
+  To use them, you can add more classes in your theme's CSS file, and set
+  your variables accordingly. You can see examples at the bottom of this file.
+
+  .subsite-extra--color-yellow {
+    --subsite-extra-color: yellow;
+    --subsite-extra-color-contrast: black;
+    --subsite-extra-region-bg-color: black;
+    --image-with-caption-bg-color: yellow;
+    --button-text-color: black;
+    --button-bg-color: yellow;
+    --button-border-color: black;
+  }
+
+  Remember, the .subsite-extra class is on the body element, so you can override
+  any variables that are set in variables.css (e.g. --color-accent).
+
+  Also, you can use this class to override any CSS for components on the page.
+  For example:
+  .subsite-extra--color-yellow .lgd-image--has-caption {
+    padding: var(--spacing-large);
+    background-color: yellow;
+    border: 0;
+  }
+*/
+
+.subsite-extra {
+  --subsite-extra-color: var(--color-accent);
+  --subsite-extra-color-contrast: var(--color-white);
+  --subsite-extra-link-color: var(--subsite-extra-color-contrast);
+  --subsite-extra-link-color-hover: var(--subsite-extra-color);
+  --subsite-extra-link-color-active-trail: var(--subsite-extra-color);
+  --subsite-extra-link-bg-color: var(--subsite-extra-color);
+  --subsite-extra-link-bg-color-hover: var(--subsite-extra-color-contrast);
+  --subsite-extra-menu-title-color: var(--subsite-extra-color);
+  --subsite-extra-region-bg-color: var(--color-white);
+  --subsite-extra-region-padding-horizontal: var(--spacing);
+  --subsite-extra-region-padding-vertical: var(--spacing);
+  --subsite-extra-menu-items-gap: var(--spacing);
+  --subsite-extra-menu-title-font-family: var(--font-primary);
+}
+
+/* This would be changed in the menu-subsites.css */
+.lgd-region--subsites-menu {
+  padding-block: var(--subsite-extra-region-padding-vertical);
+  padding-inline: var(--subsite-extra-region-padding-horizontal);
+  background-color: var(--subsite-extra-region-bg-color);
+}
+
+.lgd-region--subsites-menu .subsite-extra__title > a {
+  font-family: var(--subsite-extra-menu-title-font-family);
+  color: var(--subsite-extra-menu-title-color);
+}
+
+.lgd-region--subsites-menu .menu {
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+}
+.lgd-region--subsites-menu .menu > .menu-item a {
+  display: inline-block;
+}
+
+@media screen and (min-width: 48rem) {
+  .lgd-region--subsites-menu .menu {
+    display: flex;
+    gap: var(--subsite-extra-menu-items-gap);
+  }
+}
+
+.lgd-region--subsites-menu .menu > .menu-item a {
+  padding-inline: var(--spacing);
+  padding-block: var(--spacing);
+  color: var(--subsite-extra-link-color);
+  background-color: var(--subsite-extra-link-bg-color);
+}
+
+.lgd-region--subsites-menu .menu > .menu-item--active-trail a,
+.lgd-region--subsites-menu .menu > .menu-item a:focus,
+.lgd-region--subsites-menu .menu > .menu-item a:hover {
+  background-color: var(--subsite-extra-link-bg-color-hover);
+  color: var(--subsite-extra-link-color-hover);
+}
+
+/*
+  Set your custom colours.
+  The class comes from values in the field localgov_subsites_theme
+   - be sure to set an accessible contrast color.
+
+  Here are some samples (they won't work unless you have the field set up).
+*/
+.subsite-extra--color-yellow {
+  --subsite-extra-color: yellow;
+  --subsite-extra-color-contrast: black;
+  --subsite-extra-region-bg-color: black;
+  --image-with-caption-bg-color: yellow;
+  --button-text-color: black;
+  --button-bg-color: yellow;
+  --button-border-color: black;
+}
+
+.subsite-extra--color-hot_pink {
+  --subsite-extra-color: hotpink;
+  --subsite-extra-color-contrast: black;
+}
+
+.subsite-extra--color-cool_cucumber {
+  --subsite-extra-color: #01642B;
+  --subsite-extra-color-contrast: #8AF670;
+}
+
+.subsite-extra--color-theme_b {
+  --subsite-extra-color: #000cb6;
+  --subsite-extra-color-contrast: var(--color-white);
+}
diff --git a/localgov_base.libraries.yml b/localgov_base.libraries.yml
index 2b42d4c2..40d3dca0 100644
--- a/localgov_base.libraries.yml
+++ b/localgov_base.libraries.yml
@@ -82,11 +82,6 @@ menu-main:
     theme:
       css/components/menu-main.css: {}
 
-menu-subsites:
-  css:
-    theme:
-      css/components/menu-subsites.css: {}
-
 page-title-block:
   css:
     theme:
@@ -296,10 +291,10 @@ embedded-views:
     theme:
       css/components/embedded-views.css: {}
 
-subsite-extra:
+subsites-menu:
   css:
     theme:
-      css/components/subsite-extra.css: {}
+      css/components/subsites-menu.css: {}
 
 localgov_eu_cookie_compliance:
   css:
diff --git a/templates/block/block--system-menu-block.html.twig b/templates/block/block--system-menu-block.html.twig
index 303a3ef2..c4e4d8b0 100644
--- a/templates/block/block--system-menu-block.html.twig
+++ b/templates/block/block--system-menu-block.html.twig
@@ -40,17 +40,13 @@
   ]
 %}
 
-{# 
+{#
   We add libraries here for specific menus.
 #}
 {% if not localgov_base_remove_css %}
   {% if derivative_plugin_id == 'main' %}
     {{ attach_library('localgov_base/menu-main') }}
   {% endif %}
-  
-  {% if derivative_plugin_id == 'subsites' %}
-    {{ attach_library('localgov_base/menu-subsites') }}
-  {% endif %}
 {% endif %}
 
 
diff --git a/templates/layout/region.html.twig b/templates/layout/region.html.twig
index b1a6783e..47ce61b2 100644
--- a/templates/layout/region.html.twig
+++ b/templates/layout/region.html.twig
@@ -21,25 +21,29 @@
   ]
 %}
 
-{# 
-  If we need to create a new template just to add a library to it, 
+{#
+  If we need to create a new template just to add a library to it,
   let's do that here instead. We could do this in hook_preprocess_region()
-  but I prefer to keep as much as I can in these templates so we don't 
+  but I prefer to keep as much as I can in these templates so we don't
   have to go hunting so much.
 #}
 {% if not localgov_base_remove_css %}
   {% if region == 'tabs' %}
     {{ attach_library('localgov_base/region-tabs') }}
-  {% endif %} 
+  {% endif %}
+
+  {% if region == 'subsites_menu' %}
+    {{ attach_library('localgov_base/subsites-menu') }}
+  {% endif %}
 
   {% if region == 'sidebar_first' or region == 'sidebar_second' %}
     {{ attach_library('localgov_base/sidebar') }}
   {% endif %}
 {% endif %}
 
-{# 
+{#
   Often if we need a custom region template, it's because that region
-  needs to be full-width. Let's (at least for now), create an 
+  needs to be full-width. Let's (at least for now), create an
   array of regions that might need that, and then not print the container
   class for those regions.
 
@@ -47,10 +51,10 @@
   for each of these.
 
   The reason the header regions are listed here is because we want them to
-  take up 100% of their container, rather than the screen. We will take care 
+  take up 100% of their container, rather than the screen. We will take care
   of their layout via CSS in the header.css file.
 #}
-{% 
+{%
   set full_width_regions = [
     'banner',
     'header',
@@ -60,12 +64,12 @@
     'sidebar_first',
     'sidebar_second',
     'content'
-  ] 
+  ]
 %}
 
 {% if content %}
   <div{{ attributes.addClass(classes) }}>
-    
+
     {% if region not in full_width_regions %}
       <div class="lgd-container padding-horizontal">
     {% endif %}
@@ -73,9 +77,9 @@
     <div class="lgd-region__inner lgd-region__inner--{{ region|clean_class }}">
       {{ content }}
     </div>
-    
+
     {% if region not in full_width_regions %}
-      </div> 
+      </div>
     {% endif %}
 
   </div>
diff --git a/templates/navigation/menu--subsites.html.twig b/templates/navigation/menu--subsites.html.twig
index f87592e8..edde47ae 100644
--- a/templates/navigation/menu--subsites.html.twig
+++ b/templates/navigation/menu--subsites.html.twig
@@ -20,9 +20,9 @@
 #}
 
 {% if subsite_homepage_link %}
-  <div class="menu--subsites__title">
+  <h2 class="subsite-extra__title">
     {{ subsite_homepage_link }}
-  </div>
+  </h2>
 {% endif %}
 
 {% import _self as menus %}
@@ -35,14 +35,14 @@
 
 {% macro menu_links(items, attributes, menu_level, menu_name) %}
   {% import _self as menus %}
-    
+
     {%
       set menu_classes = [
         'menu',
         'menu--' ~ menu_name,
       ]
     %}
-    
+
     {%
       set sub_menu_classes = [
         'menu',

From 4471111fb542ff74999c753f87d02a7bb7d6fd3e Mon Sep 17 00:00:00 2001
From: Mark Conroy <mark@mark.ie>
Date: Fri, 17 May 2024 20:37:13 +0100
Subject: [PATCH 6/9] Removes variables

---
 css/base/variables.css | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/css/base/variables.css b/css/base/variables.css
index f08d64fa..f3e7818e 100644
--- a/css/base/variables.css
+++ b/css/base/variables.css
@@ -529,11 +529,4 @@ body {
   --color-page-section-background-color-6-featured-subsite-background-color: var(--color-grey-lightest);
   --color-page-section-background-color-6-featured-subsite-text-color: var(--color-black);
   --color-page-section-background-color-6-featured-subsite-link-color: var(--color-black);
-
-  /* Subsites Extras */
-  --subsite-extra-accent-color: transparent;
-  --subsite-extra-bg-color: transparent;
-  --subsite-extra-link-color: var(--color-white);
-  --subsite-extra-link-color-hover: var(--color-white);
-  --subsite-extra-link-color-active-trail: var(--color-white);
 }

From 383ecf6a71d05324a9cd453b5938f1d8b9c0593d Mon Sep 17 00:00:00 2001
From: Mark Conroy <mark@mark.ie>
Date: Sun, 19 May 2024 16:06:10 +0100
Subject: [PATCH 7/9] adds JS to toggle menu open/close on small screens

---
 css/components/subsites-menu.css              | 40 +++++++++++--
 js/subsites-menu.js                           | 58 +++++++++++++++++++
 localgov_base.libraries.yml                   |  5 ++
 templates/layout/header.html.twig             |  2 +-
 templates/navigation/menu--subsites.html.twig | 19 ++++--
 5 files changed, 115 insertions(+), 9 deletions(-)
 create mode 100644 js/subsites-menu.js

diff --git a/css/components/subsites-menu.css b/css/components/subsites-menu.css
index dfd123cc..9645aeb9 100644
--- a/css/components/subsites-menu.css
+++ b/css/components/subsites-menu.css
@@ -55,28 +55,60 @@
   background-color: var(--subsite-extra-region-bg-color);
 }
 
+.lgd-region--subsites-menu .subsite-extra__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing);
+}
+
+@media screen and (min-width: 48rem){
+  .lgd-region--subsites-menu .subsite-extra__header-toggle {
+    display: none;
+  }
+}
+
+.lgd-region--subsites-menu .subsite-extra__title {
+  margin-bottom: 0;
+}
+
 .lgd-region--subsites-menu .subsite-extra__title > a {
   font-family: var(--subsite-extra-menu-title-font-family);
   color: var(--subsite-extra-menu-title-color);
 }
 
 .lgd-region--subsites-menu .menu {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--subsite-extra-menu-items-gap);
+  margin-top: var(--spacing);
   margin-bottom: 0;
   padding-left: 0;
   list-style: none;
 }
-.lgd-region--subsites-menu .menu > .menu-item a {
-  display: inline-block;
+
+.lgd-region--subsites-menu .menu.subsite-extra-menu {
+  display: none;
+}
+.lgd-region--subsites-menu .menu.subsite-extra-menu--active {
+  display: flex;
+}
+
+.lgd-region--subsites-menu .menu > .menu-item {
+  width: 100%;
 }
 
 @media screen and (min-width: 48rem) {
-  .lgd-region--subsites-menu .menu {
+  .lgd-region--subsites-menu .menu.subsite-extra-menu {
     display: flex;
-    gap: var(--subsite-extra-menu-items-gap);
+  }
+  .lgd-region--subsites-menu .menu > .menu-item {
+    width: auto;
   }
 }
 
 .lgd-region--subsites-menu .menu > .menu-item a {
+  display: block;
   padding-inline: var(--spacing);
   padding-block: var(--spacing);
   color: var(--subsite-extra-link-color);
diff --git a/js/subsites-menu.js b/js/subsites-menu.js
new file mode 100644
index 00000000..312b7622
--- /dev/null
+++ b/js/subsites-menu.js
@@ -0,0 +1,58 @@
+/**
+ * @file JS file for the subsites-menu component.
+ */
+
+(function subsitesMenuScript(Drupal) {
+  Drupal.behaviors.subsitesMenu = {
+    attach: function (context) {
+
+      // This variable will be used later to make sure that the window
+      // was actually resized.
+      let windowWidth = window.innerWidth;
+
+      const subsitesMenuToggle = document.querySelector('.subsite-extra__header-toggle-button');
+      const subsitesMenu = document.querySelector('.subsite-extra-menu');
+
+      subsitesMenuToggle.addEventListener('click', function () {
+        subsitesMenuToggle.setAttribute('aria-expanded', subsitesMenuToggle.getAttribute('aria-expanded') === 'true' ? 'false' : 'true');
+        subsitesMenu.classList.toggle('subsite-extra-menu--active');
+      });
+
+      function handleReset() {
+        subsitesMenuToggle.setAttribute('aria-expanded', 'false');
+        subsitesMenu.classList.remove('subsite-extra-menu--active');
+      }
+
+      // If the window is resized to more than 768px, reset the menu.
+      function handleWindowResized() {
+        if (window.innerWidth === windowWidth) {
+          return
+        } else {
+          windowWidth = window.innerWidth;
+        }
+        if (windowWidth > 768) {
+          handleReset();
+        }
+      }
+
+      // Close the menu when the escape key is pressed.
+      context.addEventListener('keydown', function(e) {
+        if (e.key == 'Escape') {
+          e.preventDefault();
+          handleReset()
+          subsitesMenuToggle.focus();
+        }
+      });
+
+      // Close the menu when a click is made outside of it.
+      document.addEventListener('click', function(e) {
+        if (!e.target.closest('#lgd-header__nav--subsites-menu')){
+          handleReset();
+        }
+      });
+
+      window.addEventListener('resize', Drupal.debounce(handleWindowResized, 50, false));
+
+    }
+  };
+}(Drupal));
diff --git a/localgov_base.libraries.yml b/localgov_base.libraries.yml
index 40d3dca0..9199633e 100644
--- a/localgov_base.libraries.yml
+++ b/localgov_base.libraries.yml
@@ -295,6 +295,11 @@ subsites-menu:
   css:
     theme:
       css/components/subsites-menu.css: {}
+  js:
+    js/subsites-menu.js: {}
+  dependencies:
+    - core/drupal
+    - core/drupal.debounce
 
 localgov_eu_cookie_compliance:
   css:
diff --git a/templates/layout/header.html.twig b/templates/layout/header.html.twig
index 55353f2c..5cb96a20 100644
--- a/templates/layout/header.html.twig
+++ b/templates/layout/header.html.twig
@@ -70,7 +70,7 @@
     </div>
   </div>
   {% if has_subsites_menu %}
-    <div id="lgd-header__nav--subsites" class="lgd-header__nav lgd-header__nav--subsites">
+    <div id="lgd-header__nav--subsites-menu" class="lgd-header__nav lgd-header__nav--subsites-menu">
       {{ page.subsites_menu }}
     </div>
   {% endif %}
diff --git a/templates/navigation/menu--subsites.html.twig b/templates/navigation/menu--subsites.html.twig
index edde47ae..70d35aec 100644
--- a/templates/navigation/menu--subsites.html.twig
+++ b/templates/navigation/menu--subsites.html.twig
@@ -20,9 +20,19 @@
 #}
 
 {% if subsite_homepage_link %}
-  <h2 class="subsite-extra__title">
-    {{ subsite_homepage_link }}
-  </h2>
+  <div class="subsite-extra__header">
+    <h2 class="subsite-extra__title">
+      {{ subsite_homepage_link }}
+    </h2>
+    <div class="subsite-extra__header-toggle">
+      <button
+        class="subsite-extra__header-toggle-button"
+        aria-controls="subsite-extra-menu"
+        aria-expanded="false">
+        <span class="subsite-extra__header-toggle-text">{{ 'Section Menu'|t }}</span>
+      </button>
+    </div>
+  </div>
 {% endif %}
 
 {% import _self as menus %}
@@ -38,6 +48,7 @@
 
     {%
       set menu_classes = [
+        'subsite-extra-menu',
         'menu',
         'menu--' ~ menu_name,
       ]
@@ -53,7 +64,7 @@
 
   {% if items %}
     {% if menu_level == 0 %}
-      <ul{{ attributes.addClass(menu_classes) }}>
+      <ul{{ attributes.addClass(menu_classes).setAttribute('id', 'subsite-extra-menu') }}>
     {% else %}
       <ul{{ attributes.removeClass(menu_classes).addClass(sub_menu_classes) }}>
     {% endif %}

From 0d42c05dc8f9e6b7adfb156a2b1fe8ddb22a4c38 Mon Sep 17 00:00:00 2001
From: Mark Conroy <mark@mark.ie>
Date: Sun, 19 May 2024 16:09:28 +0100
Subject: [PATCH 8/9] linting the CSS

---
 css/components/subsites-menu.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/css/components/subsites-menu.css b/css/components/subsites-menu.css
index 9645aeb9..20bf5789 100644
--- a/css/components/subsites-menu.css
+++ b/css/components/subsites-menu.css
@@ -57,12 +57,12 @@
 
 .lgd-region--subsites-menu .subsite-extra__header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   gap: var(--spacing);
 }
 
-@media screen and (min-width: 48rem){
+@media screen and (min-width: 48rem) {
   .lgd-region--subsites-menu .subsite-extra__header-toggle {
     display: none;
   }
@@ -73,8 +73,8 @@
 }
 
 .lgd-region--subsites-menu .subsite-extra__title > a {
-  font-family: var(--subsite-extra-menu-title-font-family);
   color: var(--subsite-extra-menu-title-color);
+  font-family: var(--subsite-extra-menu-title-font-family);
 }
 
 .lgd-region--subsites-menu .menu {
@@ -118,8 +118,8 @@
 .lgd-region--subsites-menu .menu > .menu-item--active-trail a,
 .lgd-region--subsites-menu .menu > .menu-item a:focus,
 .lgd-region--subsites-menu .menu > .menu-item a:hover {
-  background-color: var(--subsite-extra-link-bg-color-hover);
   color: var(--subsite-extra-link-color-hover);
+  background-color: var(--subsite-extra-link-bg-color-hover);
 }
 
 /*
@@ -145,8 +145,8 @@
 }
 
 .subsite-extra--color-cool_cucumber {
-  --subsite-extra-color: #01642B;
-  --subsite-extra-color-contrast: #8AF670;
+  --subsite-extra-color: #01642b;
+  --subsite-extra-color-contrast: #8af670;
 }
 
 .subsite-extra--color-theme_b {

From 3d692723fbe27aadddd2d4ed764d0c736a196ca0 Mon Sep 17 00:00:00 2001
From: Mark Conroy <mark@mark.ie>
Date: Sun, 19 May 2024 16:11:53 +0100
Subject: [PATCH 9/9] formatting the JS

---
 js/subsites-menu.js | 44 ++++++++++++++++++++++++++------------------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/js/subsites-menu.js b/js/subsites-menu.js
index 312b7622..4480be7a 100644
--- a/js/subsites-menu.js
+++ b/js/subsites-menu.js
@@ -5,28 +5,34 @@
 (function subsitesMenuScript(Drupal) {
   Drupal.behaviors.subsitesMenu = {
     attach: function (context) {
-
       // This variable will be used later to make sure that the window
       // was actually resized.
       let windowWidth = window.innerWidth;
 
-      const subsitesMenuToggle = document.querySelector('.subsite-extra__header-toggle-button');
-      const subsitesMenu = document.querySelector('.subsite-extra-menu');
+      const subsitesMenuToggle = document.querySelector(
+        ".subsite-extra__header-toggle-button"
+      );
+      const subsitesMenu = document.querySelector(".subsite-extra-menu");
 
-      subsitesMenuToggle.addEventListener('click', function () {
-        subsitesMenuToggle.setAttribute('aria-expanded', subsitesMenuToggle.getAttribute('aria-expanded') === 'true' ? 'false' : 'true');
-        subsitesMenu.classList.toggle('subsite-extra-menu--active');
+      subsitesMenuToggle.addEventListener("click", function () {
+        subsitesMenuToggle.setAttribute(
+          "aria-expanded",
+          subsitesMenuToggle.getAttribute("aria-expanded") === "true"
+            ? "false"
+            : "true"
+        );
+        subsitesMenu.classList.toggle("subsite-extra-menu--active");
       });
 
       function handleReset() {
-        subsitesMenuToggle.setAttribute('aria-expanded', 'false');
-        subsitesMenu.classList.remove('subsite-extra-menu--active');
+        subsitesMenuToggle.setAttribute("aria-expanded", "false");
+        subsitesMenu.classList.remove("subsite-extra-menu--active");
       }
 
       // If the window is resized to more than 768px, reset the menu.
       function handleWindowResized() {
         if (window.innerWidth === windowWidth) {
-          return
+          return;
         } else {
           windowWidth = window.innerWidth;
         }
@@ -36,23 +42,25 @@
       }
 
       // Close the menu when the escape key is pressed.
-      context.addEventListener('keydown', function(e) {
-        if (e.key == 'Escape') {
+      context.addEventListener("keydown", function (e) {
+        if (e.key == "Escape") {
           e.preventDefault();
-          handleReset()
+          handleReset();
           subsitesMenuToggle.focus();
         }
       });
 
       // Close the menu when a click is made outside of it.
-      document.addEventListener('click', function(e) {
-        if (!e.target.closest('#lgd-header__nav--subsites-menu')){
+      document.addEventListener("click", function (e) {
+        if (!e.target.closest("#lgd-header__nav--subsites-menu")) {
           handleReset();
         }
       });
 
-      window.addEventListener('resize', Drupal.debounce(handleWindowResized, 50, false));
-
-    }
+      window.addEventListener(
+        "resize",
+        Drupal.debounce(handleWindowResized, 50, false)
+      );
+    },
   };
-}(Drupal));
+})(Drupal);