Mega Menu Pro

{%- comment -%}
  modblo. Mega Menu Pro
  Replaces Buddha Menu / Qikify Menu apps.
  Reads from a Shopify Linklist (configured in Navigation settings).
  Top-level items render as nav buttons; second-level items render as columns;
  third-level items render as featured columns with optional images.
{%- endcomment -%}

{%- assign linklist = linklists[section.settings.linklist] -%}

<header class="modblo-mm" data-modblo-mm
        style="--modblo-mm-bg: {{ section.settings.bg }};
               --modblo-mm-fg: {{ section.settings.fg }};
               --modblo-mm-accent: {{ section.settings.accent }};
               --modblo-mm-panel: {{ section.settings.panel_bg }};">
  <div class="modblo-mm__inner page-width">
    <a href="/" class="modblo-mm__logo">
      {%- if section.settings.logo -%}
        {{ section.settings.logo | image_url: width: 240 | image_tag: loading: 'eager', widths: '120,240', sizes: '120px', class: 'modblo-mm__logo-img' }}
      {%- else -%}
        <span>{{ shop.name }}</span>
      {%- endif -%}
    </a>

    <nav class="modblo-mm__nav" aria-label="Primary">
      <ul class="modblo-mm__top">
        {%- for link in linklist.links -%}
          <li class="modblo-mm__top-item {% if link.links.size > 0 %}has-mega{% endif %}">
            <a href="{{ link.url }}" class="modblo-mm__top-link">
              {{ link.title }}
              {%- if link.links.size > 0 -%}
                <svg class="modblo-mm__caret" viewBox="0 0 12 12" width="10" height="10" aria-hidden="true">
                  <path d="M3 5l3 3 3-3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              {%- endif -%}
            </a>

            {%- if link.links.size > 0 -%}
              <div class="modblo-mm__panel" role="region">
                <div class="modblo-mm__panel-inner page-width">
                  <div class="modblo-mm__cols">
                    {%- for col in link.links -%}
                      <div class="modblo-mm__col">
                        <p class="modblo-mm__col-h">
                          <a href="{{ col.url }}">{{ col.title }}</a>
                        </p>
                        {%- if col.links.size > 0 -%}
                          <ul class="modblo-mm__col-list">
                            {%- for child in col.links -%}
                              <li><a href="{{ child.url }}">{{ child.title }}</a></li>
                            {%- endfor -%}
                          </ul>
                        {%- endif -%}
                      </div>
                    {%- endfor -%}

                    {%- comment -%} Featured promo card, rendered for the first top-level group only {%- endcomment -%}
                    {%- if forloop.first and section.settings.promo_image -%}
                      <a href="{{ section.settings.promo_url }}" class="modblo-mm__promo">
                        {{ section.settings.promo_image | image_url: width: 480 | image_tag: loading: 'lazy', widths: '240,480', sizes: '240px', class: 'modblo-mm__promo-img' }}
                        <div class="modblo-mm__promo-body">
                          <p class="modblo-mm__promo-eyebrow">{{ section.settings.promo_eyebrow }}</p>
                          <p class="modblo-mm__promo-title">{{ section.settings.promo_title }}</p>
                          <span class="modblo-mm__promo-cta">{{ section.settings.promo_cta }} →</span>
                        </div>
                      </a>
                    {%- endif -%}
                  </div>
                </div>
              </div>
            {%- endif -%}
          </li>
        {%- endfor -%}
      </ul>
    </nav>

    <div class="modblo-mm__actions">
      <a href="/account" aria-label="Account" class="modblo-mm__icon">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
        </svg>
      </a>
      <a href="/cart" aria-label="Cart ({{ cart.item_count }} items)" class="modblo-mm__icon modblo-mm__cart">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/>
        </svg>
        {%- if cart.item_count > 0 -%}
          <span class="modblo-mm__cart-count">{{ cart.item_count }}</span>
        {%- endif -%}
      </a>
      <button type="button" class="modblo-mm__burger" data-modblo-mm-toggle aria-label="Open menu" aria-expanded="false">
        <span></span><span></span><span></span>
      </button>
    </div>
  </div>

  {%- comment -%} Mobile drawer, same linklist, accordion {%- endcomment -%}
  <div class="modblo-mm__mobile" data-modblo-mm-mobile>
    <ul>
      {%- for link in linklist.links -%}
        <li>
          {%- if link.links.size > 0 -%}
            <details>
              <summary>{{ link.title }}</summary>
              <ul>
                {%- for col in link.links -%}
                  <li><a href="{{ col.url }}">{{ col.title }}</a>
                    {%- if col.links.size > 0 -%}
                      <ul>
                        {%- for child in col.links -%}
                          <li><a href="{{ child.url }}">{{ child.title }}</a></li>
                        {%- endfor -%}
                      </ul>
                    {%- endif -%}
                  </li>
                {%- endfor -%}
              </ul>
            </details>
          {%- else -%}
            <a href="{{ link.url }}">{{ link.title }}</a>
          {%- endif -%}
        </li>
      {%- endfor -%}
    </ul>
  </div>
