<div class="site-header-and-placeholder-wrapper">
  <div class="header-placeholder">
    {/* Do not remove this. It serves an important purpose. */}
  </div>

  <header class="site-header">
    <div class="wrapper-1200">
      <div class="left">
        <div class="site-header__main">
          <label class="md-icon md-icon--menu md-header-nav__button" for="__drawer"></label>
          <a href="https://doc.traefik.io/">
            <img
              class="site-header__logo"
              alt="Load Balancer + Kubernetes Ingress + Service Mesh with Traefik and Traefik Mesh"
              src="{{ 'assets/images/traefik-labs.svg' | url }}"
            />
          </a>
        </div>

        <nav class="site-header__nav">
          <div class="menu-item-wrapper menu-item-wrapper--dropdown">
            <a class="menu-item menu-item--with-icon">
              <span class="title">Products</span>
              <span class="icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </span>
            </a>

            <div class="nav-dropdown-menu nav-dropdown-menu--products">
              <div class="nav-dropdown-menu-wrapper">
                <div class="dm-header">Products</div>
                <div class="dm-items">

                  <div class="dm-item">
                    <div class="dmi-image proxy">
                      <img src="{{ 'assets/images/traefik-proxy-logo.svg' | url }}" alt="Traefik Proxy" />
                    </div>
                    <a class="dmi-details" href="https://doc.traefik.io/traefik/">
                      <div class="dmi-title">Traefik Proxy</div>
                      <div class="dmi-description">
                        Expose, Secure and Monitor your modern applications
                      </div>
                    </a>
                  </div>

                  <div class="dm-item">
                    <div class="dmi-image mesh">
                      <img src="{{ 'assets/images/traefik-mesh-logo.svg' | url }}" alt="Traefik Mesh" />
                    </div>
                    <a class="dmi-details" href="https://traefik.io/traefik-mesh/">
                      <div class="dmi-title">Traefik Mesh</div>
                      <div class="dmi-description">
                        Route and Monitor communications inside your
                        Kubernetes cluster
                      </div>
                    </a>
                  </div>

                  <div class="dm-item dm-item--traefikee">
                    <div class="dmi-image enterprise">
                      <img src="{{ 'assets/images/traefik-enterprise-logo.svg' | url }}" alt="traefik enterprise" />
                    </div>
                    <a class="dmi-details" href="https://traefik.io/traefik-enterprise/">
                      <div class="dmi-title">
                        Traefik Enterprise
                      </div>
                      <div class="dmi-description">
                        Ensure high availability, scalability, and security
                        of your microservices
                      </div>
                    </a>
                  </div>

                  <div class="dm-item">
                    <div class="dmi-image pilot">
                      <img src="{{ 'assets/images/traefik-pilot-logo.svg' | url }}" alt="Traefik Pilot" />
                    </div>
                    <a class="dmi-details" href="https://traefik.io/traefik-pilot/">
                      <div class="dmi-title">Traefik Pilot</div>
                      <div class="dmi-description">
                        Monitor and Manage your Traefik Instances
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="menu-item-wrapper menu-item-wrapper--dropdown">
            <a class="menu-item menu-item--with-icon">
              <span class="title">Solutions</span>
              <span class="icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </span>
            </a>

            <div class="nav-dropdown-menu nav-dropdown-menu--solutions">
              <div class="nav-dropdown-menu-wrapper">
                <div class="dm-header">Solutions</div>
                <div class="dm-items">
                  <div class="dm-item">
                    <div class="dmi-image">
                      <img src="data:image/svg+xml;base64,[encoded data, 8540 characters]" alt="Kubernetes Ingress" />
                    </div>
                    <a
                      href="https://traefik.io/solutions/kubernetes-ingress/"
                      class="dmi-details"
                    >
                      <div class="dmi-title">Kubernetes Ingress</div>
                      <div class="dmi-description">
                        A centralized routing solution for your Kubernetes
                        deployment
                      </div>
                    </a>
                  </div>
                  <div class="dm-item">
                    <div class="dmi-image">
                      <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDM2IDM2Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgPHBhdGggZmlsbD0iIzYxOEZGRSIgZD0iTTI2LjI1IDI0LjcydjYuMDNhLjc1Ljc1IDAgMCAxLS43NS43NWgtMi45MTdhMS41IDEuNSAwIDEgMCAuMDAxIDNIMjUuNWEzLjc1IDMuNzUgMCAwIDAgMy43NS0zLjc1di02LjAzYTEuNSAxLjUgMCAwIDAtMyAweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMxRTU0RDUiIGQ9Ik0xOCA2YTIuMjUgMi4yNSAwIDAgMCAyLjI1LTIuMjV2LTEuNUEyLjI1IDIuMjUgMCAwIDAgMTggMEgyLjI1QTIuMjUgMi4yNSAwIDAgMCAwIDIuMjV2MS41QTIuMjUgMi4yNSAwIDAgMCAyLjI1IDZIMTh6TTMzLjc1IDIyLjVBMi4yNSAyLjI1IDAgMCAwIDM2IDIwLjI1di0xLjVhMi4yNSAyLjI1IDAgMCAwLTIuMjUtMi4yNUgxOGEyLjI1IDIuMjUgMCAwIDAtMi4yNSAyLjI1djEuNUEyLjI1IDIuMjUgMCAwIDAgMTggMjIuNWgxNS43NXoiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjNjE4RkZFIiBkPSJNMjIuNSAxNC4yNDdWMTMuNWEzLjc1IDMuNzUgMCAwIDAtMy43NS0zLjc1aC02QS43NS43NSAwIDAgMSAxMiA5di0uNzYxYTEuNSAxLjUgMCAwIDAtMyAwVjlhMy43NSAzLjc1IDAgMCAwIDMuNzUgMy43NWg2YS43NS43NSAwIDAgMSAuNzUuNzV2Ljc0N2ExLjUgMS41IDAgMCAwIDMgMHoiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjMUU1NEQ1IiBkPSJNMTggMzZhMi4yNSAyLjI1IDAgMCAwIDIuMjUtMi4yNXYtMS41QTIuMjUgMi4yNSAwIDAgMCAxOCAzMEgyLjI1QTIuMjUgMi4yNSAwIDAgMCAwIDMyLjI1djEuNUEyLjI1IDIuMjUgMCAwIDAgMi4yNSAzNkgxOHoiLz4KICAgIDwvZz4KPC9zdmc+Cg==" alt="Service Mesh" />
                    </div>
                    <a href="https://traefik.io/traefik-mesh/" class="dmi-details">
                      <div class="dmi-title">Service Mesh</div>
                      <div class="dmi-description">
                        Monitor and route your internal communications
                        easily
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="menu-item-wrapper menu-item-wrapper--dropdown">
            <a class="menu-item menu-item--with-icon">
              <span class="title">Learn</span>
              <span class="icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </span>
            </a>

            <div class="nav-dropdown-menu nav-dropdown-menu--learn">
              <div class="nav-dropdown-menu-wrapper">
                <div class="dm-left">
                  <div class="dm-header">Learn</div>
                  <div class="dm-items">
                    <a href="https://traefik.io/blog/" class="dm-item">
                      Blog
                    </a>
                    <a href="https://traefik.io/resources/" class="dm-item">
                      Resource Library
                    </a>
                    <a href="https://traefik.io/success-stories/" class="dm-item">
                      Success Stories
                    </a>
                    <a href="https://doc.traefik.io/" class="dm-item">
                      Docs
                    </a>
                    <a href="https://traefik.io/community/" class="dm-item">
                      Community
                    </a>
                    <a href="https://traefik.io/events/" class="dm-item">
                      Events
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="menu-item-wrapper">
            <a href="https://traefik.io/pricing/" class="menu-item">
              Pricing
            </a>
          </div>

          <div class="menu-item-wrapper menu-item-wrapper--dropdown">
            <a class="menu-item menu-item--with-icon">
              <span class="title">Company</span>
              <span class="icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </span>
            </a>

            <div class="nav-dropdown-menu nav-dropdown-menu--company">
              <div class="nav-dropdown-menu-wrapper">
                <div class="dm-left">
                  <div class="dm-header">Company</div>
                  <div class="dm-items">
                    <a href="https://traefik.io/about-us/" class="dm-item">
                      About
                    </a>
                    <a href="https://traefik.io/partners/" class="dm-item">
                      Partners
                    </a>
                    <a href="https://traefik.io/careers/" class="dm-item">
                      Careers
                    </a>
                    <a href="https://traefik.io/press/" class="dm-item">
                      Press
                    </a>
                  </div>
                </div>
                <div class="dm-right">
                  <p>Interested in joining Traefik Labs?</p>
                  <a
                    class="btn-type-1"
                    href="https://traefik.io/careers/#open-positions"
                  >
                    View Open Positions
                  </a>
                </div>
              </div>
            </div>
          </div>
        </nav>
      </div>

      <div class="right">
        <label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
        <div class="site-header__demo-button">
          <a
            class="button--secondary"
            href="https://info.traefik.io/request-demo-traefikee"
          >
            Get a demo
          </a>
        </div>
      </div>

      <!-- <div class="drawer">
        <div
          class={"drawer-handle " + (isDrawerOpen ? "open" : "")}
          onClick={() => toggleDrawer(!isDrawerOpen)}
        >
          <span class="first"></span>
          <span class="second"></span>
        </div>
      </div> -->
    </div>
  </header>
  <!-- <DrawerNav isDrawerOpen={isDrawerOpen} /> -->
</div>
