union_auto_test/core/templates/includes/header.html

{% load static %}
{% load filters %}

<div class="headerInner">
  <header class="header header--main" id="header">

    <div class="headerW d-flex align-items-center justify-content-between flex-row flex-lg-column flex-xl-row gap-2">
      <a href="{% url 'core:index' %}" class="headerLogo logo">
        <img src="{% static 'img/admin/logo/logo.svg' %}?v=3" alt="logo">
      </a>
      <nav class="headerNav nav">
        <div class="container">
          <div class="d-flex py-2 d-lg-none justify-content-between align-items-center border-b-gray-3 px-3">
            <a href="{% url 'core:index' %}" class="headerLogo logo">
              <img src="{% static 'img/admin/logo/logo.svg' %}?v=3" alt="logo">
            </a>
            <div class="headerNavCloseBtn"><img src="{% static 'img/icons/close.svg' %}?v=1" alt="close"></div>
          </div>

          {% include './menu_desk.html' %}
          {% include './menu_mob.html' %}

          <div class="d-flex d-lg-none justify-content-between align-items-center gap-2 px-3 py-4">
            <div class="d-flex flex-column gap-2">
              <span class="fw-medium text--sm text-white">Мы в соцсетях:</span>
              <ul class="d-flex gap-3 socials socials--white">
                <li>
                  <a href="{{ vk }}" target="_blank">
                    <svg>
                      <use xlink:href="{% static 'img/icons/icons.svg' %}?v=1#vk"></use>
                    </svg>
                  </a>
                </li>
                <li>
                  <a href="{{ youtube }}" target="_blank">
                    <svg>
                      <use xlink:href="{% static 'img/icons/icons.svg' %}?v=1#youtube"></use>
                    </svg>
                  </a>
                </li>
                <li>
                  <a href="{{ instagram }}" target="_blank">
                    <svg>
                      <use xlink:href="{% static 'img/icons/icons.svg' %}?v=1#insta"></use>
                    </svg>
                  </a>
                </li>
              </ul>
            </div>
            <div class="d-flex flex-column gap-2">
              <span class="fw-medium text--sm text-white">Свяжитесь с нами:</span>
              <ul class="d-flex gap-3 socials socials--white">
                <li>
                  <a href="{{ vk }}" target="_blank">
                    <svg>
                      <use xlink:href="{% static 'img/icons/icons.svg' %}?v=1#vk-call"></use>
                    </svg>
                  </a>
                </li>
                <li>
                  <a href="{{ whatsapp }}" target="_blank">
                    <svg>
                      <use xlink:href="{% static 'img/icons/icons.svg' %}?v=1#whatsapp-call"></use>
                    </svg>
                  </a>
                </li>
                <li>
                  <a href="{{ tg }}" target="_blank">
                    <svg>
                      <use xlink:href="{% static 'img/icons/icons.svg' %}?v=1#telegram-call"></use>
                    </svg>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="d-flex d-lg-none gap-1 px-3 mt-2">
            <img src="{% static 'img/icons/phone-white.svg' %}?v=1" alt="phone">
            <div class="headerContacts d-flex flex-column">
              <a href="tel:{{ phone|digits_phone }}" class="headerPhone headerPhone--lg">{{ phone }}</a>
              <span>Звонок по России бесплатно</span>
            </div><!-- /headerContacts -->
          </div>
          <div class="d-flex d-lg-none px-3 pt-2 mt-4">
            <button class="button button--brown w-100" data-src="#modalOrder" data-fancybox onclick="ym(91395761,'reachGoal','view'); return true;">
              Задать вопрос консультанту
            </button>
          </div>

        </div>

      </nav>
      <div class="d-none d-lg-flex gap-1">
        <img src="{% static 'img/icons/phone.svg' %}?v=1" alt="phone">
        <div class="headerContacts d-flex flex-column">
          <a href="tel:{{ phone|digits_phone }}" class="headerPhone">{{ phone }}</a>
          <span>Звонок по России бесплатно</span>
        </div><!-- /headerContacts -->
      </div>
      <div class="hamburger" id="toggle">
        <div class="top-bun"></div>
        <div class="meat"></div>
        <div class="bottom-bun"></div>
      </div><!-- /Hamburger Menu -->

      <button class="button button--brown d-none d-lg-flex" data-src="#modalOrder" data-fancybox onclick="ym(91395761,'reachGoal','view'); return true;">Задать
        вопрос</button>
    </div>

  </header>
</div>