jekyll-theme-centos 0.0.0

data/_includes/base/heading_anchor.html.liquid

@@ -0,0 +1,67 @@
+{% comment %}
+================================================================================
+Template: Heading Anchor Component
+Purpose: Loads heading-anchor.js which wires click-to-copy behaviour on anchor
+icons that jekyll-link-decorator injects inside h1–h6 elements. Clicking an
+anchor icon copies the full page URL (origin + pathname + fragment) to the
+clipboard, with a transient fa-check icon as visual feedback.
+
+Recommended Usage (in head.html.liquid):
+  {%- include base/heading_anchor.html.liquid %}
+
+The heading anchor icons themselves are injected by the jekyll-link-decorator
+Ruby plugin. This include only loads the JavaScript that powers copy behaviour.
+
+Required Inputs (from HTML elements produced by the plugin):
+- class="heading-anchor"   : Selector used to attach click handlers
+- data-copy-anchor="#id"   : Fragment to append to the current page URL
+
+Optional Inputs (from data objects):
+- reset_delay              : Milliseconds before icon resets (default from schema)
+- copy_success_message     : Not consumed by JS directly; available for reference
+
+Data Source Hierarchy (in priority order):
+1. include.data                    - Explicitly passed configuration
+2. page.with_heading_anchor_data   - Page front matter
+3. site.data.heading_anchor        - Site configuration
+4. site.data.base.heading_anchor   - Theme defaults
+
+Dependencies:
+jekyll-link-decorator gem, FontAwesome 6+, Clipboard API (modern browsers)
+================================================================================
+{% endcomment %}
+
+{%- assign with_heading_anchor = include.with_heading_anchor
+| default: page.with_heading_anchor
+| default: site.with_heading_anchor
+-%}
+
+{%- assign with_heading_anchor_data = include.data
+| default: page.with_heading_anchor_data
+| default: site.data.heading_anchor
+| default: site.data.base.heading_anchor
+-%}
+
+{%- assign with_heading_anchor_schema = site.data.base.heading_anchor_schema.properties.with_heading_anchor_data.properties -%}
+
+{%- if with_heading_anchor -%}
+
+{%- comment %} === Presentation === {% endcomment %}
+
+{%- comment %} --- Defaults --- {% endcomment %}
+{%- assign heading_anchor_reset_delay       = with_heading_anchor_data.reset_delay          | default: with_heading_anchor_schema.reset_delay.default -%}
+{%- assign heading_anchor_success_message   = with_heading_anchor_data.copy_success_message | default: with_heading_anchor_schema.copy_success_message.default -%}
+
+{%- comment %} --- HTML --- {% endcomment %}
+<!-- Load Heading Anchor functionality with configuration via data attributes -->
+<script id="centos-heading-anchor"
+        {%- if with_heading_anchor_data.reset_delay %}
+        data-reset-delay="{{ heading_anchor_reset_delay }}"
+        {%- endif %}
+        {%- if with_heading_anchor_data.copy_success_message %}
+        data-success-message="{{ heading_anchor_success_message }}"
+        {%- endif %}
+        src="{{ site.baseurl }}/assets/js/base/heading-anchor.min.js"
+        defer></script>
+
+{%- endif -%}

data/_includes/base/highlight.html.liquid

