block--system-menu-block--main.html.twig

{#
/**
 * @file
 * Default theme implementation for a menu block.
 *
 * Available variables:
 * - plugin_id: The ID of the block implementation.
 * - label: The configured label of the block if visible.
 * - configuration: A list of the block's configuration values.
 *   - label: The configured label for the block.
 *   - label_display: The display settings for the label.
 *   - provider: The module or other provider that provided this block plugin.
 *   - Block plugin specific settings will also be stored here.
 * - content: The content of this block.
 * - attributes: HTML attributes for the containing element.
 *   - id: A valid HTML ID and guaranteed unique.
 * - title_attributes: HTML attributes for the title element.
 * - content_attributes: HTML attributes for the content element.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the main title tag that appears in the template.
 *
 * Headings should be used on navigation menus that consistently appear on
 * multiple pages. When this menu block's label is configured to not be
 * displayed, it is automatically made invisible using the 'visually-hidden' CSS
 * class, which still keeps it visible for screen-readers and assistive
 * technology. Headings allow screen-reader and keyboard only users to navigate
 * to or skip the links.
 * See http://juicystudio.com/article/screen-readers-display-none.php and
 * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
 *
 * @ingroup themeable
 */
  {{ content }}
#}

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav me-auto ms-auto mb-2 mb-lg-0">

    <li class="nav-item">

      <a class="nav-link active dropdown-toggle" aria-current="page" href="javascript:void(0)" id="navbarDropdown1" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="icon">
            <img src="{{ file_url(base_path ~ directory) }}/assets/img/icons/Products.svg" class="img-fluid" alt="Menu">
          </span>
        <span class="label">Products</span>
      </a>

      <div class="dropdown-menu mega-menu-dropdown mega-menu-products" aria-labelledby="navbarDropdown1">

        <div class="container">

          {{ drupal_view('home_product_list', 'embed_product_mega_menu') }}

        </div><!--container-->

      </div><!--dropdown-menu-->

    </li>


    <li class="nav-item">
      <a class="nav-link dropdown-toggle" aria-current="page" href="javascript:void(0)" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="icon">
          <img src="{{ file_url(base_path ~ directory) }}/assets/img/icons/Recipes.svg" class="img-fluid" alt="Menu">
        </span>
        <span class="label">Recipes</span>
      </a>

      <div class="dropdown-menu mega-menu-dropdown mega-menu-recipes" aria-labelledby="navbarDropdown2">

        <div class="container">

          <div class="row gy-32 p-32 overflow-hidden">
            {# Get menu recipes #}
            {% set recipes = simplify_menu('menu-recipes') %}

            {% for menu_item in recipes.menu_tree %}
              <div class="col-md col-sm-12">
                <h6> {{ menu_item.text }} </h6>
                <ul class="mega-menu-links">
                  {% if menu_item.submenu %}
                      {% for sub_menu_item in menu_item.submenu %}
                        {% if loop.index <= 5 %}
                          <li>
                            <a href="{{ sub_menu_item.url }}">{{ sub_menu_item.text }}</a>
                          </li>
                        {% endif %}
                      {% endfor %}
                  {% endif %}
                </ul>
              </div>
            {% endfor %}

            <div class="col-12 text-center pb-sm-32">
              <a href="javascript:void(0)" class="btn btn-rk-primary" role="button">
                <span class="label">See All</span>
                <span class="icon ms-16">
                  <img src="{{ file_url(base_path ~ directory) }}/assets/img/svg/arrow_right_sm.svg" alt="Icon" loading="lazy">
                </span>
              </a>
            </div>

          </div><!--row-->

        </div><!--container-->

      </div><!--dropdown-menu-->

    </li>

    <li class="nav-item">
      <a class="nav-link dropdown-toggle" aria-current="page" href="javascript:void(0)" id="navbarDropdown3" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="icon">
          <img src="{{ file_url(base_path ~ directory) }}/assets/img/icons/Tips.svg" class="img-fluid" alt="Menu">
        </span>
        <span class="label">Tips &amp;<br> How-tos</span>
      </a>

      <div class="dropdown-menu mega-menu-dropdown mega-menu-recipes" aria-labelledby="navbarDropdown3">

        <div class="container">

          <div class="row gy-32 p-32 overflow-hidden">

            {% set howto = simplify_menu('how-tos') %}

            {% for menu_item in howto.menu_tree %}
              <div class="col-md col-sm-12">
                <h6> {{ menu_item.text }} </h6>
                <ul class="mega-menu-links">
                  {% if menu_item.submenu %}
                      {% for sub_menu_item in menu_item.submenu %}
                        {% if loop.index <= 5 %}
                          <li>
                            <a href="{{ sub_menu_item.url }}">{{ sub_menu_item.text }}</a>
                          </li>
                        {% endif %}
                      {% endfor %}
                  {% endif %}
                </ul>
              </div>
            {% endfor %}

            <div class="col-12 text-center pb-sm-32">
              <a href="javascript:void(0)" class="btn btn-rk-primary" role="button">
                <span class="label">See All</span>
                <span class="icon ms-16">
                  <img src="{{ file_url(base_path ~ directory) }}/assets/img/svg/arrow_right_sm.svg" alt="Icon" loading="lazy">
                </span>
              </a>
            </div>

          </div><!--row-->

        </div><!--container-->

      </div><!--dropdown-menu-->

    </li>

    <li class="nav-item">
      <a class="nav-link dropdown-toggle" aria-current="page" href="javascript:void(0)" id="navbarDropdown4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="icon">
          <img src="{{ file_url(base_path ~ directory) }}/assets/img/icons/Holidays.svg" class="img-fluid" alt="Menu">
        </span>
        <span class="label">Holidays &amp;<br> Entertaining</span>
      </a>

      <div class="dropdown-menu mega-menu-dropdown mega-menu-holidays" aria-labelledby="navbarDropdown4">

        <div class="container">

          <div class="row gy-32 p-32 overflow-hidden">

            <div class="col-12 col-md-4">
              <figure class="mega-menu-img mb-24">
                <img src="{{ file_url(base_path ~ directory) }}/assets/img/placeholder/GettyImages-102283848.png" alt="Image" loading="lazy" class="img-fluid">
              </figure>
              <h6><a href="javascript:void(0)">Labor Day Barbecue Recipes &amp; Tips</a></h6>
            </div>

            <div class="col-12 col-md-4 gx-0">

              <div class="vstack gap-32">

                <div class="row align-items-center">

                  <div class="col-12 col-md-5">
                    <figure class="mega-menu-img">
                      <img src="https://via.placeholder.com/132x132" alt="Image" loading="lazy" class="img-fluid">
                    </figure>
                  </div>

                  <div class="col-12 col-md-7">
                    <h6><a href="javascript:void(0)">The Ultimate Summer Grilling Guide</a></h6>
                  </div>

                </div>

                <div class="row align-items-center">

                  <div class="col-12 col-md-5">
                    <figure class="mega-menu-img">
                      <img src="https://via.placeholder.com/132x132" alt="Image" loading="lazy" class="img-fluid">
                    </figure>
                  </div>

                  <div class="col-12 col-md-7">
                    <h6><a href="javascript:void(0)">Make &amp; Take Casseroles and Dinners</a></h6>
                  </div>

                </div>

              </div>

            </div>

            <div class="col-12 col-md-4 gx-0">

              <div class="vstack gap-32">

                <div class="row align-items-center">

                  <div class="col-12 col-md-5">
                    <figure class="mega-menu-img">
                      <img src="https://via.placeholder.com/132x132" alt="Image" loading="lazy" class="img-fluid">
                    </figure>
                  </div>

                  <div class="col-12 col-md-7">
                    <h6><a href="javascript:void(0)">Make &amp; Take Desserts for a Crowd</a></h6>
                  </div>

                </div>

                <div class="row align-items-center">

                  <div class="col-12 col-md-5">
                    <figure class="mega-menu-img">
                      <img src="https://via.placeholder.com/132x132" alt="Image" loading="lazy" class="img-fluid">
                    </figure>
                  </div>

                  <div class="col-12 col-md-7">
                    <h6><a href="javascript:void(0)">Make &amp; Take Desserts for a Crowd</a></h6>
                  </div>

                </div>

              </div>

            </div>

            <div class="col-12 text-center pb-sm-32">
              <a href="javascript:void(0)" class="btn btn-rk-primary" role="button">
                <span class="label">See All</span>
                <span class="icon ms-16">
                  <img src="{{ file_url(base_path ~ directory) }}/assets/img/svg/arrow_right_sm.svg" alt="Icon" loading="lazy">
                </span>
              </a>
            </div>

          </div><!--row-->

        </div><!--container-->

      </div><!--dropdown-menu-->

    </li>


    <li class="nav-item">
      <a class="nav-link dropdown-toggle" aria-current="page" href="javascript:void(0)" id="navbarDropdown5" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="icon">
          <img src="{{ file_url(base_path ~ directory) }}/assets/img/icons/Story.svg" class="img-fluid" alt="Menu">
        </span>
        <span class="label">Our<br>Story</span>
      </a>


      <div class="dropdown-menu mega-menu-dropdown mega-menu-story" aria-labelledby="navbarDropdown5">

        <div class="container">

          <div class="row gy-32 p-32 overflow-hidden">

            <div class="col-12 col-md-4">

              <div class="row align-items-center gx-0">

                <div class="col-12 col-md-5">
                  <figure class="mega-menu-img">
                    <img src="https://via.placeholder.com/132x132" alt="Image" loading="lazy" class="img-fluid">
                  </figure>
                </div>

                <div class="col-12 col-md-7">
                  <h6><a href="javascript:void(0)">Our Story</a></h6>
                  <p>We've been helping cooks since 1947</p>
                </div>

              </div><!--row-->

            </div><!--col-->

            <div class="col-12 col-md-4">

              <div class="row align-items-center gx-0">

                <div class="col-12 col-md-5">
                  <figure class="mega-menu-img">
                    <img src="https://via.placeholder.com/132x132" alt="Image" loading="lazy" class="img-fluid">
                  </figure>
                </div>

                <div class="col-12 col-md-7">
                  <h6><a href="javascript:void(0)">Sustainability</a></h6>
                  <p>What we're doing to go green</p>
                </div>

              </div><!--row-->

            </div><!--col-->

            <div class="col-12 col-md-4">

              <div class="row align-items-center gx-0">

                <div class="col-12 col-md-5">
                  <figure class="mega-menu-img">
                    <img src="https://via.placeholder.com/132x132" alt="Image" loading="lazy" class="img-fluid">
                  </figure>
                </div>

                <div class="col-12 col-md-7">
                  <h6><a href="javascript:void(0)">Community</a></h6>
                  <p>About our partnerships and charitable programs</p>
                </div>

              </div><!--row-->

            </div><!--col-->

            <div class="col-12 text-center pb-sm-32">
              <a href="javascript:void(0)" class="btn btn-rk-primary" role="button">
                <span class="label">See All</span>
                <span class="icon ms-16">
                  <img src="{{ file_url(base_path ~ directory) }}/assets/img/svg/arrow_right_sm.svg" alt="Icon" loading="lazy">
                </span>
              </a>
            </div>

          </div><!--row-->

        </div><!--container-->

      </div><!--dropdown-menu-->

    </li>

  </ul>

  <div class="d-flex nav-supplement">

    <div id="socializeHeader" class="hstack gap-16 fz-20 justify-content-center">
      <a href="{{ social_links.facebook }}" role="button">
        <span class="sr-only">Facebook</span>
        <i class="fab fa-facebook-f"></i>
      </a>
      <a href="{{ social_links.twitter }}" role="button">
        <span class="sr-only">Twitter</span>
        <i class="fab fa-twitter"></i>
      </a>
      <a href="{{ social_links.instagram }}" role="button">
        <span class="sr-only">Instagram</span>
        <i class="fab fa-instagram"></i>
      </a>
      <a href="{{ social_links.youtube }}" role="button">
        <span class="sr-only">Youtube</span>
        <i class="fab fa-youtube"></i>
      </a>
      <a href="{{ social_links.pinterest }}" role="button">
        <span class="sr-only">Pinterest</span>
        <i class="fab fa-pinterest"></i>
      </a>
    </div>

    <div id="headerSearch" class="hstack gap-16 fz-20 justify-content-center">

      <a class="dropdown-toggle" aria-current="page" href="javascript:void(0)" id="navbarDropdown5" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="sr-only">Search</span>
        <img src="{{ file_url(base_path ~ directory) }}/assets/img/icons/header_search.svg" class="img-fluid" alt="Menu">
      </a>

      <div class="dropdown-menu mega-menu-dropdown mega-menu-search bg-secondary" aria-labelledby="navbarDropdown5">

        <div class="container">

          <form action="" onsubmit="return false;">

            <div class="row align-items-center justify-content-center">

              <div class="col-md-6">
                <div class="input-group">
                  <input type="search" class="form-control form-control-lg" placeholder="Search products, recipes, etc." aria-label="Search" aria-describedby="button-global-site-search" required>
                  <button class="btn btn-danger" type="submit" id="button-global-site-search">
                    <img src="{{ file_url(base_path ~ directory) }}/assets/img/icons/search_icon.svg" class="img-fluid" alt="Search icon">
                  </button>
                </div>
              </div>

              <div class="col-md-1">
                <div class="form-group">
                  <a href="javascript:void(0)" role="button">
                    <img src="{{ file_url(base_path ~ directory) }}/assets/img/icons/search_close.svg" class="img-fluid" alt="Search close">
                  </a>
                </div>
              </div>

            </div>

          </form>

        </div><!--container-->

      </div><!--dropdown-menu-->

    </div>

  </div>

</div>