templates/layout/header/topbar-user.html.twig line 1

Open in your IDE?
  1. {% set userpages = build_property_nav(document, 'navigationUser').pages|filter(page => page.visible) %}
  3. <div class="relative flex items-center justify-end space-x-6"
  4.   id="topbar-user"
  5.   {% if app.user %}
  6.     data-controller="topbar-user"
  7.     data-action="click@window->topbar-user#cleanup"
  8.   {% endif %}
  9.   >
  10.   <div class="flex gap-4 text-sm text-white">
  11.     <ul class="flex text-sm uppercase">
  12.       {% if userpages %}
  13.         {% for page in userpages %}
  14.           <li>
  15.           <a href="{{ page.href }}" target="{{ page.target }}" class="flex gap-1 items-baseline px-2 text-white {{ page.active ? 'font-medium' : '' }}">
  16.             {# prettier-ignore #}
  17.             {% include "icons/" ~ page.document.property("icon") ~ ".svg.twig" ignore missing with {class: "w-5 h-5 text-primary"}  %}
  18.             <span>{{ page.label }}</span>
  19.           </a>
  20.           </li>
  21.         {% endfor %}
  22.       {% endif %}
  23.     </ul>
  24.     <div class="flex gap-5" {% if app.user %}{{ live_event_subscriber('user-' ~ app.user.id ~ '/messages') }}{% endif %}>
  25.     {% if app.user %}
  27.       <a href="#" data-action="click->topbar-user#toggleNotifications"  id="user-topbar-notifications-icon" class="{{check_if_unread_notifications(app.user) ? 'has-new' : '' }}" >
  28.         {% include 'icons/bell.svg.twig' with {
  29.           class: 'w-5 inline'
  30.         } %}
  31.       </a>
  32.       <a href="#" data-action="click->topbar-user#toggleMessages" id="user-topbar-messages-icon" class="{{ check_if_unread_messages(app.user.id) ? 'has-new' : '' }}">
  33.         {% include 'icons/chat.svg.twig' with {
  34.           class: 'w-4 inline'
  35.         } %}
  36.       </a>
  37.       <a href="#" data-action="click->topbar-user#toggleProfile" class="">
  38.         {% include 'icons/login.svg.twig' with {
  39.           class: 'w-5 inline'
  40.         } %}
  41.       </a>
  42.     {% else %}
  43.       <a href="{{ path('auth_login') }}" class="flex items-center">
  44.         {% include 'icons/login.svg.twig' with {
  45.           class: 'h-5 inline mr-2  text-primary'
  46.         } %}<span class="leading-none">{{ 'login'|trans }}</span>
  47.       </a>
  48.       <a href="{{ path('auth_register') }}" class="flex items-center text-primary">
  49.        <span class="leading-none">{{ 'sign.up'|trans }}</span>
  50.       </a>
  51.     {% endif %}
  52.     </div>
  53.   </div>
  55.   {% if app.user %}
  56.     <div data-topbar-user-target="notificationsMenu" class="absolute hidden mt-3 text-black shadow-lg z-1700 w-80 bg-neutral-50 overlay top-full">
  57.      <turbo-frame id="topbar-user-notifications" src="{{ path('topbar_notifications_frame') }}" loading="lazy">
  58.         <div class="grid items-center justify-center p-8">
  59.           {% include 'component/loader.html.twig' with { classes: 'w-8 h-8' } %}
  60.         </div>
  61.       </turbo-frame>
  63.     </div>
  64.     <div data-topbar-user-target="messagesMenu" class="absolute hidden mt-3 text-black shadow-lg z-1700 w-80 bg-neutral-50 overlay top-full">
  65.       <turbo-frame id="topbar-user-messages" src="{{ path('topbar_messages_frame') }}" loading="lazy">
  66.         <div class="grid items-center justify-center p-8">
  67.           {% include 'component/loader.html.twig' with { classes: 'w-8 h-8' } %}
  68.         </div>
  69.       </turbo-frame>
  70.       <ul>
  71.         <li>
  72.           <a href="{{ path('profile_messages_index') }}" class="grid justify-center p-4 text-sm hover:bg-neutral-100 text-neutral-700">
  73.             {{ 'show-all-messages'| trans }}
  74.           </a>
  75.         </li>
  76.       </ul>
  77.     </div>
  78.     <div data-topbar-user-target="profileMenu" class="absolute hidden mt-3 text-black border-l-4 shadow-lg z-1700 w-44 bg-neutral-50 overlay top-full border-primary-500">
  79.       <ul>
  80.         <li>
  81.           <a href="{{ path('network_activity') }}"
  82.           class="block px-4 py-2 mt-2 hover:bg-neutral-100">
  83.             {{ 'navigation.my-network'|trans }}
  84.           </a>
  85.         <li>
  86.           <a href="{{ pimcore_url({ object: app.user }) }}"
  87.             class="block px-4 py-2 hover:bg-neutral-100">
  88.             {{ 'navigation.my-profile'|trans }}
  89.           </a>
  90.         </li>
  91.         <li>
  92.           <a href="{{ path('profile_admin_index') }}"
  93.             class="block px-4 py-2 hover:bg-neutral-100">
  94.             {{ 'navigation.manage-profile'|trans }}
  95.           </a>
  96.         </li>
  97.         <li>
  98.           <a href="{{ path('auth_logout') }}" class="block px-4 py-2 mb-2 hover:bg-neutral-100">
  99.             {{ 'navigation.logout'|trans }}
  100.           </a>
  101.         </li>
  102.       </ul>
  103.     </div>
  104.   {% endif %}
  105. </div>