Corp/backend/templates/includes/navbar.html

{% load static %}
<script src="{% static 'js/navbar-mobile-search.js' %}" defer></script>
<script src="{% static 'js/bottom-navbar.js' %}" defer></script>

<nav class="navbar navbar-expand bg-primary app-navbar" data-bs-theme="dark">
  <div class="container-fluid align-items-center">

    {% load static %}
    <a class="navbar-brand d-flex align-items-center gap-2 me-3 navbar-brand-item" href="/">
      <img src="{% static BRAND_LOGO %}"
          alt="{{ BRAND_NAME }}"
          width="28" height="28"
          class="align-text-bottom"
          style="image-rendering:auto">
      <span class="fw-semibold d-none d-sm-inline">{{ BRAND_NAME }}</span>
    </a>

    {% if user.is_authenticated %}
      <!-- Группа: поиск + колокол -->
      <div class="d-flex align-items-center ms-4 gap-3">
        <!-- Поиск: иконка на мобильном, поле на десктопе -->
        <form class="d-none d-md-flex align-items-center mobile-search-form" role="search"
              action="{% url 'search:search' %}" method="get" autocomplete="off">
          <!-- Десктопная версия: поле -->
          <div class="position-relative ios-search" style="max-width: clamp(160px, 28vw, 300px);">
            <i class="bi-search"></i>
            <input
              class="form-control form-control-sm rounded-pill ios-search-input bg-white bg-opacity-10 border-0 text-white shadow-sm"
              type="search" name="q" placeholder="Поиск…" aria-label="Поиск" id="desktopSearchInput"
              style="width: 100%; height: 36px;">
          </div>
        </form>

        <!-- Уведомления: только иконка + плотный бейдж (скрыть на мобильных) -->
        <div class="position-relative navbar-icon d-none d-md-block" id="notificationBell">
          <button class="btn btn-link text-white p-0"
                  id="notificationToggle"
                  type="button"
                  title="Уведомления"
                  aria-label="Уведомления">
            <span class="bell-wrapper">
              <i class="bi-bell fs-5"></i>
              <span class="bell-dot d-none" id="notificationBadge">0</span>
            </span>
          </button>
        </div>

        <!-- Календарь: только на мобильных устройствах (перенесен в bottom navbar) -->
        <!-- Удалено, теперь в нижней панели -->

      </div>
    {% endif %}

    <div class="ms-auto d-flex align-items-center navbar-right">
      {% if user.is_authenticated %}
        <div class="dropdown navbar-icon">
          <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle no-caret"
             id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false" style="min-width:40px;">
            {% if user.avatar %}
              <img src="{{ user.avatar.url }}" alt="Аватар {{ user.get_short_name }}" width="36" height="36"
                   class="rounded-circle shadow-sm object-fit-cover">
            {% else %}
              <span class="bg-secondary text-white rounded-circle d-inline-flex align-items-center justify-content-center"
                    style="width:36px;height:36px;font-size:1.2rem;">
                {{ user.get_short_name|slice:":1"|upper }}
              </span>
            {% endif %}
          </a>
          <ul class="dropdown-menu dropdown-menu-end rounded-3 shadow-sm" aria-labelledby="userDropdown">
            <li class="px-3 py-2 text-muted small">
              {{ user.get_short_name }}<br>
              <span class="text-secondary">{{ user.email }}</span>
            </li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="{% url 'employees:profile' %}">
              <i class="bi-person me-2"></i>Профиль</a></li>
            <li>
              <a class="dropdown-item" href="{% url 'auth_front:logout' %}">
                <i class="bi-box-arrow-right me-2"></i>Выйти
              </a>
            </li>
          </ul>
        </div>
      {% else %}
        <a class="btn btn-outline-light rounded-pill me-2" href="{% url 'auth_front:login' %}">Войти</a>
        <a class="btn btn-light rounded-pill" href="{% url 'auth_front:register' %}">Регистрация</a>
      {% endif %}
    </div>

  </div>
</nav>

<!-- Dropdown меню уведомлений (вне navbar для правильного z-index) -->
{% if user.is_authenticated %}
<div class="notification-dropdown-menu" id="notificationDropdown" style="display: none;">
  <div class="notification-dropdown-header">
    <span class="fw-semibold">Уведомления</span>
    <a href="{% url 'notifications:list' %}" class="btn btn-sm btn-link">Все</a>
  </div>

  <div class="notification-dropdown-body" id="notificationList">
    <div class="text-center py-3 text-muted">
      <i class="bi-bell-slash"></i>
      <div class="small">Нет новых уведомлений</div>
    </div>
  </div>

  <div class="notification-dropdown-divider"></div>

  <div class="px-3 py-2">
    <a href="{% url 'notifications:settings' %}" class="btn btn-sm btn-outline-primary w-100">
      <i class="bi-gear me-1"></i>Настройки уведомлений
    </a>
  </div>
</div>

<!-- Bottom Navigation Bar (только для мобильных) -->
<nav class="bottom-navbar d-md-none" id="bottomNav">
  <div class="bottom-navbar-container">
    <a href="/" class="bottom-nav-item" title="Главная" aria-label="Главная">
      <i class="bi-house-door"></i>
      <span class="bottom-nav-label">Главная</span>
    </a>

    <button class="bottom-nav-item" id="bottomNotificationToggle" type="button" title="Уведомления" aria-label="Уведомления">
      <span class="bottom-nav-icon-wrapper">
        <i class="bi-bell"></i>
        <span class="badge badge--button" id="bottomNotificationBadge" style="display: none;">0</span>
      </span>
      <span class="bottom-nav-label">Уведомления</span>
    </button>

    <button class="bottom-nav-item" id="bottomSearchToggle" type="button" title="Поиск" aria-label="Поиск">
      <i class="bi-search"></i>
      <span class="bottom-nav-label">Поиск</span>
    </button>

    <button class="bottom-nav-item" type="button"
            data-bs-toggle="offcanvas"
            data-bs-target="#rightbarOffcanvas"
            aria-controls="rightbarOffcanvas"
            title="Календарь"
            aria-label="Календарь">
      <i class="bi-calendar-event"></i>
      <span class="bottom-nav-label">Календарь</span>
    </button>

    <button class="bottom-nav-item" type="button"
            data-bs-toggle="offcanvas"
            data-bs-target="#sidebar"
            aria-controls="sidebar"
            title="Меню"
            aria-label="Меню">
      <i class="bi-three-dots"></i>
      <span class="bottom-nav-label">Ещё</span>
    </button>
  </div>
</nav>
{% endif %}