ProyectoTransporte/intendencia/templates/partes/horizontal.html

{% load static %}

<div class="main-header">
    <!-- Logo Header -->
    <div class="main-header-logo">
        <div class="logo-header" data-background-color="dark">
            <a href="{% url 'principal' %}" class="logo">
                <img
                    src="{% static 'img/logo.png' %}"
                    alt="navbar brand"
                    class="navbar-brand animate__animated animate__pulse animate__infinite"
                    height="30"
                />
            </a>
            <div class="nav-toggle">
                <button class="btn btn-toggle toggle-sidebar" title="Toggle Sidebar">
                    <i class="gg-menu-right"></i>
                </button>
                <button class="btn btn-toggle sidenav-toggler" title="Toggle Sidenav">
                    <i class="gg-menu-left"></i>
                </button>
            </div>
            <button class="topbar-toggler more" title="Más opciones">
                <i class="gg-more-vertical-alt"></i>
            </button>
        </div>
    </div>
    <!-- End Logo Header -->

    <!-- Navbar Header -->
    <nav class="navbar navbar-header navbar-header-transparent navbar-expand-lg border-bottom">
        <div class="container-fluid">
            <!-- Barra de búsqueda -->
           <!--  <nav class="navbar navbar-header-left navbar-expand-lg navbar-form nav-search p-0 d-none d-lg-flex">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fa fa-search"></i></span>
                    </div>
                    <input type="text" class="form-control" placeholder="Buscar..." id="searchInput">
                </div>
            </nav>
 -->
            <!-- Navegación derecha -->
            <ul class="navbar-nav topbar-nav ms-md-auto align-items-center">
                <!-- Búsqueda móvil -->
                <li class="nav-item topbar-icon dropdown hidden-caret d-flex d-lg-none">
                    <a class="nav-link" href="#" id="mobileSearch" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa fa-search"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-search animated fadeIn" aria-labelledby="mobileSearch">
                        <li>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Buscar...">
                                <button class="btn btn-primary" type="button"><i class="fa fa-search"></i></button>
                            </div>
                        </li>
                    </ul>
                </li>

                <!-- Notificaciones (comentadas pero optimizadas) -->
                <!--
                <li class="nav-item topbar-icon dropdown hidden-caret">
                    <a class="nav-link dropdown-toggle" href="#" id="notifDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa fa-bell"></i>
                        <span class="notification animate__animated animate__bounce animate__infinite">4</span>
                    </a>
                    <ul class="dropdown-menu notif-box animated fadeIn" aria-labelledby="notifDropdown">
                        <li>
                            <div class="dropdown-title">Tienes 4 notificaciones</div>
                        </li>
                        <li>
                            <div class="notif-scroll scrollbar-outer">
                                <div class="notif-center">
                                    <a href="#" class="notif-item">
                                        <div class="notif-icon notif-primary"><i class="fa fa-user-plus"></i></div>
                                        <div class="notif-content">
                                            <span class="block">Nuevo usuario registrado</span>
                                            <span class="time">Hace 5 minutos</span>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a class="see-all" href="javascript:void(0);">Ver todas las notificaciones <i class="fa fa-angle-right"></i></a>
                        </li>
                    </ul>
                </li>
                -->

                <!-- Toggle Modo Oscuro -->
                <li class="nav-item topbar-icon hidden-caret">
                    <button id="darkModeToggle" class="nav-link btn btn-icon" title="Cambiar tema">
                        <i class="fas fa-moon"></i>
                    </button>
                </li>

                <!-- Perfil de usuario -->
                <li class="nav-item topbar-user dropdown hidden-caret">
                    <a class="dropdown-toggle profile-pic" data-bs-toggle="dropdown" href="#" aria-expanded="false">
                        <div class="avatar-sm">
                            <img
                                src="{% static 'img/perfil.png' %}"
                                alt="Perfil"
                                class="avatar-img rounded-circle animate__animated animate__zoomIn"
                            />
                        </div>
                        <span class="profile-username">
                            <span class="fw-bold d-block">{{ request.user.first_name|default:"Usuario" }} {{ request.user.last_name }}</span>
                            <span class="op-7 d-block">{{ request.user.username }}</span>
                        </span>
                    </a>
                    <ul class="dropdown-menu dropdown-user animated fadeIn">
                        <div class="dropdown-user-scroll scrollbar-outer">
                            <li>
                                <div class="user-box">
                                    <div class="avatar-lg">
                                        <img src="{% static 'img/perfil.png' %}" alt="Perfil" class="avatar-img rounded" />
                                    </div>
                                    <div class="u-text">
                                        <h4>{{ request.user.first_name|default:"Usuario" }} {{ request.user.last_name }}</h4>
                                        <p class="text-muted">{{ request.user.email|default:"Sin correo" }}</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Mi Perfil</a>
                                <a class="dropdown-item" href="#">Configuración</a>
                                <div class="dropdown-divider"></div>

                                <form action="{% url 'logout' %}" method="POST" class="d-inline">
                                    {% csrf_token %}
                                    <button type="submit" class="nav-link btn btn-link">
                                        <a class="dropdown-item">Cerrar Sesión</a>
                                    </button>
                                </form>
                            </li>
                        </div>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
    <!-- End Navbar -->
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Animación suave para el toggle del sidebar
    const sidebarToggles = document.querySelectorAll('.btn-toggle');
    sidebarToggles.forEach(toggle => {
        toggle.addEventListener('click', function () {
            this.classList.add('animate__animated', 'animate__pulse');
            setTimeout(() => this.classList.remove('animate__animated', 'animate__pulse'), 500);
        });
    });

    // Inicializar Select2 en futuros elementos (si los hay)
    $('.select2').select2({
        theme: 'bootstrap4',
        width: '100%'
    });
});
</script>