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