openproject/app/components/open_project/common/submenu_component.html.erb

<div class="op-submenu" data-controller="filter--filter-list" data-test-selector="op-submenu">
  <% if @searchable %>
    <div class="op-submenu--search">
      <%= render Primer::Alpha::TextField.new(
            name: "search",
            label: I18n.t("label_search"),
            placeholder: I18n.t("label_search_by_name"),
            "aria-label": I18n.t("label_search"),
            leading_visual: { icon: :search },
            visually_hide_label: true,
            classes: "op-submenu--search-input",
            data: {
              action: "input->filter--filter-list#filterLists",
              "filter--filter-list-target": "filter",
              "test-selector": "op-submenu--search-input"
            }
          ) %>

      <%= render Primer::Beta::Text.new(
            display: :none,
            classes: "op-submenu--search-no-results-container",
            data: {
              "test-selector": "op-submenu--search-no-results",
              "filter--filter-list-target": "noResultsText"
            }
          ) do
            I18n.t("js.autocompleter.notFoundText")
          end %>
    </div>
  <% end %>

  <div class="op-submenu--body" data-test-selector="op-submenu--body">
    <% if top_level_sidebar_menu_items.any? %>
      <ul class="op-submenu--items">
        <% top_level_sidebar_menu_items.first.children.each do |menu_item| %>
          <li class="op-submenu--item" data-filter--filter-list-target="searchItem">
            <% selected = menu_item.selected ? "selected" : "" %>
            <a class="op-submenu--item-action <%= selected %>" href="<%= menu_item.href %>" data-test-selector="op-submenu--item-action">
              <% if menu_item.icon %>
                <%= render Primer::Beta::Octicon.new(icon: menu_item.icon, classes: "op-submenu--item-icon") %>
              <% end %>
              <span class="op-submenu--item-title">
                <%= menu_item.title %>

                <% if menu_item.show_enterprise_icon %>
                  <%= render Primer::Beta::Octicon.new(icon: "op-enterprise-addons", "aria-label": I18n.t(:label_enterprise_edition), classes: "upsell-colored", ml: 2) %>
                <% end %>
              </span>

              <% if menu_item.count %>
                <%= render Primer::Beta::Counter.new(
                      count: menu_item.count,
                      scheme: :primary,
                      hide_if_zero: true,
                      round: true,
                      test_selector: "op-submenu--item-count"
                    ) %>
              <% end %>
            </a>
          </li>
        <% end %>
      </ul>
    <% end %>

    <% nested_sidebar_menu_items.each do |menu_item| %>
      <div data-controller="menus--submenu">
        <button class="op-submenu--title"
                type="button"
                data-action="click->menus--submenu#toggleContainer">
          <%= menu_item.header %>
          <span class="icon-small icon-arrow-up1"
                aria-hidden="true"
                data-menus--submenu-target="indicator">
          </span>
        </button>

        <ul class="op-submenu--items"
            data-menus--submenu-target="container">
          <% menu_item.children.each do |child_item| %>
            <li class="op-submenu--item" data-filter--filter-list-target="searchItem">
              <% selected = child_item.selected ? "selected" : "" %>
              <a class="op-submenu--item-action <%= selected %>" href="<%= child_item.href %>" data-test-selector="op-submenu--item-action">
                <% if child_item.icon %>
                  <%= render Primer::Beta::Octicon.new(icon: child_item.icon, classes: "op-submenu--item-icon") %>
                <% end %>
                <span class="op-submenu--item-title">
                  <%= child_item.title %>

                  <% if child_item.show_enterprise_icon %>
                    <%= render Primer::Beta::Octicon.new(icon: "op-enterprise-addons", "aria-label": I18n.t(:label_enterprise_edition), classes: "upsell-colored", ml: 2) %>
                  <% end %>

                  <% if child_item.favorited %>
                    <%= render Primer::Beta::Octicon.new(icon: "star-fill", "aria-label": I18n.t(:label_favorite), classes: %w[op-submenu--item-mark op-primer--star-icon], ml: 2) %>
                  <% end %>
                </span>

                <% if child_item.count %>
                  <%= render Primer::Beta::Counter.new(
                        count: child_item.count,
                        scheme: :secondary,
                        hide_if_zero: true,
                        round: true,
                        test_selector: "op-submenu--item-count"
                      ) %>
                <% end %>
              </a>
            </li>
          <% end %>
        </ul>
      </div>
    <% end %>
  </div>

  <% if @create_btn_options.present? %>
    <div class="op-submenu--footer">
      <%= render Primer::Beta::Button.new(
            scheme: :primary,
            tag: :a,
            href: @create_btn_options[:href],
            test_selector: "#{@create_btn_options[:module_key]}--create-button",
            classes: "op-submenu--footer-action"
          ) do |button|
            button.with_leading_visual_icon(icon: "plus")
            @create_btn_options[:btn_text].presence || I18n.t("label_#{@create_btn_options[:module_key]}")
          end %>
    </div>
  <% end %>
</div>