docmd-io--docmd/packages/ui/templates/partials/menubar.ejs

<%# ---------------------------------------------------------------
  # docmd : the zero-config documentation engine.
  # @website https://docmd.io
  # [docmd-source] - Please do not remove this header.
  # ---------------------------------------------------------------
%>

<% 
function menubarHref(item) { 
  return item.external ? item.url : buildRelativeUrl(item.url); 
}
function menubarTarget(item) { 
  // Only open in new tab if user explicitly adds external: prefix
  // Users who want their own docs site to open in new tab should add external: prefix
  return item.external ? ' target="_blank" rel="noopener noreferrer"' : '' ; 
}
%>

<div class="docmd-menubar">
  <div class="menubar-inner">
    <div class="menubar-left">
    <% if (menubarConfig.left && menubarConfig.left.length> 0) { %>
        <% menubarConfig.left.forEach(item=> { %>
          <% if (item.type==='title' ) { %>
            <a href="<%= menubarHref(item) %>" class="menubar-brand" <%- menubarTarget(item) %>>
              <% if (item.icon) { %>
                <%- renderIcon(item.icon, { class: 'menubar-icon' }) %>
              <% } %>
              <% if (item.text) { %>
                <span class="menubar-brand-text">
                  <%= item.text %>
                </span>
              <% } %>
            </a>
            <% } else if (item.type==='dropdown' ) { %>
              <div class="menubar-dropdown">
                <button class="menubar-dropdown-toggle" type="button" aria-expanded="false" aria-label="<%= item.text %> menu">
                  <% if (item.icon) { %>
                    <%- renderIcon(item.icon, { class: 'menubar-icon' }) %>
                  <% } %>
                  <span>
                    <%= item.text %>
                  </span>
                  <%- renderIcon('chevron-down', { class: 'menubar-chevron' }) %>
                </button>
                <ul class="menubar-dropdown-menu">
                  <% if (item.items && item.items.length> 0) { %>
                    <% item.items.forEach(sub=> { %>
                      <li>
                        <a href="<%= menubarHref(sub) %>" <%- menubarTarget(sub) %>>
                          <% if (sub.icon) { %>
                            <%- renderIcon(sub.icon, { class: 'menubar-icon' }) %>
                          <% } %>
                          <%= sub.text %>
                          <% if (sub.external) { %>
                            <%- renderIcon('external-link', { class: 'menubar-ext-icon' }) %>
                          <% } %>
                        </a>
                      </li>
                    <% }) %>
                  <% } %>
                </ul>
              </div>
              <% } else { %>
                <a href="<%= menubarHref(item) %>" class="menubar-link" <%- menubarTarget(item) %>>
                  <% if (item.icon) { %>
                    <%- renderIcon(item.icon, { class: 'menubar-icon' }) %>
                  <% } %>
                  <span>
                    <%= item.text %>
                  </span>
                  <% if (item.external) { %>
                    <%- renderIcon('external-link', { class: 'menubar-ext-icon' }) %>
                  <% } %>
                </a>
              <% } %>
        <% }) %>
    <% } %>
      </div>
      <div class="menubar-right">
        <% if (menubarConfig.right && menubarConfig.right.length> 0) { %>
          <% menubarConfig.right.forEach(item=> { %>
            <% if (item.type==='dropdown' ) { %>
              <div class="menubar-dropdown">
                <button class="menubar-dropdown-toggle" type="button" aria-expanded="false" aria-label="<%= item.text %> menu">
                  <% if (item.icon) { %>
                    <%- renderIcon(item.icon, { class: 'menubar-icon' }) %>
                  <% } %>
                  <span>
                    <%= item.text %>
                  </span>
                  <%- renderIcon('chevron-down', { class: 'menubar-chevron' }) %>
                </button>
                <ul class="menubar-dropdown-menu menubar-dropdown-right">
                  <% if (item.items && item.items.length> 0) { %>
                    <% item.items.forEach(sub=> { %>
                      <li>
                        <a href="<%= menubarHref(sub) %>" <%- menubarTarget(sub) %>>
                          <% if (sub.icon) { %>
                            <%- renderIcon(sub.icon, { class: 'menubar-icon' }) %>
                          <% } %>
                          <%= sub.text %>
                          <% if (sub.external) { %>
                            <%- renderIcon('external-link', { class: 'menubar-ext-icon' }) %>
                          <% } %>
                        </a>
                      </li>
                    <% }) %>
                  <% } %>
                </ul>
              </div>
            <% } else { %>
              <a href="<%= menubarHref(item) %>" class="menubar-link" <%- menubarTarget(item) %>>
                <% if (item.icon) { %>
                  <%- renderIcon(item.icon, { class: 'menubar-icon' }) %>
                <% } %>
                <span>
                  <%= item.text %>
                </span>
                <% if (item.external) { %>
                  <%- renderIcon('external-link', { class: 'menubar-ext-icon' }) %>
                <% } %>
              </a>
            <% } %>
          <% }) %>
        <% } %>
        <% if (optionsMenu && optionsMenu.position==='menubar' ) { %>
          <div class="menubar-options">
            <%- await include('options-menu', { optionsMenu, allLocales: locals.allLocales, activeLocale: locals.activeLocale, defaultLocale: locals.defaultLocale, config: locals.config, renderIcon, currentPagePath: locals.currentPagePath, localePrefix: locals.localePrefix, workspace: locals.workspace }) %>
          </div>
        <% } %>
    </div>
  </div>
</div>