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