@@ -0,0 +1,84 @@
+{% comment %}
+================================================================================
+Template: Highlight.js Code Syntax Highlighting Component
+Purpose: Loads Highlight.js library CSS and JavaScript from CDN with
+copy-to-clipboard functionality for code blocks.
+================================================================================
+
+Design Logic:
+- CDN-based library: Highlight.js from cdnjs
+- Copy plugin: additional plugin for code clipboard functionality
+- Format switching: separate head (CSS) and script (JS) includes
+- Automatic initialization: on document load
+- Configurable theme: different color schemes available
+- 190+ languages supported
+
+Optional Inputs:
+- type: "head" for CSS, "script" for JavaScript
+- theme: Syntax highlighting theme (default: "default")
+- version: Highlight.js version (e.g., "11.9.0")
+- data: Highlight.js configuration object
+
+Data Source Hierarchy (priority):
+1. include.data
+2. page.with_highlight_data
+3. site.data.highlight
+4. site.data.base.highlight
+================================================================================
+{% endcomment %}
+
+{%- assign with_highlight = include.with_highlight
+| default: page.with_highlight
+%}
+
+{%- assign with_highlight_data = include.data
+| default: page.with_highlight_data
+| default: site.data.highlight
+| default: site.data.base.highlight
+%}
+
+{%- assign with_highlight_schema = site.data.base.highlight_schema.properties.with_highlight_data.properties %}
+
+{%- if with_highlight %}
+
+{%- assign highlight_theme          = with_highlight_data.theme                         | default: with_highlight_schema.theme.default %}
+{%- assign highlight_version        = with_highlight_data.version                       | default: with_highlight_schema.version.default %}
+{%- assign highlight_css_sri        = with_highlight_data.css_integrity                 | default: with_highlight_schema.css_integrity.default %}
+{%- assign highlight_script_sri     = with_highlight_data.script_integrity              | default: with_highlight_schema.script_integrity.default %}
+{%- assign copy_version             = with_highlight_data.copy_version                  | default: with_highlight_schema.copy_version.default %}
+{%- assign copy_script_sri          = with_highlight_data.copy_script_integrity         | default: with_highlight_schema.copy_script_integrity.default %}
+{%- assign copy_css_sri             = with_highlight_data.copy_css_integrity            | default: with_highlight_schema.copy_css_integrity.default %}
+{%- assign copy_icon_svg            = with_highlight_data.copy_button_icons.copy.svg    | default: with_highlight_schema.copy_button_icons.properties.copy.properties.svg.default %}
+{%- assign success_icon_svg         = with_highlight_data.copy_button_icons.success.svg | default: with_highlight_schema.copy_button_icons.properties.success.properties.svg.default %}
+
+{%- capture html_highlight_head %}
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ highlight_version }}/styles/{{ highlight_theme | replace_first: 'base16-', 'base16/' | default: 'default' }}.min.css" integrity="{{ highlight_css_sri }}" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link rel="stylesheet" href="https://unpkg.com/highlightjs-copy@{{ copy_version }}/dist/highlightjs-copy.min.css" integrity="{{ copy_css_sri }}" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <!-- Highlight.js Copy Button Icon Customization (from schema) -->
+  <style>
+    .hljs-copy-button:not([data-copied="true"])::before {
+      mask: url('data:image/svg+xml;utf-8,{{ copy_icon_svg }}');
+    }
+    .hljs-copy-button[data-copied='true']::after {
+      background-image: url('data:image/svg+xml;utf-8,{{ success_icon_svg }}');
+    }
+  </style>
+{%- endcapture %}
+
+{%- capture html_highlight_script %}
+  <!-- Highlight.js Library and Copy Plugin -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ highlight_version }}/highlight.min.js" integrity="{{ highlight_script_sri }}" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
+  <script src="https://unpkg.com/highlightjs-copy@{{ copy_version }}/dist/highlightjs-copy.min.js" integrity="{{ copy_script_sri }}" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
+  <!-- Initialize Highlight.js -->
+  <script src="{{ site.baseurl }}/assets/js/base/highlight.min.js" defer></script>
+{%- endcapture %}
+
+{%- assign type = include.type %}
+{%- case type %}
+{%- when "head" %}
+  {{ html_highlight_head }}
+{%- when "script" %}
+  {{ html_highlight_script }}
+{%- endcase %}
+
+{%- endif %}

data/_includes/base/image.html.liquid

