src/StartPlatz/Bundle/StyleBundle/Resources/views/Navigation/_nav.public.tailwind.html.twig line 1

Open in your IDE?
  1. {# Tailwind Public Navigation — STARTPLATZ #}
  2. {# Port of _nav.homepage.bootstrap4.html.twig using Tailwind + Alpine.js #}
  3. {# Data source: menuLinksAndPhrases (Twig global via MenuTranslationExtension) #}
  5. {% set menuLinks      = menuLinksAndPhrases.menuLinks %}
  6. {% set menuPhrases    = menuLinksAndPhrases.menuPhrases %}
  7. {% set targetPath     = menuLinksAndPhrases.targetPath %}
  8. {% set lang           = menuLinksAndPhrases.lang %}
  9. {% set menuLinksDe2En = menuLinksAndPhrases.menuLinksDe2En %}
  10. {% set menuLinksEn2De = menuLinksAndPhrases.menuLinksEn2De %}
  11. {% set menuLinksDe2Fr = menuLinksAndPhrases.menuLinksDe2Fr %}
  12. {% set menuLinksFr2De = menuLinksAndPhrases.menuLinksFr2De %}
  13. {% set menuLinksEn2Fr = menuLinksAndPhrases.menuLinksEn2Fr %}
  14. {% set menuLinksFr2En = menuLinksAndPhrases.menuLinksFr2En %}
  16. <nav x-data="{ mobileOpen: false }" class="fixed top-0 left-0 right-0 z-50 bg-gray-900 text-white shadow-lg" style="padding-bottom: 2px;">
  17.     <div class="flex items-center justify-center px-4 py-2">
  18.         {# Logo #}
  19.         <a href="https://www.startplatz.de" class="flex-shrink-0 mr-4" title="Home for the innovative people in Rheinland">
  20.             <img src="https://res.cloudinary.com/startplatz/image/upload/c_scale,w_107/v1614775778/logos/STARTPLATZ_Logos/STARTPLATZ_Logo_wei%C3%9F.png"
  21.                  alt="STARTPLATZ" class="h-8">
  22.         </a>
  24.         {# Mobile Toggle #}
  25.         <button @click="mobileOpen = !mobileOpen" class="lg:hidden ml-auto p-2 text-white">
  26.             <svg x-show="!mobileOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  27.                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
  28.             </svg>
  29.             <svg x-show="mobileOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  30.                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
  31.             </svg>
  32.         </button>
  34.         {# Desktop + Mobile Menu #}
  35.         <ul class="hidden lg:flex items-center space-x-1 text-sm mt-1"
  36.             :class="{ '!flex flex-col absolute top-full left-0 right-0 bg-gray-900 p-4 space-x-0 space-y-1 max-h-[90vh] overflow-y-auto': mobileOpen, 'hidden': !mobileOpen }"
  37.             style="max-width: 920px;">
  39.             {# ── AI Hub ── #}
  40.             {% set aiHubUrl = (lang == 'EN') ? 'https://startplatz-ai-hub.de/en/' : 'https://startplatz-ai-hub.de' %}
  41.             <li class="my-1">
  42.                 <a href="{{ aiHubUrl }}"
  43.                    class="block px-3 py-1.5 rounded-[10px] text-white text-center hover:text-black hover:bg-[#aacf61]"
  44.                    style="background-color: rgba(142,86,255,1.0); min-width: 75px;">
  45.                     AI Hub
  46.                 </a>
  47.             </li>
  49.             {# ── Startups ── #}
  50.             <li x-data="{ open: false }" @click.away="open = false" @mouseenter="open = true" @mouseleave="open = false" class="relative my-1">
  51.                 <button @click="open = !open"
  52.                         class="flex items-center px-2 py-1.5 text-white hover:bg-[#aacf61] hover:text-black hover:rounded">
  53.                     Startups
  54.                     <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
  55.                 </button>
  56.                 <div x-show="open" x-transition class="lg:absolute left-0 mt-1 w-56 bg-[#eae9e9] rounded shadow-lg py-1 z-50">
  57.                     <hr class="my-1 mx-3 border-gray-400">
  58.                     <a href="{{ attribute(menuLinks, '/memberships') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  59.                         {{ attribute(menuPhrases, 'memberships') }}
  60.                     </a>
  61.                     <hr class="my-1 mx-3 border-gray-400">
  62.                     <a href="/accelerator/" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">Accelerator</a>
  63.                     <a href="{{ attribute(menuLinks, '/rheinland-pitch') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  64.                         {{ attribute(menuPhrases, 'rheinland-pitch') }}
  65.                     </a>
  66.                     <a href="{{ attribute(menuLinks, '/gruenderstipendium') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  67.                         {{ attribute(menuPhrases, 'gruenderstipendium') }}
  68.                     </a>
  69.                 </div>
  70.             </li>
  72.             {# ── Unternehmen / Corporates ── #}
  73.             {% set corporateHighlight = false %}
  74.             {% if lang == 'DE' %}
  75.                 {% if 'fuer-unternehmen' in targetPath or '/fuer-unternehmen-1' in targetPath %}
  76.                     {% set corporateHighlight = true %}
  77.                 {% endif %}
  78.             {% else %}
  79.                 {% if 'en/corporate-innovation' in targetPath or 'en/corporate-innovation-1' in targetPath %}
  80.                     {% set corporateHighlight = true %}
  81.                 {% endif %}
  82.             {% endif %}
  83.             <li x-data="{ open: false }" @click.away="open = false" @mouseenter="open = true" @mouseleave="open = false" class="relative my-1 {{ corporateHighlight ? 'border-b-[3px] border-[#AACF61]' : '' }}">
  84.                 <button @click="open = !open"
  85.                         class="flex items-center px-2 py-1.5 text-white hover:bg-[#aacf61] hover:text-black hover:rounded">
  86.                     {{ attribute(menuPhrases, 'corporate') }}
  87.                     <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
  88.                 </button>
  89.                 <div x-show="open" x-transition class="lg:absolute left-0 mt-1 w-56 bg-[#eae9e9] rounded shadow-lg py-1 z-50">
  90.                     <a href="{{ attribute(menuLinks, '/innovation-partnerschaften') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  91.                         {{ attribute(menuPhrases, 'innovation-partnerschaften') }}
  92.                     </a>
  93.                     <a href="{{ attribute(menuLinks, '/ki-weiterbildung') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  94.                         {{ attribute(menuPhrases, 'ki-weiterbildung') }}
  95.                     </a>
  96.                 </div>
  97.             </li>
  99.             {# ── Büros / Offices ── #}
  100.             <li x-data="{ open: false }" @click.away="open = false" @mouseenter="open = true" @mouseleave="open = false" class="relative my-1">
  101.                 <button @click="open = !open"
  102.                         class="flex items-center px-2 py-1.5 text-white hover:bg-[#aacf61] hover:text-black hover:rounded">
  103.                     {{ attribute(menuPhrases, 'coworking-offices') }}
  104.                     <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
  105.                 </button>
  106.                 <div x-show="open" x-transition class="lg:absolute right-0 mt-1 w-64 bg-[#eae9e9] rounded shadow-lg py-1 z-50">
  107.                     <a href="{{ attribute(menuLinks, '/offices-cologne') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  108.                         {{ attribute(menuPhrases, 'offices-cologne') }}
  109.                     </a>
  110.                     <a href="{{ attribute(menuLinks, '/offices-duesseldorf') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  111.                         {{ attribute(menuPhrases, 'offices-duesseldorf') }}
  112.                     </a>
  113.                     <a href="{{ attribute(menuLinks, '/coworking-cologne') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  114.                         {{ attribute(menuPhrases, 'coworking-cologne') }}
  115.                     </a>
  116.                     <a href="{{ attribute(menuLinks, '/coworking-duesseldorf') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  117.                         {{ attribute(menuPhrases, 'coworking-duesseldorf') }}
  118.                     </a>
  119.                     <a href="{{ attribute(menuLinks, '/geschaeftsadresse-cologne') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  120.                         {{ attribute(menuPhrases, 'geschaeftsadresse-cologne') }}
  121.                     </a>
  122.                     <a href="{{ attribute(menuLinks, '/geschaeftsadresse-duesseldorf') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  123.                         {{ attribute(menuPhrases, 'geschaeftsadresse-duesseldorf') }}
  124.                     </a>
  125.                 </div>
  126.             </li>
  128.             {# ── Konferenzräume ── #}
  129.             <li x-data="{ open: false }" @click.away="open = false" @mouseenter="open = true" @mouseleave="open = false" class="relative my-1">
  130.                 <button @click="open = !open"
  131.                         class="flex items-center px-2 py-1.5 text-white hover:bg-[#aacf61] hover:text-black hover:rounded">
  132.                     {{ attribute(menuPhrases, 'tagen') }}
  133.                     <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
  134.                 </button>
  135.                 <div x-show="open" x-transition class="lg:absolute right-0 mt-1 w-64 bg-[#eae9e9] rounded shadow-lg py-1 z-50">
  136.                     <a href="{{ attribute(menuLinks, '/tagungsraum-koeln') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  137.                         {{ attribute(menuPhrases, 'tagungsraum-koeln') }}
  138.                     </a>
  139.                     <a href="{{ attribute(menuLinks, '/tagungsraum-dus') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  140.                         {{ attribute(menuPhrases, 'tagungsraum-dus') }}
  141.                     </a>
  142.                 </div>
  143.             </li>
  145.             {# ── Events ── #}
  146.             <li class="my-1 {{ 'events' in targetPath ? 'border-b-[3px] border-[#AACF61]' : '' }}">
  147.                 <a href="{{ attribute(menuLinks, '/events') }}"
  148.                    class="block px-2 py-1.5 text-white hover:bg-[#aacf61] hover:text-black hover:rounded">
  149.                     {{ attribute(menuPhrases, 'events') }}
  150.                 </a>
  151.             </li>
  153.             {# ── Über uns ── #}
  154.             {% set aboutHighlight = false %}
  155.             {% if lang == 'DE' %}
  156.                 {% if 'presse' in targetPath or 'standorte' in targetPath or 'startplatz-team' in targetPath
  157.                     or 'partner' in targetPath or 'startups' in targetPath or 'jobs' in targetPath or 'software' in targetPath
  158.                     or 'sprechstunden' in targetPath or 'referenzen' in targetPath or 'carrer' in targetPath %}
  159.                     {% set aboutHighlight = true %}
  160.                 {% endif %}
  161.             {% else %}
  162.                 {% if '/en/presse' in targetPath or '/en/standorte' in targetPath or '/en/startplatz-team' in targetPath
  163.                     or '/en/partner' in targetPath or '/en/startups' in targetPath or '/en/jobs' in targetPath or '/en/software' in targetPath
  164.                     or '/en/sprechstunden' in targetPath or '/en/referenzen' in targetPath or '/en/carrer' in targetPath %}
  165.                     {% set aboutHighlight = true %}
  166.                 {% endif %}
  167.             {% endif %}
  168.             <li x-data="{ open: false }" @click.away="open = false" @mouseenter="open = true" @mouseleave="open = false" class="relative my-1 {{ aboutHighlight ? 'border-b-[3px] border-[#AACF61]' : '' }}">
  169.                 <button @click="open = !open"
  170.                         class="flex items-center px-2 py-1.5 text-white hover:bg-[#aacf61] hover:text-black hover:rounded">
  171.                     {{ attribute(menuPhrases, 'ueber-uns') }}
  172.                     <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
  173.                 </button>
  174.                 <div x-show="open" x-transition class="lg:absolute right-0 mt-1 w-56 bg-[#eae9e9] rounded shadow-lg py-1 z-50">
  175.                     <a href="{{ attribute(menuLinks, '/ueber-startplatz') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  176.                         {{ attribute(menuPhrases, 'ueber-startplatz') }}
  177.                     </a>
  178.                     <a href="{{ attribute(menuLinks, '/standorte') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  179.                         {{ attribute(menuPhrases, 'standorte') }}
  180.                     </a>
  181.                     <a href="{{ attribute(menuLinks, '/startplatz-team') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  182.                         {{ attribute(menuPhrases, 'startplatz-team') }}
  183.                     </a>
  184.                     {# Partner link → new /partners route #}
  185.                     <a href="{{ lang == 'EN' ? '/en/partners' : '/partners' }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  186.                         {{ attribute(menuPhrases, 'partner') }}
  187.                     </a>
  188.                     <a href="{{ attribute(menuLinks, '/startups') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  189.                         {{ attribute(menuPhrases, 'startups') }}
  190.                     </a>
  191.                     <a href="{{ attribute(menuLinks, '/referenzen') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  192.                         {{ attribute(menuPhrases, 'referenzen') }}
  193.                     </a>
  194.                     <a href="{{ attribute(menuLinks, '/career') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">
  195.                         {{ attribute(menuPhrases, 'career') }}
  196.                     </a>
  197.                 </div>
  198.             </li>
  200.             {# ── Blog ── #}
  201.             <li class="my-1">
  202.                 <a href="{{ attribute(menuLinks, '/blog') }}"
  203.                    class="block px-2 py-1.5 text-white hover:bg-[#aacf61] hover:text-black hover:rounded">
  204.                     {{ attribute(menuPhrases, 'blog') }}
  205.                 </a>
  206.             </li>
  208.             {# ── Language Switcher ── #}
  209.             <li x-data="{ open: false }" @click.away="open = false" @mouseenter="open = true" @mouseleave="open = false" class="relative my-1">
  210.                 <button @click="open = !open"
  211.                         class="flex items-center px-2 py-1.5 text-white hover:bg-[#aacf61] hover:text-black hover:rounded">
  212.                     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>
  213.                     <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
  214.                 </button>
  215.                 <div x-show="open" x-transition class="lg:absolute right-0 mt-1 w-16 bg-[#eae9e9] rounded shadow-lg py-1 z-50">
  216.                     {# German #}
  217.                     {% if attribute(menuLinksEn2De, targetPath) is defined %}
  218.                         <a class="block px-3 py-2 hover:bg-[#aacf61]" href="{{ attribute(menuLinksEn2De, targetPath) }}">
  219.                             <img src="/bundles/startplatzstyle/images/german_language.png" class="h-5" alt="Deutsch">
  220.                         </a>
  221.                     {% elseif attribute(menuLinksFr2De, targetPath) is defined %}
  222.                         <a class="block px-3 py-2 hover:bg-[#aacf61]" href="{{ attribute(menuLinksFr2De, targetPath) }}">
  223.                             <img src="/bundles/startplatzstyle/images/german_language.png" class="h-5" alt="Deutsch">
  224.                         </a>
  225.                     {% else %}
  226.                         <a class="block px-3 py-2 hover:bg-[#aacf61]" href="/">
  227.                             <img src="/bundles/startplatzstyle/images/german_language.png" class="h-5" alt="Deutsch">
  228.                         </a>
  229.                     {% endif %}
  231.                     {# English #}
  232.                     {% if attribute(menuLinksDe2En, targetPath) is defined %}
  233.                         <a class="block px-3 py-2 hover:bg-[#aacf61]" href="{{ attribute(menuLinksDe2En, targetPath) }}">
  234.                             <img src="/bundles/startplatzstyle/images/english_language.png" class="h-5" alt="English">
  235.                         </a>
  236.                     {% elseif attribute(menuLinksFr2En, targetPath) is defined %}
  237.                         <a class="block px-3 py-2 hover:bg-[#aacf61]" href="{{ attribute(menuLinksFr2En, targetPath) }}">
  238.                             <img src="/bundles/startplatzstyle/images/english_language.png" class="h-5" alt="English">
  239.                         </a>
  240.                     {% else %}
  241.                         <a class="block px-3 py-2 hover:bg-[#aacf61]" href="/en">
  242.                             <img src="/bundles/startplatzstyle/images/english_language.png" class="h-5" alt="English">
  243.                         </a>
  244.                     {% endif %}
  246.                     {# French #}
  247.                     {% if attribute(menuLinksDe2Fr, targetPath) is defined %}
  248.                         <a class="block px-3 py-2 hover:bg-[#aacf61]" href="{{ attribute(menuLinksDe2Fr, targetPath) }}">
  249.                             <img src="/bundles/startplatzstyle/images/french_language.png" class="h-5" alt="Français">
  250.                         </a>
  251.                     {% elseif attribute(menuLinksEn2Fr, targetPath) is defined %}
  252.                         <a class="block px-3 py-2 hover:bg-[#aacf61]" href="{{ attribute(menuLinksEn2Fr, targetPath) }}">
  253.                             <img src="/bundles/startplatzstyle/images/french_language.png" class="h-5" alt="Français">
  254.                         </a>
  255.                     {% else %}
  256.                         <a class="block px-3 py-2 hover:bg-[#aacf61]" href="/fr/">
  257.                             <img src="/bundles/startplatzstyle/images/french_language.png" class="h-5" alt="Français">
  258.                         </a>
  259.                     {% endif %}
  260.                 </div>
  261.             </li>
  263.             {# ── User / Login ── #}
  264.             {% if app.user %}
  265.                 <li x-data="{ open: false }" @click.away="open = false" @mouseenter="open = true" @mouseleave="open = false" class="relative my-1 ml-3">
  266.                     {# Desktop: Avatar circle #}
  267.                     <button @click="open = !open" class="hidden lg:block w-[45px] h-[45px] rounded-full overflow-hidden bg-gray-200">
  268.                         <img src="{{ app.user.member.imageLink }}"
  269.                              alt="" class="w-full h-full object-cover rounded-full border-2 border-white shadow-inner">
  270.                     </button>
  271.                     {# Mobile: Text link #}
  272.                     <button @click="open = !open" class="lg:hidden flex items-center px-2 py-1.5 text-white hover:bg-[#aacf61] hover:text-black hover:rounded">
  273.                         <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
  274.                         {{ app.user }}
  275.                     </button>
  276.                     <div x-show="open" x-transition class="lg:absolute right-0 mt-1 w-48 bg-[#eae9e9] rounded shadow-lg py-1 z-50">
  277.                         <span class="block px-4 py-2 text-sm font-semibold text-gray-800" style="background-color: rgba(170,207,97,0.6);">
  278.                             {{ app.user.username }}
  279.                         </span>
  280.                         <a href="{{ path('connect_member_show') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">My Profile</a>
  281.                         <a href="{{ path('x_home') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">SP-Connect</a>
  282.                         {% if is_granted('ROLE_ADMIN') %}
  283.                             <a href="{{ path('allmeda_home') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">Allmeda</a>
  284.                         {% endif %}
  285.                         <hr class="my-1 border-gray-400">
  286.                         <a href="{{ path('logout') }}" class="block px-4 py-2 text-sm text-gray-800 hover:bg-[#aacf61]">Logout</a>
  287.                     </div>
  288.                 </li>
  289.             {% else %}
  290.                 <li class="my-1 ml-4">
  291.                     <a href="{{ path('login') }}"
  292.                        class="block px-4 py-1.5 text-white rounded bg-[#7ab800] hover:bg-[#5a8c00] transition-colors">
  293.                         Login
  294.                     </a>
  295.                 </li>
  296.             {% endif %}
  297.         </ul>
  298.     </div>
  299. </nav>