diff --git a/web/themes/custom/opdavies/opdavies.info.yml b/web/themes/custom/opdavies/opdavies.info.yml index 8fa91925f..83f81fdf1 100644 --- a/web/themes/custom/opdavies/opdavies.info.yml +++ b/web/themes/custom/opdavies/opdavies.info.yml @@ -4,4 +4,5 @@ core: 8.x type: theme base theme: stable libraries: + - opdavies/global-scripts - opdavies/global-styling diff --git a/web/themes/custom/opdavies/opdavies.libraries.yml b/web/themes/custom/opdavies/opdavies.libraries.yml index 0b4a5c81a..9e821fceb 100644 --- a/web/themes/custom/opdavies/opdavies.libraries.yml +++ b/web/themes/custom/opdavies/opdavies.libraries.yml @@ -2,3 +2,8 @@ global-styling: css: base: dist/tailwind.css: {} +global-scripts: + js: + 'https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js': + type: external + minified: true diff --git a/web/themes/custom/opdavies/package-lock.json b/web/themes/custom/opdavies/package-lock.json index 153c85505..32696965e 100644 --- a/web/themes/custom/opdavies/package-lock.json +++ b/web/themes/custom/opdavies/package-lock.json @@ -196,6 +196,11 @@ "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", "dev": true }, + "alpinejs": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-2.3.5.tgz", + "integrity": "sha512-/zQiqmiM3gBVKD+yeP7p9XzOXfhxxDMAfoaJRpXiAJykGaeSe3L+bvp/a6uRQMygPV+UUdgAk8fdfToJttRcUQ==" + }, "amdefine": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", diff --git a/web/themes/custom/opdavies/templates/block/block--system-branding-block.html.twig b/web/themes/custom/opdavies/templates/block/block--system-branding-block.html.twig index e9065aec5..f933a33bc 100644 --- a/web/themes/custom/opdavies/templates/block/block--system-branding-block.html.twig +++ b/web/themes/custom/opdavies/templates/block/block--system-branding-block.html.twig @@ -14,15 +14,27 @@ */ #} {% block content %} -
- {% if site_logo %} - - {% endif %} +
+ {% if site_logo %} + + {{ 'Home'|t }} + + {% endif %} {% if site_name %} -
- {{ site_name }} +
+ + {{ site_name }} +
{% endif %} {% if site_slogan %} diff --git a/web/themes/custom/opdavies/templates/block/block--system-menu-block.html.twig b/web/themes/custom/opdavies/templates/block/block--system-menu-block.html.twig new file mode 100644 index 000000000..7664a9828 --- /dev/null +++ b/web/themes/custom/opdavies/templates/block/block--system-menu-block.html.twig @@ -0,0 +1,52 @@ +{# +/** + * @file + * Theme override for a menu block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - provider: The module or other provider that provided this block plugin. + * - Block plugin specific settings will also be stored here. + * - content: The content of this block. + * - attributes: HTML attributes for the containing element. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: HTML attributes for the title element. + * - content_attributes: HTML attributes for the content element. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * + * Headings should be used on navigation menus that consistently appear on + * multiple pages. When this menu block's label is configured to not be + * displayed, it is automatically made invisible using the 'visually-hidden' CSS + * class, which still keeps it visible for screen-readers and assistive + * technology. Headings allow screen-reader and keyboard only users to navigate + * to or skip the links. + * See http://juicystudio.com/article/screen-readers-display-none.php and + * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information. + */ +#} +{% set heading_id = attributes.id ~ '-menu'|clean_id %} + diff --git a/web/themes/custom/opdavies/templates/layout/page.html.twig b/web/themes/custom/opdavies/templates/layout/page.html.twig index c007d7154..fa2ad7a86 100644 --- a/web/themes/custom/opdavies/templates/layout/page.html.twig +++ b/web/themes/custom/opdavies/templates/layout/page.html.twig @@ -45,47 +45,77 @@ * @ingroup themeable */ #} -
+
+
+ {# /.layout-container #} +
+
diff --git a/web/themes/custom/opdavies/templates/menu/menu--main.html.twig b/web/themes/custom/opdavies/templates/menu/menu--main.html.twig new file mode 100644 index 000000000..8e047e33e --- /dev/null +++ b/web/themes/custom/opdavies/templates/menu/menu--main.html.twig @@ -0,0 +1,58 @@ +{# +/** + * @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 %} + + {% else %} +
    + {% endif %} + {% for item in items %} + + {% set linkClasses = ['w-full flex items-center mx-4 mt-1 -mb-px py-3 px-4 block rounded text-sm text-white no-underline hover:underline focus:outline-none focus:underline md:py-1 md:px-2 md:mx-2 md:mt-0 md:mr-0'] %} + {% if item.in_active_trail %} + {% set linkClasses = linkClasses|merge(['cursor-default bg-blue-500 hover:border-blue-600 hover:no-underline md:bg-blue-700']) %} + {% endif %} + {{ link(item.title, item.url, { class: linkClasses|join(' ') }) }} + {% if item.below %} + {{ menus.menu_links(item.below, attributes, menu_level + 1) }} + {% endif %} + + {% endfor %} +
+
+ {% endif %} +{% endmacro %}