templates/header.html.twig line 1

{% set bg = 'bg-primary' %}
{% set bgHover = 'bg-primary-400-hover' %}
{% set linkClassName = 'nav-item ml-1 bg-primary-100 bg-sm-white' %}

<header class="d-flex flex-wrap flex-md-nowrap border-bottom p-3 shadow bg-black z-index-10">

    <!--div id="div-btn-sidebarCollapse">
        <button type="button" id="sidebarCollapse" title="sidebar" class="{{bg}} {{bgHover}} rounded-0 navbar-btn btn btn-block w-100 h-14 shadow-none min-w-3">
            {% for i in 0..2 %}
                <span class="h-2px d-block w-1/8 bg-white min-w-5"></span>
            {% endfor %}
        </button>
    </div-->

    <div class="box flex-grow-1 w-25">
        {#<a href="{{ url('home_about') }}" class="d-flex align-items-center text-decoration-none ml-auto ml-sm-3 ms-3 mt-1 mb-1">
            <img src="{{ asset('images/logo6.png') }}" alt="" style="/*width: 55px;*/">
        </a>#}
        <a href="{{ url('front') }}" class="d-flex align-items-center text-decoration-none ml-auto ml-sm-3 mt-1 mb-1">
            <img id="app-logo" src="{{ asset('images/logo7.png') }}" alt="" style="/*width: 55px;*/">
        </a>
    </div>
    <div class="box w-50 d-flex justify-content-between align-items-center px-3">
        
        {% if app.user %}
                <a href="{{ path('front') }}" class="text-white id="icon-container" title="Home">
                    <i class="fas fa-house fa-2x"></i>
                </a>
            
                <a href="{{ path('project_list') }}" class="text-white" id="icon-container" title="Projects">
                    <i class="fas fa-music fa-2x"></i>
                </a>
            
                <a href="{{ path('chat') }}" class="text-white" id="icon-container" title="Messages">
                    <input type="hidden" id="envelopeId" value="{{ app.user.id }}"> 
                    <i class="fas fa-envelope fa-2x"></i>
                     <span class="message-count hidden">!</span>
                </a>
            
    </div>
        <div class="box flex-grow-1 w-25 text-end">
            
            <div class="dropdown ">
                <a class="btn btn-black dropdown-toggle ms-auto" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                    {% if app.user.profilePicture %}
                    <img id="profile-picture-small-display" 
                        src="{{ asset('/pictures/' ~ app.user.profilePictureSmall) }}" 
                        alt="Profile Picture" 
                        class="circle" style="border: 3px solid {{  app.user.color }}">

                    {% else %}
                    
                    <div class="circle" style="background-color: {{  app.user.color }};">{{   app.user.username| upper |slice(0, 1) }}</div>
                    {% endif %}
                </a>

                <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                    {% if is_granted('ROLE_SCHOOL') %}
                  <li><a class="dropdown-item" href="{{ path('profile_school', {'id': app.user.id}) }}">Profile</a></li>
                    {% else %}
                  <li><a class="dropdown-item" href="{{ path('profile', {'id': app.user.id}) }}">Profile</a></li>
                    {% endif %}
                  <li><a class="dropdown-item" href="{{ path('project_list') }}">My Projects</a></li>
                  <li><a class="dropdown-item" href="{{ path('my_songs') }}">My Songs</a></li>
                  {% if 'ROLE_PREMIUM' in app.user.roles %}
                  <li><a class="dropdown-item" href="{{ path('my_ads') }}">My Ads</a></li>
                  {% endif %}
                  <li><a class="dropdown-item" href="{{ path('app_logout') }}">Logout</a></li>
                </ul>
              </div>
            </div>
            
    </div>
        {% else %}
            <form id="user-search-form" method="GET" action="{{ path('user_search') }}" class="d-flex me-3">
                <input type="text" id="username-search" name="username" class="form-control mt-1 mb-1" placeholder="Search users" aria-label="Buscar usuarios">
                <button type="submit" id="username-search-button" class="btn bg-body border border-light mt-1 mb-1">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </ul>
    </div>
<div class="w-25 d-flex justify-content-end">
    <ul id="header-menu-secondary" class="d-flex align-items-center nav nav-pills justify-content-end">

            <li class="{{linkClassName}}">
                {#<a href="{{ path('app_register_type') }}" class="text-white  btn btn-secondary me-4 mt-2 mb-2"  title="Login">
                    Sign up
                </a>#}
                <a href="{{ path('app_register') }}" class="text-white  btn btn-secondary me-4 mt-2 mb-2"  title="Login">
                    Sign up
                </a>
            
        </li>
            <li class="{{linkClassName}}">
                <a href="{{ path('app_login') }}" class="text-white  btn btn-primary me-4 mt-2 mb-2"  title="Login">
                    Login
                </a>
            
        </li>
        </ul>
    </div>
        {% endif %}


</header>