@@ -0,0 +1,42 @@
+{% comment %}
+================================================================================
+Template: Figure Image Component
+Purpose: Renders responsive images in semantic HTML figure elements
+with optional links and captions.
+================================================================================
+
+Required Inputs:
+- file: Image filename (relative to /assets/img/)
+- alt: Alt text for accessibility
+
+Optional Inputs:
+- link: URL to wrap image in a link
+- caption: Caption text for <figcaption>
+- extraclasses: Additional CSS classes for image element
+
+Features:
+- Semantic HTML with <figure> and <figcaption> elements
+- Responsive images with img-fluid Bootstrap class
+- Figure ID generated from alt text (slugified)
+- Lazy loading enabled by default
+================================================================================
+{% endcomment %}
+
+{% if include.alt %}
+  {% assign figid = include.alt %}
+{% else %}
+  {% assign figid = include.file %}
+{% endif %}
+
+<figure id="fig-{{ figid | slugify }}" class="figure">
+  {% if include.link %}
+    <a href="{{ include.link }}">
+      <img loading="lazy" src="{{ site.baseurl }}/assets/img/{{ include.file }}" class="figure-img img-fluid rounded{% if include.extraclasses %} {{ include.extraclasses }}{% endif %}" alt="{{ include.alt }}"/>
+    </a>
+  {% else %}
+    <img loading="lazy" src="{{ site.baseurl }}/assets/img/{{ include.file }}" class="figure-img img-fluid rounded{% if include.extraclasses %} {{ include.extraclasses }}{% endif %}" alt="{{ include.alt }}"/>
+  {% endif %}
+  {% if include.caption %}
+    <figcaption class="figure-caption text-center">{{ include.caption }}</figcaption>
+  {% endif %}
+</figure>

data/_includes/base/link.html.liquid

