chore: re-add header and main menu styling

Refs: #441

web/themes/custom/opdavies/templates/menu--main.html.twig

@@ -0,0 +1,52 @@
+{#
+/**
+ * @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.
+ */
+#}
+{% 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) }}
+
+{% macro menu_links(items, attributes, menu_level) %}
+  {% import _self as menus %}
+  {% if items %}
+    {% if menu_level == 0 %}
+      <ul{{ attributes.addClass('flex items-center mt-4 space-x-6 md:mt-0 md:flex-row') }}>
+    {% else %}
+      <ul>
+    {% endif %}
+    {% for item in items %}
+      {% set link_classes = [
+        'text-black dark:text-white border-b-3 py-2 hover:border-gray-300',
+        item.in_active_trail ? 'border-blue-primary dark:border-blue-400' : 'border-transparent',
+      ] %}
+
+      <li{{ item.attributes.addClass(link_classes) }}>
+        {{ link(item.title, item.url) }}
+        {% if item.below %}
+          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+        {% endif %}
+      </li>
+    {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}

web/themes/custom/opdavies/templates/page.html.twig

@@ -1,8 +1,20 @@
 <div class="min-h-screen font-sans text-base font-light text-gray-900 md:text-xl dark:bg-gray-900 dark:text-white">
-  {{ page.header }}
+  <div>
+    <div>
+      <div class="max-w-2xl px-4 py-4 mx-auto">
+        <div class="flex flex-col items-center justify-between md:flex-row">
+          <div>
+            {{ page.header }}
+          </div>
 
-  <div class="max-w-2xl px-4 py-10 mx-auto md:py-16">
-    <div id="main-content">
+          <div>
+            {{ page.primary_menu }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="main-content" class="max-w-2xl px-4 py-10 mx-auto md:py-16">
       {{ page.content }}
     </div>