From d666a4da635dfbc1448e40faa094cf43338b7dc4 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.dev>
Date: Sat, 13 Apr 2024 15:10:41 +0100
Subject: [PATCH] Style local tasks

---
 .../custom/opdavies/assets/tailwind.config.ts |  1 +
 .../navigation/menu-local-task.html.twig      | 23 +++++++++++++++++
 .../navigation/menu-local-tasks.html.twig     | 25 +++++++++++++++++++
 3 files changed, 49 insertions(+)
 create mode 100644 web/themes/custom/opdavies/templates/navigation/menu-local-task.html.twig
 create mode 100644 web/themes/custom/opdavies/templates/navigation/menu-local-tasks.html.twig

diff --git a/web/themes/custom/opdavies/assets/tailwind.config.ts b/web/themes/custom/opdavies/assets/tailwind.config.ts
index b068086..a935515 100644
--- a/web/themes/custom/opdavies/assets/tailwind.config.ts
+++ b/web/themes/custom/opdavies/assets/tailwind.config.ts
@@ -16,6 +16,7 @@ export default {
         400: "#60a5fa",
       },
       current: "currentColor",
+      gray: colours.stone,
       grey: colours.stone,
       inherit: "inherit",
       transparent: "transparent",
diff --git a/web/themes/custom/opdavies/templates/navigation/menu-local-task.html.twig b/web/themes/custom/opdavies/templates/navigation/menu-local-task.html.twig
new file mode 100644
index 0000000..0b20a88
--- /dev/null
+++ b/web/themes/custom/opdavies/templates/navigation/menu-local-task.html.twig
@@ -0,0 +1,23 @@
+{#
+/**
+ * @file
+ * Theme override for a local task link.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the wrapper element.
+ * - is_active: Whether the task item is an active tab.
+ * - link: A rendered link element.
+ *
+ * Note: This template renders the content for each task item in
+ * menu-local-tasks.html.twig.
+ *
+ * @see template_preprocess_menu_local_task()
+ */
+#}
+<li{{ attributes }}>
+  {% if is_active %}
+    {{ link|add_class('inline-block p-4 text-blue-primary border-b-2 border-blue-primary rounded-t-lg active dark:text-blue-400 dark:border-blue-400') }}
+  {% else %}
+    {{ link|add_class('inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300') }}
+  {% endif %}
+ </li>
diff --git a/web/themes/custom/opdavies/templates/navigation/menu-local-tasks.html.twig b/web/themes/custom/opdavies/templates/navigation/menu-local-tasks.html.twig
new file mode 100644
index 0000000..a276cee
--- /dev/null
+++ b/web/themes/custom/opdavies/templates/navigation/menu-local-tasks.html.twig
@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Theme override to display primary and secondary local tasks.
+ *
+ * Available variables:
+ * - primary: HTML list items representing primary tasks.
+ * - secondary: HTML list items representing secondary tasks.
+ *
+ * Each item in these variables (primary and secondary) can be individually
+ * themed in menu-local-task.html.twig.
+ */
+#}
+<div class="mb-12">
+  <div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
+    {% if primary %}
+      <h2 class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
+      <ul class="flex flex-wrap -mb-px">{{ primary }}</ul>
+    {% endif %}
+    {% if secondary %}
+      <h2 class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
+      <ul>{{ secondary }}</ul>
+    {% endif %}
+  </div>
+</div>