@@ -0,0 +1,129 @@
+{% comment %}
+================================================================================
+Template: Link Component
+Purpose: Renders HTML anchor tags with icons, styling, and accessibility.
+Handles internal/external links and anchor navigation.
+================================================================================
+
+Design Logic:
+- Flexible link resolution for internal and external URLs
+- Optional icon integration with positioning control
+- Customizable styling through color schemes or CSS classes
+- Built-in accessibility support via ARIA attributes
+- Anchor generation from link name when no URL provided
+
+Required Inputs:
+- name: Display text for the link
+
+Optional Inputs:
+- link: URL (internal/external). Omit to generate anchor from name.
+- target: Link target (default: unset). Use '_blank' for new window.
+- color: Color scheme (default: 'primary')
+- icon: Icon class (Font Awesome or similar)
+- icon_position: Icon placement: 'start' (default) or 'end'
+- class: Custom CSS classes to override default styling
+- aria_label: Accessible label for screen readers
+- role: ARIA role attribute
+- data_bs_toggle: Bootstrap toggle ('tooltip' or 'popover')
+- data_bs_title: Bootstrap tooltip/popover text content
+- data_bs_content: Bootstrap popover body text (required when data_bs_toggle is 'popover')
+- data_bs_placement: Bootstrap tooltip/popover placement ('top', 'bottom', 'start', 'end')
+- data_bs_trigger: Bootstrap tooltip/popover trigger events
+- data_bs_delay: Bootstrap tooltip/popover show/hide delay (number or JSON)
+- data_bs_html: Allow HTML in tooltip/popover content ('true' or 'false')
+- data_bs_custom_class: Custom CSS class for tooltip/popover element
+- data_bs_offset: Tooltip/popover position offset (comma-separated pair)
+
+Security & External Links:
+- target="_blank" automatically adds rel="noopener noreferrer"
+- External link icon injection is handled by jekyll-link-decorator
+================================================================================
+{% endcomment %}
+
+{%- if page.with_link -%}
+{%- capture html_link -%}
+  {%- comment %} === Data source selection === {% endcomment %}
+  {%- assign link              = include.link              | default: nil %}
+  {%- assign name              = include.name              | default: nil %}
+  {%- assign target            = include.target            | default: nil %}
+  {%- assign color             = include.color             | default: "primary" %}
+  {%- assign role              = include.role              | default: nil %}
+  {%- assign icon              = include.icon              | default: nil %}
+  {%- assign icon_position     = include.icon_position     | default: "start" %}
+  {%- assign class             = include.class             | default: nil %}
+  {%- assign aria_label        = include.aria_label        | default: nil %}
+  {%- assign data_bs_toggle       = include.data_bs_toggle       | default: nil %}
+  {%- assign data_bs_title        = include.data_bs_title        | default: nil %}
+  {%- assign data_bs_content      = include.data_bs_content      | default: nil %}
+  {%- assign data_bs_placement    = include.data_bs_placement    | default: nil %}
+  {%- assign data_bs_trigger      = include.data_bs_trigger      | default: nil %}
+  {%- assign data_bs_delay        = include.data_bs_delay        | default: nil %}
+  {%- assign data_bs_html         = include.data_bs_html         | default: nil %}
+  {%- assign data_bs_custom_class = include.data_bs_custom_class | default: nil %}
+  {%- assign data_bs_offset       = include.data_bs_offset       | default: nil %}
+  {%- assign anchor            = nil %}
+  {%- assign rel_attr          = nil %}
+
+  {%- comment %} === Data processing === {% endcomment %}
+  {%- if link != nil -%}
+    {%- assign link_char1 = link | slice: 0, 1 -%}
+    {%- assign link_char2 = link | slice: 0, 2 -%}
+    {%- if link contains "://" or link contains "mailto:" or link contains "tel:" or link_char1 == "#" or link_char2 == "//" -%}
+      {%- assign href_value = link %}
+    {%- else -%}
+      {%- assign href_value = site.baseurl | append: link %}
+    {%- endif -%}
+  {%- else -%}
+    {%- assign href_value = site.baseurl %}
+    {%- assign anchor = name | strip | replace: ' ', '-' | remove: '"' | remove: "'" | remove: '?' | remove: '&' | remove: '#' | remove: '/' | downcase %}
+  {%- endif -%}
+
+  {%- if class != nil -%}
+    {%- assign link_class = class %}
+  {%- else -%}
+    {%- capture link_class -%}link link-{{ color }} link-offset-3 link-offset-3-hover link-underline-{{ color }} link-underline-opacity-0 link-underline-opacity-100-hover{%- endcapture -%}
+  {%- endif -%}
+
+  {%- comment %} --- Security attributes for external links --- {% endcomment %}
+  {%- if target == "_blank" -%}
+    {%- assign rel_attr = "noopener noreferrer" %}
+  {%- endif -%}
+
+  {%- comment %} --- Link name with optional icon --- {% endcomment %}
+  {%- assign final_icon = icon %}
+  {%- capture link_name -%}
+    {%- if final_icon != nil -%}
+      {%- if name != nil and icon_position == "end" -%}
+        {{ name }}<i class="{{ final_icon }} ms-1" aria-hidden="true"></i>
+      {%- elsif name != nil and icon_position == "start" -%}
+        <i class="{{ final_icon }} me-1" aria-hidden="true"></i>{{ name }}
+      {%- else -%}
+        <i class="{{ final_icon }}" aria-hidden="true"></i>
+      {%- endif -%}
+    {%- else -%}
+      {{ name }}
+    {%- endif -%}
+  {%- endcapture -%}
+
+  {%- comment %} --- HTML: Anchor tag with attributes --- {% endcomment %}
+  <a
+    href="{{ href_value }}{% if anchor != nil and anchor != "" %}#{{ anchor }}{% endif %}"
+    class="{{ link_class }}"
+    {%- if target != nil %} target="{{ target }}"{% endif %}
+    {%- if rel_attr != nil %} rel="{{ rel_attr }}"{% endif %}
+    {%- if role != nil %} role="{{ role }}"{% endif %}
+    {%- if aria_label != nil %} aria-label="{{ aria_label }}"{% endif %}
+    {%- if data_bs_toggle != nil %} data-bs-toggle="{{ data_bs_toggle }}"{% endif %}
+    {%- if data_bs_title != nil %} data-bs-title="{{ data_bs_title }}"{% endif %}
+    {%- if data_bs_content != nil %} data-bs-content="{{ data_bs_content }}"{% endif %}
+    {%- if data_bs_placement != nil %} data-bs-placement="{{ data_bs_placement }}"{% endif %}
+    {%- if data_bs_trigger != nil %} data-bs-trigger="{{ data_bs_trigger }}"{% endif %}
+    {%- if data_bs_delay != nil %} data-bs-delay="{{ data_bs_delay }}"{% endif %}
+    {%- if data_bs_html != nil %} data-bs-html="{{ data_bs_html }}"{% endif %}
+    {%- if data_bs_custom_class != nil %} data-bs-custom-class="{{ data_bs_custom_class }}"{% endif %}
+    {%- if data_bs_offset != nil %} data-bs-offset="{{ data_bs_offset }}"{% endif %}>
+    {{- link_name | strip_newlines | strip -}}
+  </a>
+{%- endcapture -%}
+{{- html_link }}
+{%- endif -%}

data/_includes/base/locales.html.liquid

