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>