templates/common/navbar.html.twig line 1

Open in your IDE?
  1. {# templates/common/navbar.html.twig #}
  3. {# --- Lógica de Colores --- #}
  4. {% set navbarBg = '#101230' %}
  5. {% if branding_current is defined and branding_current is not null and branding_current.primaryColor is not empty %}
  6.     {% set navbarBg = branding_current.primaryColor %}
  7. {% endif %}
  9. <nav class="navbar navbar-default navbar-static-top mante-navbar"
  10.      style="background-color: {{ navbarBg }}; border-color: transparent;">
  12.     <div class="container-fluid">
  14.         {# --- HEADER / LOGO --- #}
  15.         <div class="navbar-header">
  16.             <ul class="nav navbar-nav visible-xs-block visible-sm-block pull-left" style="margin: 0; list-style: none;">
  17.                 <li>
  18.                     <a class="sidebar-mobile-main-toggle" style="color: #fff; padding: 20px 15px; cursor: pointer; display: block;">
  19.                         <i class="glyphicon glyphicon-menu-hamburger" style="font-size: 16px;"></i>
  20.                     </a>
  21.                 </li>
  22.             </ul>
  24.             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse" aria-expanded="false" style="margin-top: 13px;">
  25.                 <span class="sr-only">{% trans %}Toggle navigation{% endtrans %}</span>
  26.                 <span class="icon-bar" style="background-color: #fff;"></span>
  27.                 <span class="icon-bar" style="background-color: #fff;"></span>
  28.                 <span class="icon-bar" style="background-color: #fff;"></span>
  29.             </button>
  31.         </div>
  33.         {# --- CONTENIDO COLAPSABLE --- #}
  34.         <div class="collapse navbar-collapse" id="main-navbar-collapse">
  36.             {# Lógica de Permisos #}
  37.             {% set current_access = app.session.get('current_access_type') ?? null %}
  38.             {% set modules = app.session.get('_modules') %}
  40.             {% set can_access_venues   = modules.mvenues %}
  41.             {% set can_access_catering = modules.mcatering %}
  42.             {% set can_access_av       = modules.mav %}
  44.             {# --- BOTONES CENTRALES (Módulos) --- #}
  45.             <div class="nav navbar-nav navbar-center-container">
  46.                 <ul class="nav navbar-nav">
  47.                     {% if can_access_venues and current_access != 'venues' %}
  48.                         <li>
  49.                             <a href="{{ path('switch_access', { type: 'venues' }) }}"
  50.                                class="mante-nav-pill pill-venues">
  51.                                 {# Imagen por defecto (Blanca/Normal) #}
  52.                                 <img src="/uploads/branding/venues/logo.png" class="img-def" alt="Venues">
  53.                                 {# Imagen al pasar el ratón (Color/ManteVenues) #}
  54.                                 <img src="/uploads/branding/venues/logo_ManteVenues.png" class="img-hov" alt="Venues Hover">
  55.                             </a>
  56.                         </li>
  57.                     {% endif %}
  59.                     {% if can_access_catering and current_access != 'catering' %}
  60.                         <li>
  61.                             <a href="{{ path('switch_access', { type: 'catering' }) }}"
  62.                                class="mante-nav-pill pill-catering">
  63.                                 <img src="/uploads/branding/catering/logo.png" class="img-def" alt="Catering">
  64.                                 <img src="/uploads/branding/catering/logo_ManteCatering.png" class="img-hov" alt="Catering Hover">
  65.                             </a>
  66.                         </li>
  67.                     {% endif %}
  69.                     {% if can_access_av and current_access != 'av' %}
  70.                         <li>
  71.                             <a href="{{ path('switch_access', { type: 'av' }) }}"
  72.                                class="mante-nav-pill pill-av">
  73.                                 <img src="/uploads/branding/av/logo.png" class="img-def" alt="AV">
  74.                                 <img src="/uploads/branding/av/logo_ManteAv.png" class="img-hov" alt="AV Hover">
  75.                             </a>
  76.                         </li>
  77.                     {% endif %}
  78.                 </ul>
  79.             </div>
  81.             {# --- MENÚ USUARIO (Derecha) --- #}
  82.             <ul class="nav navbar-nav navbar-right">
  83.                 <li class="dropdown dropdown-user">
  84.                     <a href="#" id="userMenu" class="dropdown-toggle user-link" role="button" aria-haspopup="true" aria-expanded="false">
  86.                         {% set avatarPath = app.user.picture is not empty ? app.user.picture : 'assets/images/placeholder.png' %}
  88.                         <div class="user-avatar-wrapper">
  89.                             <img src="{{ asset(avatarPath) }}" class="img-circle user-img" alt="">
  90.                         </div>
  92.                         <span class="user-name hidden-sm">{{ app.user.name }} {{ app.user.lastname }}</span>
  93.                         <span class="caret text-white"></span>
  94.                     </a>
  96.                     <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu" style="background-color: {{ navbarBg }}; border: 1px solid rgba(255,255,255,0.2);">
  98.                         {% if app.user.id != 122 %}
  99.                             <li>
  100.                                 <a href="/users/view/{{ app.user.id }}">
  101.                                     <i class="glyphicon glyphicon-user"></i> {% trans %}My profile{% endtrans %}
  102.                                 </a>
  103.                             </li>
  104.                             <li>
  105.                                 <a href="{{ path('me_notifications_list') }}">
  106.                                     <i class="glyphicon glyphicon-exclamation-sign"></i> {% trans %}Notifications{% endtrans %}
  107.                                 </a>
  108.                             </li>
  109.                             <li role="separator" class="divider"></li>
  110.                         {% endif %}
  112.                         <li>
  113.                             <a href="/logout">
  114.                                 <i class="glyphicon glyphicon-log-out"></i> {% trans %}Logout{% endtrans %}
  115.                             </a>
  116.                         </li>
  117.                     </ul>
  118.                 </li>
  119.             </ul>
  121.         </div>
  122.     </div>
  123. </nav>
  125. {# --- JAVASCRIPT --- #}
  126. <script>
  127.     document.addEventListener('DOMContentLoaded', function(){
  128.         // Lógica simple para dropdown sin dependencia estricta de jQuery/Bootstrap JS
  129.         var trigger = document.getElementById('userMenu');
  130.         var item    = trigger ? trigger.closest('.dropdown') : null;
  131.         var menu    = item ? item.querySelector('.dropdown-menu') : null;
  133.         if(!trigger || !item || !menu) return;
  135.         function toggleDropdown(e) {
  136.             e.preventDefault();
  137.             e.stopPropagation();
  138.             item.classList.toggle('open');
  139.             // Compatibilidad Bootstrap 4+ si se actualiza a futuro
  140.             menu.classList.toggle('show');
  141.             var expanded = trigger.getAttribute('aria-expanded') === 'true';
  142.             trigger.setAttribute('aria-expanded', !expanded);
  143.         }
  145.         trigger.addEventListener('click', toggleDropdown);
  147.         document.addEventListener('click', function(e){
  148.             if(!item.contains(e.target)) {
  149.                 item.classList.remove('open');
  150.                 menu.classList.remove('show');
  151.                 trigger.setAttribute('aria-expanded', 'false');
  152.             }
  153.         });
  155.         // Toggle sidebar en móviles
  156.         var toggleSidebarBtn = document.querySelector('.sidebar-mobile-main-toggle');
  157.         if(toggleSidebarBtn) {
  158.             toggleSidebarBtn.addEventListener('click', function(e){
  159.                 e.preventDefault();
  160.                 var sidebar = document.querySelector('.sidebar-main');
  161.                 if (sidebar) {
  162.                     sidebar.classList.toggle('sidebar-mobile-expanded');
  163.                 }
  164.             });
  165.         }
  166.     });
  167. </script>