@@ -0,0 +1,78 @@
+{% comment %}
+================================================================================
+Template: Language Selector (Locales Dropdown)
+Purpose: Renders dropdown menu for language/locale selection with current
+language detection and visual indicators. Generates links to same page in
+different language versions.
+================================================================================
+
+Configuration: Reads from unified `with_locales_data` schema via Jekyll defaults.
+- Enable with: with_locales: true in _config.yml defaults or page front matter
+- Locales defined in: with_locales_data.locales
+- Uses site.data.base.languages for language name lookups
+- Automatically detects current page locale and highlights in menu
+- Always includes English (en) even if not in locales list
+
+Features:
+- Displays current language name in button with locale code
+- Shows all available languages in dropdown (including English)
+- Shows checkmark next to current language in dropdown
+- Marks current language link with active class
+- Displays language code in parentheses (e.g., "Español (es)")
+
+Locale Detection:
+- page.data['locale'] is set by localization_gettext.rb plugin in LocalizedPage.setup_localized_data()
+- Set for each localized page variant (e.g., /es/ pages have locale='es')
+- Defaults to 'en' if not set (English/canonical pages)
+================================================================================
+{% endcomment %}
+
+{%- assign with_locales = include.with_locales
+| default: page.with_locales
+%}
+
+{%- assign with_locales_data = include.data
+| default: page.with_locales_data
+| default: site.data.locales
+| default: site.data.base.locales
+%}
+
+{%- assign with_locales_schema = site.data.base.locales_schema.properties.with_locales_data.properties %}
+
+{%- if with_locales %}
+
+  {%- comment %} Build array of all available locales (always include English) {%- endcomment %}
+  {%- assign all_locales = with_locales_data.locales | default: with_locales_schema.locales.default %}
+  {%- unless all_locales contains "en" %}
+    {%- assign all_locales = all_locales | unshift: "en" %}
+  {%- endunless %}
+
+  {%- comment %} Detect current page locale from URL: /es/..., /fr/..., etc. {%- endcomment %}
+  {%- assign url_parts = page.url | split: "/" %}
+  {%- assign current_locale = "en" %}
+  {%- if url_parts[1] and all_locales contains url_parts[1] %}
+    {%- assign current_locale = url_parts[1] %}
+  {%- endif %}
+
+  <p class="mb-2">Change page language:</p>
+  <div class="dropdown mb-4">
+    <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Languages">
+      <i class="fa-solid fa-language me-1"></i> {{ site.data.base.languages[current_locale] }} ({{ current_locale }})
+    </button>
+    <ul class="dropdown-menu">
+      {%- for locale in all_locales %}
+        {%- comment %} DEBUG: page.url={{ page.url }}, current_locale={{ current_locale }}, target_locale={{ locale }} {%- endcomment %}
+        {%- assign locale_url = page.url | switch_locale_url: locale %}
+
+        {%- if locale == current_locale %}
+          <li class="small"><a class="dropdown-item active" href="{{ site.baseurl }}{{ locale_url }}" aria-current="true">
+              {{ site.data.base.languages[locale] }} ({{ locale }}) <i class="fa-solid fa-check ms-3"></i>
+            </a></li>
+          {%- else %}
+            <li class="small"><a class="dropdown-item" href="{{ site.baseurl }}{{ locale_url }}">{{ site.data.base.languages[locale] }} ({{ locale }})</a></li>
+          {%- endif %}
+        {%- endfor %}
+    </ul>
+  </div>
+
+{%- endif %}

data/_includes/base/navbar.html.liquid

