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.                             <img src="/uploads/branding/venues/logo.png" class="img-def" alt="Venues">
  53.                             <img src="/uploads/branding/venues/logo_ManteVenues.png" class="img-hov" alt="Venues Hover">
  54.                         </a>
  55.                     </li>
  56.                     {% endif %}
  58.                     {% if can_access_catering and current_access != 'catering' %}
  59.                     <li>
  60.                         <a href="{{ path('switch_access', { type: 'catering' }) }}"
  61.                             class="mante-nav-pill pill-catering">
  62.                             <img src="/uploads/branding/catering/logo.png" class="img-def" alt="Catering">
  63.                             <img src="/uploads/branding/catering/logo_ManteCatering.png" class="img-hov"
  64.                                 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' }) }}" class="mante-nav-pill pill-av">
  72.                             <img src="/uploads/branding/av/logo.png" class="img-def" alt="AV">
  73.                             <img src="/uploads/branding/av/logo_ManteAv.png" class="img-hov" alt="AV Hover">
  74.                         </a>
  75.                     </li>
  76.                     {% endif %}
  77.                 </ul>
  78.             </div>
  80.             {# --- MENÚ USUARIO (Derecha) --- #}
  81.             <ul class="nav navbar-nav navbar-right">
  82.                 <li class="dropdown dropdown-user">
  83.                     <a href="#" id="userMenu" class="dropdown-toggle user-link" role="button" aria-haspopup="true"
  84.                         aria-expanded="false">
  86.                         {% set avatarPath = app.user.picture is not empty ? app.user.picture : 'assets/images/user.png'
  87.                         %}
  89.                         <div class="user-avatar-wrapper">
  90.                             <img src="{{ asset(avatarPath) }}" class="img-circle user-img" alt="">
  91.                         </div>
  93.                         <span class="user-name hidden-sm">{{ app.user.name }} {{ app.user.lastname }}</span>
  94.                         <span class="caret text-white"></span>
  95.                     </a>
  97.                     <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu"
  98.                         style="background-color: {{ navbarBg }}; border: 1px solid rgba(255,255,255,0.2);">
  100.                         {% if app.user.id != 122 %}
  101.                         <li>
  102.                             <a href="/users/view/{{ app.user.id }}">
  103.                                 <i class="glyphicon glyphicon-user"></i> {% trans %}My profile{% endtrans %}
  104.                             </a>
  105.                         </li>
  106.                         <li>
  107.                             <a href="{{ path('me_notifications_list') }}">
  108.                                 <i class="glyphicon glyphicon-exclamation-sign"></i> {% trans %}Notifications{% endtrans
  109.                                 %}
  110.                             </a>
  111.                         </li>
  112.                         <li role="separator" class="divider"></li>
  113.                         {% endif %}
  115.                         <li>
  116.                             <a href="/logout">
  117.                                 <i class="glyphicon glyphicon-log-out"></i> {% trans %}Logout{% endtrans %}
  118.                             </a>
  119.                         </li>
  120.                     </ul>
  121.                 </li>
  122.             </ul>
  124.         </div>
  125.     </div>
  126. </nav>
  128. {# --- JAVASCRIPT --- #}
  129. <script>
  130.     document.addEventListener('DOMContentLoaded', function () {
  131.         // Lógica simple para dropdown sin dependencia estricta de jQuery/Bootstrap JS
  132.         var trigger = document.getElementById('userMenu');
  133.         var item = trigger ? trigger.closest('.dropdown') : null;
  134.         var menu = item ? item.querySelector('.dropdown-menu') : null;
  136.         if (!trigger || !item || !menu) return;
  138.         function toggleDropdown(e) {
  139.             e.preventDefault();
  140.             e.stopPropagation();
  141.             item.classList.toggle('open');
  142.             // Compatibilidad Bootstrap 4+ si se actualiza a futuro
  143.             menu.classList.toggle('show');
  144.             var expanded = trigger.getAttribute('aria-expanded') === 'true';
  145.             trigger.setAttribute('aria-expanded', !expanded);
  146.         }
  148.         trigger.addEventListener('click', toggleDropdown);
  150.         document.addEventListener('click', function (e) {
  151.             if (!item.contains(e.target)) {
  152.                 item.classList.remove('open');
  153.                 menu.classList.remove('show');
  154.                 trigger.setAttribute('aria-expanded', 'false');
  155.             }
  156.         });
  158.         // Toggle sidebar en móviles
  159.         var toggleSidebarBtn = document.querySelector('.sidebar-mobile-main-toggle');
  160.         if (toggleSidebarBtn) {
  161.             toggleSidebarBtn.addEventListener('click', function (e) {
  162.                 e.preventDefault();
  163.                 var sidebar = document.querySelector('.sidebar-main');
  164.                 if (sidebar) {
  165.                     sidebar.classList.toggle('sidebar-mobile-expanded');
  166.                 }
  167.             });
  168.         }
  169.     });
  170. </script>