templates/network/horse/components/tab_navigation_component.html.twig line 1

Open in your IDE?
  1. {% do tab_navigation_add({ name: 'timeline', action: 'timeline' }) %}
  2. {% do tab_navigation_add({ name: 'auction-history', action: 'auction_history' }) %}
  3. {% do tab_navigation_add({ name: 'pedigree', action: 'pedigree' }) %}
  4. {% do tab_navigation_add({ name: 'achievements', action: 'achievements' }) %}
  5. {% do tab_navigation_add({ name: 'news', action: 'news' }) %}
  6. {# {% do tab_navigation_add({ name: 'horse-statistics', action: 'horse_statistics' }) %} #}
  8. {# {% do tab_navigation_add({ name: 'racelist', action: 'racelist' }) %}
  9. {% do tab_navigation_add({ name: 'horses', action: 'horses' }) %}
  10. {% do tab_navigation_add({ name: 'achievements', action: 'achievements' }) %}
  11. {% do tab_navigation_add({ name: 'attendees', action: 'attendees' }) %} #}
  13. {# {% do tab_navigation_add({ name: 'news', action: 'news' }) %} #}
  15. {# <section id="tab_navigation" class="sm:container">
  16.   <div class="flex-wrap hidden w-full gap-4 my-4 sm:flex">
  17.     {% for item in tab_navigation_get() %}
  18.       {% set highlighted = null %}
  20.       {% if highlightedTab is defined %}
  21.         {% set highlighted = highlightedTab
  22.           == path('horse_tab_navigation_' ~ item.action, { id: horse.id })
  23.         %}
  24.       {% endif %}
  26.       <turbo-frame target="tab_content">
  27.         <a id="{{ item.name ~ '-' ~ horse.id }}"
  28.           href="{{ path('horse_tab_navigation_' ~ item.action, { id: horse.id }) }}"
  29.           class="{{ highlighted ? 'btn-sm btn btn-primary' : 'btn-sm btn btn-neutral' }}"
  30.           style="{{
  31.           highlighted and horse.owner and horse.owner.color
  32.             ? 'color:white; background-color:' ~ horse.owner.color
  33.           }}">
  34.           {{ item.name|trans }}
  35.         </a>
  36.       </turbo-frame>
  37.     {% endfor %}
  38.   </div>
  40.   <div>
  41.     <div class="block sm:hidden sticky top-20 w-screen max-w-full z-1000 {{
  42.       horse.owner and horse.owner.color
  43.         ? ''
  44.         : 'bg-primary-500'
  45.       }} overflow-hidden shadow-md"
  46.       style="background-color: {{ horse.owner and horse.owner.color ? horse.owner.color : '' }};">
  47.       <div data-controller="tab-navigation"
  48.         data-section-navigation-active-class="text-white bg-black"
  49.         data-section-navigation-inactive-class="text-black bg-neutral-200 "
  50.         id="profile-scroll-bar"
  51.         class="relative inline-flex items-center w-screen gap-4 p-3 overflow-scroll sm:my-3 snap-x snap-mandatory sm:flex">
  52.         {% for item in tab_navigation_get() %}
  53.           {% set highlighted = null %}
  54.           {% if highlightedTab is defined %}
  55.             {% set highlighted = highlightedTab
  56.               == path('horse_tab_navigation_' ~ item.action, { id: horse.id })
  57.             %}
  58.           {% endif %}
  60.           <turbo-frame class="py-2 w-fit min-w-fit" target="tab_content">
  61.             <a href="{{ path('horse_tab_navigation_' ~ item.action, { id: horse.id }) }}"
  62.               class="flex-none p-3 text-sm font-medium tracking-widest {{
  63.               highlighted
  64.                 ? 'text-white bg-black active'
  65.                 : 'text-black bg-neutral-200 inactive'
  66.               }} uppercase  snap-center snap-always">
  67.               {{ item.name|trans }}
  68.             </a>
  69.           </turbo-frame>
  70.         {% endfor %}
  71.       </div>
  72.     </div>
  73.   </div>
  74. </section> #}
  76. <section id="tab_navigation"
  77.   class="{{ horse.owner and horse.owner.color ? '' : 'bg-primary-500' }} mb-4"
  78.   style="background-color: {{ horse.owner and horse.owner.color ? horse.owner.color : '' }};">
  79.   <div class=" sm:flex-wrap sm:container sm:flex hidden w-full gap-4 p-4 {{
  80.     horse.owner and horse.owner.color
  81.       ? ''
  82.       : 'bg-primary-500'
  83.     }}"
  84.     style="background-color: {{ horse.owner and horse.owner.color ? horse.owner.color : '' }};"
  85.     data-controller="tab-navigation">
  86.     {% for item in tab_navigation_get() %}
  87.       {% set highlighted = null %}
  89.       {% if highlightedTab is defined %}
  90.         {% set highlighted = highlightedTab
  91.           == path('horse_tab_navigation_' ~ item.action, { id: horse.id })
  92.         %}
  93.       {% endif %}
  95.       <turbo-frame class="{{ not highlighted ? 'bg-white' }}" target="tab_content">
  96.         <a id="{{ item.name ~ '-' ~ horse.id }}"
  97.           href="{{ path('horse_tab_navigation_' ~ item.action, { id: horse.id }) }}"
  98.           class="{{ highlighted ? 'btn-sm btn btn-white active' : 'btn-sm btn btn-neutral' }} "
  99.           style="{{
  100.           not highlighted and horse.owner
  101.             ? 'color:white;  background-color: rgba(' ~ horse.owner.color.r ~ ','
  102.               ~ horse.owner.color.g
  103.               ~ ','
  104.               ~ horse.owner.color.b
  105.               ~ ',0.6'
  106.           }}">
  107.           {{ item.name|trans }}
  108.         </a>
  109.       </turbo-frame>
  110.     {% endfor %}
  111.   </div>
  113.   <div>
  114.     <div class="block sm:hidden sticky top-20 w-screen max-w-full z-1000  {{
  115.       horse.owner and horse.owner.color
  116.         ? ''
  117.         : 'bg-primary-500'
  118.       }} overflow-hidden shadow-md"
  119.       style="background-color: {{ horse.owner and horse.owner.color ? horse.owner.color : '' }};">
  120.       <div data-controller="tab-navigation"
  121.         data-section-navigation-active-class="text-white bg-black"
  122.         data-section-navigation-inactive-class="text-black bg-neutral-200 "
  123.         id="profile-scroll-bar"
  124.         class="relative inline-flex items-center w-screen gap-4 p-3 mx-1 overflow-scroll sm:my-3 snap-x snap-mandatory sm:flex">
  125.         {% for item in tab_navigation_get() %}
  126.           {% set highlighted = null %}
  127.           {% if highlightedTab is defined %}
  128.             {% set highlighted = highlightedTab
  129.               == path('horse_tab_navigation_' ~ item.action, { id: horse.id })
  130.             %}
  131.           {% endif %}
  133.           <turbo-frame class=" w-fit min-w-fit {{ not highlighted ? 'bg-white' }}"
  134.             target="tab_content">
  135.             <a href="{{ path('horse_tab_navigation_' ~ item.action, { id: horse.id }) }}"
  136.               class="flex-none p-3 text-sm font-medium tracking-widest {{
  137.               highlighted
  138.                 ? 'btn-sm btn btn-white active'
  139.                 : 'btn-sm btn btn-neutral inactive'
  140.               }} uppercase "
  141.               style="{{
  142.               not highlighted and horse.owner
  143.                 ? 'color:white;  background-color: rgba(' ~ horse.owner.color.r ~ ','
  144.                   ~ horse.owner.color.g
  145.                   ~ ','
  146.                   ~ horse.owner.color.b
  147.                   ~ ',0.6'
  148.               }}">
  149.               {{ item.name|trans }}
  150.             </a>
  151.           </turbo-frame>
  152.         {% endfor %}
  153.       </div>
  154.     </div>
  155.   </div>
  156. </section>