</header>

<style>
  .modblo-mm {
    background: var(--modblo-mm-bg, #fff); color: var(--modblo-mm-fg, #0b0b0c);
    border-bottom: 1px solid color-mix(in oklab, var(--modblo-mm-fg) 8%, transparent);
    position: sticky; top: 0; z-index: 50;
  }
  .modblo-mm__inner {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 32px;
    max-width: 1280px; margin: 0 auto; padding: 14px 24px;
  }
  .modblo-mm__logo { color: inherit; text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
  .modblo-mm__logo-img { height: 28px; width: auto; }

  .modblo-mm__top { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; justify-content: center; }
  .modblo-mm__top-item { position: static; }
  .modblo-mm__top-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: inherit; text-decoration: none; padding: 10px 14px;
    font-size: 14px; font-weight: 500; border-radius: 8px;
    transition: background .2s, color .2s;
  }
  .modblo-mm__top-link:hover { background: color-mix(in oklab, var(--modblo-mm-fg) 6%, transparent); }
  .modblo-mm__caret { transition: transform .2s; opacity: .6; }
  .modblo-mm__top-item.has-mega:hover > .modblo-mm__top-link .modblo-mm__caret { transform: rotate(180deg); }

  .modblo-mm__panel {
    position: absolute; left: 0; right: 0;
    background: var(--modblo-mm-panel, #fff);
    border-top: 1px solid color-mix(in oklab, var(--modblo-mm-fg) 8%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--modblo-mm-fg) 8%, transparent);
    box-shadow: 0 24px 48px -24px rgba(0,0,0,.18);
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
    pointer-events: none;
  }
  .modblo-mm__top-item.has-mega:hover > .modblo-mm__panel,
  .modblo-mm__top-item.has-mega:focus-within > .modblo-mm__panel {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  }
  .modblo-mm__panel-inner { max-width: 1280px; margin: 0 auto; padding: 32px 24px; }
  .modblo-mm__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }

  .modblo-mm__col-h {
    text-transform: uppercase; letter-spacing: .14em;
    font-size: 11px; font-weight: 700; opacity: .65; margin: 0 0 12px;
  }
  .modblo-mm__col-h a { color: inherit; text-decoration: none; }
  .modblo-mm__col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .modblo-mm__col-list a {
    color: inherit; text-decoration: none; font-size: 14px;
    transition: color .15s; display: inline-block;
  }
  .modblo-mm__col-list a:hover { color: var(--modblo-mm-accent, #6366f1); }

  .modblo-mm__promo {
    grid-column: span 2; display: flex; gap: 16px;
    background: color-mix(in oklab, var(--modblo-mm-fg) 4%, transparent);
    border-radius: 16px; padding: 16px;
    color: inherit; text-decoration: none;
    transition: background .2s;
  }
  .modblo-mm__promo:hover { background: color-mix(in oklab, var(--modblo-mm-fg) 7%, transparent); }
  .modblo-mm__promo-img { width: 140px; height: 140px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
  .modblo-mm__promo-body { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
  .modblo-mm__promo-eyebrow {
    text-transform: uppercase; letter-spacing: .14em;
    font-size: 10px; font-weight: 700; color: var(--modblo-mm-accent, #6366f1); margin: 0;
  }
  .modblo-mm__promo-title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 0; line-height: 1.2; }
  .modblo-mm__promo-cta { font-size: 13px; opacity: .7; margin-top: 6px; }

  .modblo-mm__actions { display: flex; align-items: center; gap: 8px; }
  .modblo-mm__icon {
    color: inherit; padding: 9px; border-radius: 8px; display: inline-grid; place-items: center;
    text-decoration: none; position: relative; transition: background .2s;
  }
  .modblo-mm__icon:hover { background: color-mix(in oklab, var(--modblo-mm-fg) 6%, transparent); }
  .modblo-mm__cart-count {
    position: absolute; top: 2px; right: 2px;
    background: var(--modblo-mm-accent, #6366f1); color: #fff;
    font-size: 10px; font-weight: 700; min-width: 16px; height: 16px;
    border-radius: 999px; padding: 0 4px;
    display: grid; place-items: center;
  }

  .modblo-mm__burger { display: none; background: transparent; border: 0; cursor: pointer; padding: 10px; }
  .modblo-mm__burger span { display: block; width: 20px; height: 2px; background: currentColor; margin: 4px 0; border-radius: 2px; transition: transform .2s, opacity .2s; }

  .modblo-mm__mobile {
    display: none; padding: 16px 24px;
    border-top: 1px solid color-mix(in oklab, var(--modblo-mm-fg) 8%, transparent);
    background: var(--modblo-mm-panel, #fff);
  }
  .modblo-mm.is-mobile-open .modblo-mm__mobile { display: block; }
  .modblo-mm__mobile ul { list-style: none; padding: 0; margin: 0; }
  .modblo-mm__mobile li { padding: 8px 0; border-bottom: 1px solid color-mix(in oklab, var(--modblo-mm-fg) 6%, transparent); }
  .modblo-mm__mobile li:last-child { border-bottom: 0; }
  .modblo-mm__mobile a, .modblo-mm__mobile summary { color: inherit; text-decoration: none; font-size: 15px; cursor: pointer; }
  .modblo-mm__mobile summary::-webkit-details-marker { display: none; }
  .modblo-mm__mobile summary { display: flex; justify-content: space-between; align-items: center; }
  .modblo-mm__mobile summary::after { content: '+'; font-size: 18px; opacity: .5; }
  .modblo-mm__mobile details[open] summary::after { content: '−'; }
  .modblo-mm__mobile details ul { padding-left: 16px; margin-top: 8px; }
  .modblo-mm__mobile details ul ul { padding-left: 16px; opacity: .8; }

  @media (max-width: 900px) {
    .modblo-mm__nav { display: none; }
    .modblo-mm__burger { display: block; }
    .modblo-mm__inner { grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 16px; }
  }
</style>

<script>
  (function () {
    var nav = document.querySelector('[data-modblo-mm]');
    if (!nav) return;
    var toggle = nav.querySelector('[data-modblo-mm-toggle]');
    if (toggle) {
      toggle.addEventListener('click', function () {
        var open = nav.classList.toggle('is-mobile-open');
        toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
        toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
      });
    }

    // Close mega-menu panels on Escape for keyboard users
    nav.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') {
        var active = document.activeElement;
        if (active && nav.contains(active)) active.blur();
      }
    });
  })();
</script>

{% schema %}
{
  "name": "Mega Menu Pro",
  "tag": "header",
  "settings": [
    { "type": "header", "content": "Logo" },
    { "type": "image_picker", "id": "logo", "label": "Logo (optional)" },
    { "type": "header", "content": "Navigation" },
    { "type": "link_list", "id": "linklist", "label": "Linklist", "default": "main-menu",
      "info": "Three-level deep menu supported. Top-level → mega columns → links." },
    { "type": "header", "content": "Featured promo card" },
    { "type": "image_picker", "id": "promo_image", "label": "Promo image" },
    { "type": "text", "id": "promo_eyebrow", "label": "Eyebrow", "default": "New collection" },
    { "type": "text", "id": "promo_title", "label": "Title", "default": "Spring 2026, now shipping" },
    { "type": "text", "id": "promo_cta", "label": "CTA label", "default": "Shop the collection" },
    { "type": "url", "id": "promo_url", "label": "Promo link" },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "panel_bg", "label": "Mega panel background", "default": "#ffffff" },
    { "type": "color", "id": "accent", "label": "Accent", "default": "#6366f1" }
  ],
  "presets": [{ "name": "Mega Menu Pro" }]
}
{% endschema %}