@omega.js/desktop 0.1.0

package/dist/assets/themes/base/_includes/frontend/sections/footer.html

@@ -0,0 +1,154 @@
+{% comment %}
+  Shared base footer, omega-* markup: brand block + link columns on one grid,
+  then ONE hairline base row where every control (legal links, language,
+  appearance) shares the same quiet 1.75rem scale. Section data:
+  json-in-_includes (a consumer src/_includes/frontend/sections/footer.json
+  overrides the packaged one) — same binding pattern as admin/sections/sidebar.
+{% endcomment %}
+{% assign data = site.data._includes.frontend.sections.footer %}
+<footer class="omega-footer mt-auto" role="contentinfo" aria-label="Site footer">
+  <div class="container">
+    <div class="omega-footer__grid">
+      <!-- Brand block: lockup, one-liner, socials -->
+      <div class="omega-footer__brand">
+        {% capture logo_href %}{% assign temp_href = data.logo.href | default: resolved.config.brand.href | default: '/' %}{% if temp_href and temp_href != '' and temp_href != 'null' %}{{ temp_href }}{% else %}javascript:void(0){% endif %}{% endcapture %}
+        {% comment %} The VISIBLE logo prefers the bridged vector when the mint produced one (#467) —
+          `brand.images.brandmark` stays the raster OG/social and payment sync need, and an
+          authored `data.logo.src` still outranks both. {% endcomment %}
+        {% capture logo_src %}{% if data.logo.src %}{{ data.logo.src }}{% else %}{{ assetManifest.brandmarkSvg | default: resolved.config.brand.images.brandmark | default: null }}{% endif %}{% endcapture %}
+        {% capture logo_text %}{{ data.logo.text | default: resolved.config.brand.name | omega_liquify }}{% endcapture %}
+        {% capture logo_description %}{{ data.logo.description | default: resolved.config.brand.description | omega_liquify }}{% endcapture %}
+        {% assign logo_description = logo_description | strip %}
+        {% comment %} A data value that LIQUIFIES to empty (e.g. a descriptor binding whose key the brand never set) still needs the brand fallback — `default:` only sees the raw string {% endcomment %}
+        {% if logo_description == '' or logo_description == 'null' %}{% assign logo_description = resolved.config.brand.description %}{% endif %}
+        {% capture logo_class %}{{ data.logo.class }}{% endcapture %}
+
+        <a class="omega-nav__brand" href="{{ logo_href }}">
+          {% if logo_src and logo_src != '' and logo_src != 'null' %}
+            <img src="{{ site.omega.placeholder.src }}" data-lazy="@src {{ logo_src }}" alt="{{ logo_text }} Logo" class="{{ logo_class }}" style="height: 1.5rem; width: auto;"/>
+          {% endif %}
+          {% if logo_text and logo_text != '' and logo_text != 'null' %}
+            <span>{{ logo_text }}</span>
+          {% endif %}
+        </a>
+        {% if logo_description and logo_description != '' and logo_description != 'null' %}
+          <p class="omega-footer__desc">{{ logo_description }}</p>
+        {% endif %}
+
+        {% comment %} The brand's `socials` config block IS the list (#462) — never a
+        default platform set. An entry omega_social can't resolve a profile URL for
+        (blank handle, redirect-only, unknown platform) prints nothing, and a brand
+        that declares none keeps the whole row out of the markup. {% endcomment %}
+        {% if data.socials.enabled %}
+          {% capture social_links %}
+            {% for social in resolved.config.socials %}
+              {% assign platform = social[0] %}
+              {% capture social_href %}{% omega_social platform %}{% endcapture %}
+              {% iftruthy social_href %}
+                <a href="{{ social_href }}" class="omega-footer__social-link" aria-label="{{ platform | capitalize }}">
+                  <i class="fa-solid fa-{{ platform }} fa-sm"></i>
+                </a>
+              {% endiftruthy %}
+            {% endfor %}
+          {% endcapture %}
+          {% assign social_links = social_links | strip %}
+          {% if social_links != '' %}
+            <div class="omega-footer__social" aria-label="Social links">
+              {{ social_links }}
+            </div>
+          {% endif %}
+        {% endif %}
+      </div>
+
+      <!-- Link columns -->
+      {% if data.links and data.links.size > 0 %}
+        <div class="omega-footer__cols">
+          {% for link_group in data.links %}
+            {% capture group_label %}{{ link_group.label | default: 'Links' }}{% endcapture %}
+            <nav class="omega-footer__col" aria-label="{{ group_label }}">
+              <div class="omega-footer__head">{{ group_label }}</div>
+              <ul class="list-unstyled mb-0">
+                {% for link in link_group.links %}
+                  {% capture link_classes %}omega-footer__link{% if link.classes %} {{ link.classes | join: ' ' }}{% endif %}{% endcapture %}
+                  {% capture link_attributes %}{% if link.attributes %}{% for attr in link.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+                  {% capture link_icon %}{% if link.icon %}{{ resolved.config.icons[link.icon] }}{% endif %}{% endcapture %}
+                  {% capture link_href %}{% if link.href and link.href != '' and link.href != 'null' %}{{ link.href }}{% else %}javascript:void(0){% endif %}{% endcapture %}
+                  <li>
+                    <a class="{{ link_classes }}" href="{{ link_href }}"{{ link_attributes }}>
+                      {{ link_icon }}
+                      {{ link.label }}
+                    </a>
+                  </li>
+                {% endfor %}
+              </ul>
+            </nav>
+          {% endfor %}
+        </div>
+      {% endif %}
+    </div>
+
+    <!-- Base row: copyright left, matched-scale utilities right -->
+    <div class="omega-footer__base">
+      {% if data.copyright.enabled %}
+        <span class="omega-footer__copyright">
+          {% if data.copyright.text %}
+            {{ data.copyright.text | omega_liquify }}
+          {% else %}
+            {% comment %} A sub-brand credits its parent (brand.company), linked
+            when company.url names one — no parent configured (or a company that
+            IS the brand) keeps the plain line {% endcomment %}
+            {% assign parent_company = resolved.config.brand.company %}
+            {% if parent_company and parent_company != '' and parent_company != 'null' and parent_company != resolved.config.brand.name %}
+              {% if resolved.config.company.url %}
+                {% capture parent_mark %}<a href="{{ resolved.config.company.url }}">{{ parent_company }}</a>{% endcapture %}
+              {% else %}
+                {% capture parent_mark %}{{ parent_company }}{% endcapture %}
+              {% endif %}
+              © {{ site.omega.date.year }} {{ resolved.config.brand.name }} by {{ parent_mark }}. All rights reserved.
+            {% else %}
+              © {{ site.omega.date.year }} {{ resolved.config.brand.name }}. All rights reserved.
+            {% endif %}
+          {% endif %}
+        </span>
+      {% endif %}
+
+      {% comment %} Framework attribution — never brand config: the build's own license verdict (#320) is the only switch {% endcomment %}
+      {% if site.license.attribution == 'shown' %}
+        <span class="omega-footer__powered">
+          <i class="fa-solid fa-bolt fa-sm"></i>
+          <span>Powered by <a href="https://omegajs.dev" target="_blank" rel="noopener">omegajs.dev</a></span>
+        </span>
+      {% endif %}
+
+      <div class="omega-footer__tools">
+        {% if data.legal.enabled %}
+          <nav class="omega-footer__legal" aria-label="Legal">
+            <a href="/terms">Terms</a>
+            <a href="/privacy">Privacy</a>
+            <a href="/cookies">Cookies</a>
+          </nav>
+        {% endif %}
+
+        <!-- Language (dropup) — the rows render CLIENT-SIDE from the page's own
+             hreflang alternates (core/js/core/language-switcher.js). Those tags
+             are stitched post-translation and name only the languages actually
+             PRODUCED for this page, so the menu can never offer a copy that was
+             never written. Fewer than two languages → this block stays hidden. -->
+        <div class="dropup omega-language-dropdown" data-omega-language-switcher hidden>
+          <button class="omega-footer__pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="fa-solid fa-language fa-sm"></i>
+            <span>Language</span>
+          </button>
+          <ul class="dropdown-menu" data-omega-language-list></ul>
+        </div>
+
+        <!-- Appearance (segmented; core appearance.js stamps .active/aria-pressed on data-appearance-set) -->
+        <div class="omega-footer__seg" role="group" aria-label="Appearance" data-omega-segmented>
+          <button type="button" data-appearance-set="light" aria-label="Light theme" aria-pressed="false"><i class="fa-solid fa-sun fa-sm"></i></button>
+          <button type="button" data-appearance-set="dark" aria-label="Dark theme" aria-pressed="false"><i class="fa-solid fa-moon fa-sm"></i></button>
+          <button type="button" data-appearance-set="system" aria-label="System theme" aria-pressed="false"><i class="fa-solid fa-circle-half-stroke fa-sm"></i></button>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>

package/dist/assets/themes/base/_includes/frontend/sections/nav.html

@@ -0,0 +1,276 @@
+{% comment %} Section data: json-in-_includes (a consumer src/_includes/frontend/sections/nav.json overrides the packaged one) — same binding pattern as admin/sections/sidebar {% endcomment %}
+{% assign data = site.data._includes.frontend.sections.nav %}
+
+<!-- Shared base marketing nav: transparent over the hero, glassy after scroll.
+     The shared motion engine stamps data-omega-scrolled (no theme JS). -->
+<header class="omega-nav" data-omega-scroll-watch="24">
+  <nav class="navbar navbar-expand-lg">
+    <div class="container">
+      <!-- Logo -->
+      {% capture logo_href %}{% assign temp_href = data.logo.href | default: resolved.config.brand.href | default: '/' %}{% if temp_href and temp_href != '' and temp_href != 'null' %}{{ temp_href }}{% else %}javascript:void(0){% endif %}{% endcapture %}
+      {% comment %} The VISIBLE logo prefers the bridged vector when the mint produced one (#467) —
+        `brand.images.brandmark` stays the raster OG/social and payment sync need, and an
+        authored `data.logo.src` still outranks both. {% endcomment %}
+      {% capture logo_src %}{% if data.logo.src %}{{ data.logo.src }}{% else %}{{ assetManifest.brandmarkSvg | default: resolved.config.brand.images.brandmark | default: null }}{% endif %}{% endcapture %}
+      {% capture logo_text %}{{ data.logo.text | default: resolved.config.brand.name | omega_liquify }}{% endcapture %}
+      {% capture logo_class %}{{ data.logo.class }}{% endcapture %}
+
+      <a class="navbar-brand omega-nav__brand py-0" href="{{ logo_href }}">
+        {% iftruthy logo_src %}
+          {% if data.logo.type == 'wordmark' %}
+            <img src="{{ logo_src | omega_cachebreak }}" alt="{{ logo_text }} Logo" class="{{ logo_class }}" style="height: 1.75rem; width: auto;"/>
+          {% else %}
+            <img src="{{ logo_src | omega_cachebreak }}" alt="{{ logo_text }} Logo" class="{{ logo_class }}"/>
+          {% endif %}
+        {% endiftruthy %}
+        {% if data.logo.type != 'wordmark' %}
+          {% iftruthy logo_text %}
+            <span>{{ logo_text }}</span>
+          {% endiftruthy %}
+        {% endif %}
+      </a>
+
+      <!-- Mobile controls wrapper -->
+      <div class="d-lg-none d-flex align-items-center ms-auto">
+        <!-- Mobile toggle -->
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-label="Toggle navigation">
+          <i class="fa-solid fa-bars fa-md"></i>
+        </button>
+
+        <!-- Mobile account dropdown (directly to the right of toggler) -->
+        {% for action in data.actions %}
+          {% if action.type == 'account' %}
+            <div class="ms-2">
+              {% include global/sections/account.html size="sm" attributes=action.attributes %}
+            </div>
+          {% endif %}
+        {% endfor %}
+      </div>
+
+      <!-- Navigation -->
+      <div class="collapse navbar-collapse justify-content-between" id="navbarNav">
+        <!-- Centered Navigation Links -->
+        <ul class="navbar-nav mx-auto">
+          {% for link in data.links %}
+            {% if link.dropdown %}
+              {% capture link_active %}{% urlmatches link.href, "active" %}{% endcapture %}
+              {% capture link_class %}omega-nav__link dropdown-toggle {{ link_active }} {% if link.class %}{{ link.class }}{% endif %}{% endcapture %}
+              {% capture link_attributes %}{% if link.attributes %}{% for attr in link.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+              <li class="nav-item dropdown">
+                <button class="{{ link_class }}" type="button" data-bs-toggle="dropdown" {{ link_attributes }}>
+                  <span class="d-inline-flex align-items-center">
+                    {% if link.icon %}
+                      <i class="fa-solid fa-{{ link.icon }} fa-sm me-2"></i>
+                    {% endif %}
+                    <span>{{ link.label }}</span>
+                  </span>
+                </button>
+                <ul class="dropdown-menu">
+                  {% for child in link.dropdown %}
+                    {% capture child_active %}{% urlmatches child.href, "active" %}{% endcapture %}
+                    {% capture child_class %}dropdown-item {{ child_active }} {% if child.class %}{{ child.class }}{% endif %}{% endcapture %}
+                    {% capture child_attributes %}{% if child.attributes %}{% for attr in child.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+                    {% capture child_content %}
+                      <span class="d-inline-flex align-items-center">
+                        {% if child.icon %}
+                          <i class="fa-solid fa-{{ child.icon }} fa-sm me-2"></i>
+                        {% endif %}
+                        <span>{{ child.label }}</span>
+                      </span>
+                    {% endcapture %}
+
+                    {% if child.divider %}
+                      <li><hr class="dropdown-divider" {{ child_attributes }}/></li>
+                    {% else %}
+                      <li>
+                        {% iftruthy child.href %}
+                          <a class="{{ child_class }}" href="{{ child.href }}" {{ child_attributes }}>
+                            {{ child_content }}
+                          </a>
+                        {% endiftruthy %}
+                        {% iffalsy child.href %}
+                          <button class="{{ child_class }}" type="button" {{ child_attributes }}>
+                            {{ child_content }}
+                          </button>
+                        {% endiffalsy %}
+                      </li>
+                    {% endif %}
+                  {% endfor %}
+                </ul>
+              </li>
+            {% else %}
+              {% capture link_active %}{% urlmatches link.href, "active" %}{% endcapture %}
+              {% capture link_class %}omega-nav__link {{ link_active }} {% if link.class %}{{ link.class }}{% endif %}{% endcapture %}
+              {% capture link_attributes %}{% if link.attributes %}{% for attr in link.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+              {% capture link_content %}
+                <span class="d-inline-flex align-items-center">
+                  {% if link.icon %}
+                    <i class="fa-solid fa-{{ link.icon }} fa-sm me-2"></i>
+                  {% endif %}
+                  <span>{{ link.label }}</span>
+                </span>
+              {% endcapture %}
+              <li class="nav-item">
+                {% iftruthy link.href %}
+                  <a class="{{ link_class }}" href="{{ link.href }}" {{ link_attributes }}>
+                    {{ link_content }}
+                  </a>
+                {% endiftruthy %}
+                {% iffalsy link.href %}
+                  <button class="{{ link_class }}" type="button" {{ link_attributes }}>
+                    {{ link_content }}
+                  </button>
+                {% endiffalsy %}
+              </li>
+            {% endif %}
+          {% endfor %}
+        </ul>
+
+        <!-- Right-aligned Actions (desktop only) -->
+        <div class="d-none d-lg-inline-flex align-items-center gap-2">
+          {% for action in data.actions %}
+            {% if action.type == 'account' %}
+              <!-- Account dropdown with profile picture (desktop) -->
+              {% include global/sections/account.html size="md" attributes=action.attributes %}
+            {% elsif action.dropdown %}
+              <!-- Regular button dropdown -->
+              {% capture action_class %}btn dropdown-toggle {% if action.class %}{{ action.class }}{% endif %}{% endcapture %}
+              {% capture action_attributes %}{% if action.attributes %}{% for attr in action.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+              <div class="dropdown">
+                <button class="{{ action_class }}" type="button" data-bs-toggle="dropdown" {{ action_attributes }}>
+                  <span class="d-inline-flex align-items-center">
+                    {% if action.icon %}
+                      <i class="fa-solid fa-{{ action.icon }} fa-sm me-2"></i>
+                    {% endif %}
+                    <span>{{ action.label }}</span>
+                  </span>
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end">
+                  {% for child in action.dropdown %}
+                    {% capture child_active %}{% urlmatches child.href, "active" %}{% endcapture %}
+                    {% capture child_class %}dropdown-item {{ child_active }} {% if child.class %}{{ child.class }}{% endif %}{% endcapture %}
+                    {% capture child_attributes %}{% if child.attributes %}{% for attr in child.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+                    {% capture child_content %}
+                      <span class="d-inline-flex align-items-center">
+                        {% if child.icon %}
+                          <i class="fa-solid fa-{{ child.icon }} fa-sm me-2"></i>
+                        {% endif %}
+                        <span>{{ child.label }}</span>
+                      </span>
+                    {% endcapture %}
+
+                    {% if child.divider %}
+                      <li><hr class="dropdown-divider" {{ child_attributes }}/></li>
+                    {% else %}
+                      <li>
+                        {% iftruthy child.href %}
+                          <a class="{{ child_class }}" href="{{ child.href }}" {{ child_attributes }}>
+                            {{ child_content }}
+                          </a>
+                        {% endiftruthy %}
+                        {% iffalsy child.href %}
+                          <button class="{{ child_class }}" type="button" {{ child_attributes }}>
+                            {{ child_content }}
+                          </button>
+                        {% endiffalsy %}
+                      </li>
+                    {% endif %}
+                  {% endfor %}
+                </ul>
+              </div>
+            {% else %}
+              {% capture action_class %}btn {% if action.class %}{{ action.class }}{% endif %}{% endcapture %}
+              {% capture action_attributes %}{% if action.attributes %}{% for attr in action.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+              {% capture action_content %}
+                <span class="d-inline-flex align-items-center">
+                  {% if action.icon %}
+                    <i class="fa-solid fa-{{ action.icon }} fa-sm me-2"></i>
+                  {% endif %}
+                  <span>{{ action.label }}</span>
+                </span>
+              {% endcapture %}
+              {% iftruthy action.href %}
+                <a class="{{ action_class }}" href="{{ action.href }}" role="button" {{ action_attributes }}>
+                  {{ action_content }}
+                </a>
+              {% endiftruthy %}
+              {% iffalsy action.href %}
+                <button class="{{ action_class }}" type="button" {{ action_attributes }}>
+                  {{ action_content }}
+                </button>
+              {% endiffalsy %}
+            {% endif %}
+          {% endfor %}
+        </div>
+
+        <!-- Non-account actions for mobile (inside collapsible) -->
+        <div class="d-lg-none omega-nav__mobile-actions">
+          {% for action in data.actions %}
+            {% if action.type != 'account' %}
+              {% capture action_class %}btn w-100 mt-2 {% if action.class %}{{ action.class }}{% endif %}{% endcapture %}
+              {% capture action_attributes %}{% if action.attributes %}{% for attr in action.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+              {% capture action_content %}
+                <span class="d-inline-flex align-items-center">
+                  {% if action.icon %}
+                    <i class="fa-solid fa-{{ action.icon }} fa-sm me-2"></i>
+                  {% endif %}
+                  <span>{{ action.label }}</span>
+                </span>
+              {% endcapture %}
+              {% if action.dropdown %}
+                <div class="dropdown">
+                  <button class="{{ action_class }} dropdown-toggle" type="button" data-bs-toggle="dropdown" {{ action_attributes }}>
+                    {{ action_content }}
+                  </button>
+                  <ul class="dropdown-menu dropdown-menu-end w-100">
+                    {% for child in action.dropdown %}
+                      {% capture child_active %}{% urlmatches child.href, "active" %}{% endcapture %}
+                      {% capture child_class %}dropdown-item {{ child_active }} {% if child.class %}{{ child.class }}{% endif %}{% endcapture %}
+                      {% capture child_attributes %}{% if child.attributes %}{% for attr in child.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+                      {% capture child_content %}
+                        <span class="d-inline-flex align-items-center">
+                          {% if child.icon %}
+                            <i class="fa-solid fa-{{ child.icon }} fa-sm me-2"></i>
+                          {% endif %}
+                          <span>{{ child.label }}</span>
+                        </span>
+                      {% endcapture %}
+
+                      {% if child.divider %}
+                        <li><hr class="dropdown-divider" {{ child_attributes }}/></li>
+                      {% else %}
+                        <li>
+                          {% iftruthy child.href %}
+                            <a class="{{ child_class }}" href="{{ child.href }}" {{ child_attributes }}>
+                              {{ child_content }}
+                            </a>
+                          {% endiftruthy %}
+                          {% iffalsy child.href %}
+                            <button class="{{ child_class }}" type="button" {{ child_attributes }}>
+                              {{ child_content }}
+                            </button>
+                          {% endiffalsy %}
+                        </li>
+                      {% endif %}
+                    {% endfor %}
+                  </ul>
+                </div>
+              {% else %}
+                {% iftruthy action.href %}
+                  <a class="{{ action_class }}" href="{{ action.href }}" role="button" {{ action_attributes }}>
+                    {{ action_content }}
+                  </a>
+                {% endiftruthy %}
+                {% iffalsy action.href %}
+                  <button class="{{ action_class }}" type="button" {{ action_attributes }}>
+                    {{ action_content }}
+                  </button>
+                {% endiffalsy %}
+              {% endif %}
+            {% endif %}
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </nav>
+</header>

package/dist/assets/themes/base/_includes/global/sections/account.html

@@ -0,0 +1,72 @@
+<!-- Account Dropdown (shared across frontend nav, backend topbar, admin topbar) -->
+{% assign account_data = site.data._includes.global.sections.account %}
+{% assign avatar_size = include.size | default: "md" %}
+
+{% capture action_attributes %}{% if include.attributes %}{% for attr in include.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+
+<div class="dropdown animation-slide-up d-inline-flex" data-omega-bind="@show auth.user" hidden>
+  <button class="p-0 border-0 bg-transparent" type="button" data-bs-toggle="dropdown" {{ action_attributes }} aria-expanded="false">
+    <span class="d-flex align-items-center">
+      <span class="position-relative d-inline-flex">
+        <span class="avatar avatar-{{ avatar_size }} rounded-circle bg-secondary bg-opacity-10 border d-flex align-items-center justify-content-center overflow-hidden d-inline-flex">
+          <img src="{{ site.omega.placeholder.src }}" data-omega-bind="@attr src auth.user.photoURL" alt="{{ resolved.config.brand.name }} profile picture"/>
+        </span>
+        <!-- Active status indicator -->
+        <span class="position-absolute bottom-0 end-0 p-1 bg-success border border-2 border-white avatar avatar-2xs rounded-circle mb-0">
+          <span class="visually-hidden">Active status</span>
+        </span>
+      </span>
+    </span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-end shadow" style="min-width: 280px;">
+    <!-- User info header (clickable) -->
+    <li>
+      <a href="/dashboard/account#profile" class="dropdown-item px-3 py-2 text-decoration-none">
+        <div class="d-flex align-items-center">
+          <div class="position-relative me-3">
+            <div class="avatar avatar-md rounded-circle bg-secondary bg-opacity-10 border d-flex align-items-center justify-content-center overflow-hidden">
+              <img src="{{ site.omega.placeholder.src }}" data-omega-bind="@attr src auth.user.photoURL" alt="{{ resolved.config.brand.name }} profile picture"/>
+            </div>
+            <!-- Active status indicator -->
+            <span class="position-absolute bottom-0 end-0 p-1 bg-success border border-2 border-white avatar avatar-2xs rounded-circle mb-0">
+              <span class="visually-hidden">Active status</span>
+            </span>
+          </div>
+          <div class="flex-grow-1 overflow-hidden">
+            <div class="fw-semibold text-truncate text-body" data-omega-bind="@text auth.user.displayName">User</div>
+            <div class="small text-muted text-truncate" data-omega-bind="@text auth.user.email">email@example.com</div>
+          </div>
+        </div>
+      </a>
+    </li>
+    <!-- Dropdown items -->
+    {% for child in account_data.dropdown %}
+      {% capture child_attributes %}{% if child.attributes %}{% for attr in child.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+      {% capture child_active %}{% urlmatches child.href, "active" %}{% endcapture %}
+      {% capture child_class %}dropdown-item d-flex align-items-center text-body {{ child_active }} {% if child.class %}{{ child.class }}{% endif %}{% endcapture %}
+      {% capture child_content %}
+        {% if child.icon %}
+          <i class="fa-solid fa-{{ child.icon }} fa-md me-3"></i>
+        {% endif %}
+        <span>{{ child.label }}</span>
+      {% endcapture %}
+
+      {% if child.divider %}
+        <li><hr class="dropdown-divider" {{ child_attributes }}/></li>
+      {% else %}
+        <li>
+          {% iftruthy child.href %}
+            <a class="{{ child_class }}" href="{{ child.href }}" {{ child_attributes }}>
+              {{ child_content }}
+            </a>
+          {% endiftruthy %}
+          {% iffalsy child.href %}
+            <button class="{{ child_class }}" type="button" {{ child_attributes }}>
+              {{ child_content }}
+            </button>
+          {% endiffalsy %}
+        </li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+</div>