templates/header.html.twig line 1

  1. {% set navLinks = [
  2.   {
  3.     title: 'About',
  4.     url: '/about'
  5.   },
  6.   {
  7.     title: 'Team',
  8.     url: '/team'
  9.   },
  10.   {
  11.     title: 'News & Events',
  12.     url: '/news'
  13.   },
  14.   {
  15.     title: 'Help Desk',
  16.     url: '/help-desk'
  17.   },
  18.   {
  19.     title: 'Party Pillar',
  20.     url: '/party-pillar'
  21.   },
  22.   {
  23.     title: 'Contact',
  24.     url: '/contact'
  25.   }
  26. ] %}
  28. {% set avatar = null %}
  30. {% if app.user is not null %}
  31.   {% if  app.user.getUserImagesByuserImageTypeCode('LG') is not null %}
  32.     {% set avatar = '/uploads/media/' ~ app.user.getUserImagesByuserImageTypeCode('LG').getImageMetaData().getName() %}
  33.   {% else %}
  34.     {% set avatar = 'https://avatar.uimaterial.com/?setId=7Jt5O28RnCHPENR1Cvr4&name=' ~ app.user.firstName ~ '&size=512' %}
  35.   {% endif %}
  36. {% endif %}
  38. <div class="fixed z-50 top-0 w-full backdrop-blur-xl bg-white/60">
  39.     <nav class="flex lg:px-8 py-2 px-4 justify-between mx-auto">
  40.         <div class="flex w-full items-center justify-between">
  41.             <div class="md:w-1/3 w-1/2">
  42.                 <a class="max-w-max inline-flex items-center" href="/">
  43.                     <img class="h-12" src="{{ asset('/images/logo.svg') }}" alt="RSP"/>
  44.                     <span class="xl:inline-block lg:hidden whitespace-nowrap text-brand md:text-2xl text-base font-bold">
  45.                         ONLD UK
  46.                     </span>
  47.                 </a>
  48.             </div>
  49.             <div
  50.         class="
  51.           menu
  52.           lg:w-auto
  53.           md:w-96
  54.           w-72
  55.           max-w-full
  56.           lg:flex
  57.           hidden
  58.           lg:flex-row
  59.           flex-col
  60.           lg:relative
  61.           fixed
  62.           lg:bg-transparent
  63.           bg-white
  64.           z-30
  65.           lg:items-center
  66.           lg:justify-around
  67.           lg:h-auto
  68.           h-screen
  69.           text-white
  70.           top-0
  71.           bottom-0
  72.           lg:left-0
  73.           -left-full
  74.           transition-all
  75.           lg:pt-0
  76.           pt-12
  77.           lg:px-0
  78.           px-6
  79.         "
  80.       >
  81.                 <button class="lg:hidden navbar-close absolute right-3 top-5 p-4" href="#">
  82.                     <svg class="w-4 h-4" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
  83.                         <path d="M6.94004 6L11.14 1.80667C11.2656 1.68113 11.3361 1.51087 11.3361 1.33333C11.3361 1.1558 11.2656 0.985537 11.14 0.860002C11.0145 0.734466 10.8442 0.66394 10.6667 0.66394C10.4892 0.66394 10.3189 0.734466 10.1934 0.860002L6.00004 5.06L1.80671 0.860002C1.68117 0.734466 1.51091 0.663941 1.33337 0.663941C1.15584 0.663941 0.985576 0.734466 0.860041 0.860002C0.734505 0.985537 0.66398 1.1558 0.66398 1.33333C0.66398 1.51087 0.734505 1.68113 0.860041 1.80667L5.06004 6L0.860041 10.1933C0.797555 10.2553 0.747959 10.329 0.714113 10.4103C0.680267 10.4915 0.662842 10.5787 0.662842 10.6667C0.662842 10.7547 0.680267 10.8418 0.714113 10.9231C0.747959 11.0043 0.797555 11.078 0.860041 11.14C0.922016 11.2025 0.99575 11.2521 1.07699 11.2859C1.15823 11.3198 1.24537 11.3372 1.33337 11.3372C1.42138 11.3372 1.50852 11.3198 1.58976 11.2859C1.671 11.2521 1.74473 11.2025 1.80671 11.14L6.00004 6.94L10.1934 11.14C10.2554 11.2025 10.3291 11.2521 10.4103 11.2859C10.4916 11.3198 10.5787 11.3372 10.6667 11.3372C10.7547 11.3372 10.8419 11.3198 10.9231 11.2859C11.0043 11.2521 11.0781 11.2025 11.14 11.14C11.2025 11.078 11.2521 11.0043 11.286 10.9231C11.3198 10.8418 11.3372 10.7547 11.3372 10.6667C11.3372 10.5787 11.3198 10.4915 11.286 10.4103C11.2521 10.329 11.2025 10.2553 11.14 10.1933L6.94004 6Z" fill="#556987"></path>
  84.                     </svg>
  85.                 </button>
  86.                 {% for link in navLinks %}
  87.                     <div class="inline-block leading-[3rem] group overflow-hidden max-w-fit lg:mr-8">
  88.                         <a href="{{ link.url }}" class="group-hover:text-brand inline-block text-base font-normal leading-[3rem] text-gray-900 whitespace-nowrap">
  89.                             {{ link.title }}
  90.                         </a>
  91.                         <div class="w-full h-0.5 bg-brand mt-1.5 transition-all -translate-x-full scale-100 group-hover:translate-x-0 duration-500"></div>
  92.                     </div>
  93.                 {% endfor %}
  94.                 {% if app.user is null %}
  95.                     <div class="inline-block leading-[3rem] group overflow-hidden lg:mr-8 max-w-fit">
  96.                         <a href="/login" class="group-hover:text-brand inline-block text-base font-normal leading-[3rem] text-gray-900 whitespace-nowrap">
  97.                             Login
  98.                         </a>
  99.                         <div class="w-full h-0.5 bg-brand mt-1.5 transition-all -translate-x-full scale-100 group-hover:translate-x-0 duration-500"></div>
  100.                     </div>
  101.           <a
  102.             href="/donate"
  103.             class="
  104.               bg-brand
  105.               hover:bg-transparent
  106.               border
  107.               border-brand
  108.               transition-all
  109.               duration-300
  110.               py-2
  111.               px-5
  112.               rounded-full
  113.               text-base
  114.               font-semibold
  115.               leading-6
  116.               text-white
  117.               hover:text-brand
  118.               lg:w-auto
  119.               w-full
  120.               text-center
  121.               lg:mt-0
  122.               mt-auto
  123.               lg:mb-0
  124.               mb-4
  125.             "
  126.           >
  127.             Donate
  128.           </a>
  129.                 {% else %}
  130.           <a
  131.             href="/donate"
  132.             class="
  133.               lg:inline
  134.               hidden
  135.               bg-brand
  136.               hover:bg-transparent
  137.               border
  138.               border-brand
  139.               transition-all
  140.               duration-300
  141.               py-2
  142.               px-5
  143.               rounded-full
  144.               text-base
  145.               font-semibold
  146.               leading-6
  147.               text-white
  148.               hover:text-brand
  149.               lg:w-auto
  150.               w-full
  151.               text-center
  152.               lg:mr-5
  153.             "
  154.           >
  155.             Donate
  156.           </a>
  157.           <div class="relative inline-flex h-12 group lg:mt-0 mt-4" role="button">
  158.             <a href="/user/profile" class="inline-flex items-center gap-x-4 lg:w-10 lg:h-10">
  159.               <img
  160.                 src="{{ avatar }}"
  161.                 alt="{{ app.user.firstName }}"
  162.                 class="lg:w-full lg:h-full w-10 h-10 object-cover object-center rounded-full bg-brand"
  163.               >
  164.               <span class="lg:hidden group-hover:text-brand inline-block text-base font-normal leading-[3rem] text-gray-900 whitespace-nowrap">Account</span>
  165.             </a>
  166.             <div class="lg:hidden hidden lg:group-hover:block lg:absolute z-10 lg:top-12 lg:-right-1 lg:bg-white min-w-max lg:w-48 flex flex-col w-full rounded-xl shadow-xl py-6">
  167.               <a href="/user/profile" class="block hover:bg-slate-200 py-2.5 px-4 text-base font-normal text-neutral-600">
  168.                 My Account
  169.               </a>
  170.                <a href="/user/payment-history" class="block hover:bg-slate-200 py-2.5 px-4 text-base font-normal text-neutral-600">
  171.                 My Payment History
  172.               </a>
  173.               <a href="/user/messages" class="block hover:bg-slate-200 py-2.5 px-4 text-base font-normal text-neutral-600">
  174.                 My Messages
  175.               </a>
  176.               <a href="/logout" class="block hover:bg-slate-200 py-2.5 px-4 text-base font-normal text-neutral-600">
  177.                 Logout
  178.               </a>
  179.             </div>
  180.           </div>
  181.           <div class="lg:hidden inline-block leading-[3rem] overflow-hidden lg:mr-8 mt-4 relative">
  182.             <a
  183.               href="/donate"
  184.               class="
  185.                 inline-block
  186.                 w-full
  187.                 lg:hidden
  188.                 bg-brand
  189.                 hover:bg-transparent
  190.                 border
  191.                 border-brand
  192.                 transition-all
  193.                 duration-300
  194.                 py-2
  195.                 px-5
  196.                 rounded-full
  197.                 text-base
  198.                 font-semibold
  199.                 leading-6
  200.                 text-white
  201.                 hover:text-brand
  202.                 lg:w-auto
  203.                 text-center
  204.                 lg:mr-5
  205.               "
  206.             >
  207.               Donate
  208.             </a>
  209.                         <a href="/logout" class="w-full text-center hover:text-brand inline-block text-base font-normal leading-[3rem] text-gray-900 whitespace-nowrap">
  210.                             Logout
  211.                         </a>
  212.                     </div>
  213.                 {% endif %}
  214.       </div>
  215.       <div class="ml-auto justify-end flex lg:hidden">
  216.         <button class="navbar-open w-10 h-10 bg-transparent transition-all inline-flex items-center justify-center rounded">
  217.           <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" class="fill-brand w-6 h-6" viewBox="0 0 50 50">
  218.             <path d="M 0 9 L 0 11 L 50 11 L 50 9 Z M 0 24 L 0 26 L 50 26 L 50 24 Z M 0 39 L 0 41 L 50 41 L 50 39 Z"></path>
  219.           </svg>
  220.         </button>
  221.       </div>
  222.     </div>
  223.   </nav>
  224. </div>
  226. <script>
  227.   const menu = document.querySelector('.menu')
  228.   const opener = document.querySelector('.navbar-open')
  229.   const closer = document.querySelector('.navbar-close')
  230.   const backdrop = document.querySelector('.backdrop')
  232.   const closeMenu = () => {
  233.     document.body.classList.remove('overflow-hidden')
  234.     menu.classList.add('hidden')
  235.     menu.classList.remove('flex')
  236.     menu.classList.remove('-left-full')
  237.     menu.classList.remove('left-0')
  238.     backdrop.classList.add('hidden')
  239.   }
  241.   backdrop.addEventListener('click', () => {
  242.     closeMenu()
  243.   })
  245.   opener.addEventListener('click', () => {
  246.     document.body.classList.add('overflow-hidden')
  247.     menu.classList.remove('hidden')
  248.     menu.classList.add('flex')
  249.     menu.classList.remove('-left-full')
  250.     menu.classList.add('left-0')
  251.     backdrop.classList.remove('hidden')
  252.   })
  254.   window.addEventListener('resize', (e) => {
  255.     e.preventDefault()
  256.     if (window.innerWidth >=1536)
  257.       document.body.classList.remove('overflow-hidden')
  258.   })
  260.   closer.addEventListener('click', () => {
  261.     closeMenu()
  262.   })
  263. </script>