@@ -0,0 +1,121 @@
+{% comment %}
+================================================================================
+Template: Navigation Bar Component
+Purpose: Renders fixed-top navigation bar with branding, responsive toggle,
+and hierarchical menu items with dropdown support.
+================================================================================
+
+Design Logic:
+- Fixed top positioning: always visible during scroll
+- Responsive hamburger menu: collapses on mobile
+- Dropdown menus: multi-level navigation
+- Brand image and manifestation text support
+- Filtered navitems by visible_on='navbar'
+
+Required Inputs:
+- brand_image: Logo image filename
+- navitems: Array of navigation items
+
+Optional Inputs:
+- brand_image_class, brand_image_height: Logo styling
+- brand_manifestation: Tagline/subtitle text
+- class: Container CSS classes
+- navitems[].menu: Submenu array for dropdowns
+
+Data Source Hierarchy (priority):
+1. include.data
+2. page.with_navbar_data
+3. site.data.navbar
+4. site.data.base.navbar
+================================================================================
+{% endcomment %}
+
+{%- assign with_navbar = include.with_navbar
+| default: page.with_navbar
+%}
+
+{%- assign with_navbar_data = include.data
+| default: page.with_navbar_data
+| default: site.data.navbar
+| default: site.data.base.navbar
+%}
+
+{%- if with_navbar %}
+
+{%- assign with_navbar_schema = site.data.base.navbar_schema.properties.with_navbar_data.properties %}
+
+{%- assign navbar_class                     = with_navbar_data.class                                    | default: with_navbar_schema.class.default %}
+{%- assign navbar_brand_image               = with_navbar_data.brand_image                              | default: with_navbar_schema.brand_image.default %}
+{%- assign navbar_brand_image_class         = with_navbar_data.brand_image_class                        | default: with_navbar_schema.brand_image_class.default %}
+{%- assign navbar_brand_image_height        = with_navbar_data.brand_image_height                       | default: with_navbar_schema.brand_image_height.default %}
+{%- assign navbar_brand_manifestation       = with_navbar_data.brand_manifestation                      | default: with_navbar_schema.brand_manifestation.default %}
+{%- assign navbar_brand_manifestation_class = with_navbar_data.brand_manifestation_class                | default: with_navbar_schema.brand_manifestation_class.default %}
+{%- assign navbar_navitems                  = with_navbar_data.navitems | where: "visible_on", "navbar" | default: with_navbar_schema.navitems.default %}
+
+<nav class="navbar bg-dark fixed-top navbar-expand-lg shadow{% if navbar_class != "" %} {{ navbar_class }}{% endif %}" aria-label="{{ include.arialable | default: 'navbar'}}" data-bs-theme="dark">
+  <div class="container">
+
+    {%- if navbar_brand_image != "" %}
+      {%- assign navbar_brand_link = "/" | locale_url: page.locale %}
+      <a class="navbar-brand" href="{{ site.baseurl }}{{ navbar_brand_link }}">
+
+        <img
+            class="d-inline-block align-text-middle me-2{% if navbar_brand_image_class != "" %} {{ navbar_brand_image_class }}{% endif %}"
+            src="{{ site.baseurl }}/assets/img/{{ navbar_brand_image }}"
+            height="{{ navbar_brand_image_height }}"
+            alt="{{ site.title }}" />
+
+        {%- if navbar_brand_manifestation != "" %}
+          <span class="d-inline-block align-text-middle fs-6 border-start border-1 border-light opacity-75 ps-3{% if navbar_brand_manifestation_class != "" %} {{ navbar_brand_manifestation_class }}{% endif %}">{{ navbar_brand_manifestation }}</span>
+        {%- endif %}
+
+      </a>
+    {%- endif %}
+
+    {% if navbar_navitems.size > 0 %}
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarContent">
+        <ul class="navbar-nav ms-auto">
+          {%- for navitem in navbar_navitems %}
+            {%- assign navitem_link = navitem.link | locale_url: page.locale %}
+            {%- if navitem.menu.size == 0 %}
+              <li class="nav-item">
+                {%- include base/link.html.liquid
+                class = "nav-link"
+                name  = navitem.name
+                link  = navitem_link
+                role  = "presentation"
+                icon  = navitem.icon
+                %}
+              </li>
+            {%- else %}
+              <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-{{ forloop.index }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  <i class="{{ navitem.icon }} me-1" aria-hidden="true"></i>{{ navitem.name }}
+                </a>
+                <ul class="dropdown-menu dropdown-menu-dark shadow">
+                  {%- for dropdownitem in navitem.menu %}
+                    {%- assign dropdownitem_link = dropdownitem.link | locale_url: page.locale %}
+                    <li>
+                      {%- include base/link.html.liquid
+                      class = "dropdown-item"
+                      name  = dropdownitem.name
+                      link  = dropdownitem_link
+                      role  = "presentation"
+                      %}
+                    </li>
+                  {%- endfor %}
+                </ul>
+              </li>
+            {%- endif %}
+          {%- endfor %}
+        </ul>
+      </div>
+    {% endif %}
+
+  </div>
+</nav>
+{%- endif -%}