templates/areas/footer-brick/partials/_column_regular_language_socials.html.twig line 1

Open in your IDE?
  1. <div>
  2.     <div class="px-5 pb-4 mb-4 -mx-5 border-b border-white md:mb-4 sm:mx-0 sm:px-0 border-opacity-10 sm:border-none sm:pb-0"
  3.         x-data="{ open: false }"
  4.         >
  5.         <div class="flex items-center justify-between cursor-pointer sm:mb-6 sm:cursor-none"
  6.             @click="open = !open"
  7.             :class="{ 'mb-6' : open }"
  8.         >
  9.             <h4 class="text-lg md:text-2xl">{{ pimcore_input('footer_'~column_id~"_title", {'placeholder': "Voeg titel toe" }) }}</h4>
  10.             <span
  11.                 class="flex items-center justify-center w-5 h-3 transition-all duration-300 sm:hidden shrink-0"
  12.                 :class="{ 'rotate-180' : open }"
  13.             >
  14.                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 10">
  15.                     <path fill="#8A8D94" fill-rule="evenodd"
  16.                             d="m.389 2.36 6.73 6.963c.24.25.576.39.926.39.35 0 .685-.14.925-.39l6.732-6.963a1.206 1.206 0 0 0-.067-1.749l-.113-.09a1.297 1.297 0 0 0-1.67.154l-5.807 6.01L2.239.677A1.295 1.295 0 0 0 .456.612 1.204 1.204 0 0 0 .39 2.36H.389Z"/>
  17.                 </svg>
  18.             </span>
  19.         </div>
  20.         <div class="block overflow-hidden max-h-0 sm:max-h-max"
  21.             :style="open ? `max-height: 100%` : ``"
  22.         >
  23.             <ul>
  24.                 {% for columnlinks in pimcore_iterate_block(pimcore_block('footer_'~column_id~"_links")) %}
  25.                     <li>
  26.                         {{ pimcore_link('footer_sub_link_'~column_id, {'class': "hover:text-blue"}) }}
  27.                     </li>
  28.                 {% endfor %}
  29.             </ul>
  30.         </div>
  31.     </div>
  33.     <div class="mb-6">
  34.         <h5 class="mb-3 text-lg">{{ "Taal"|trans }}</h5>
  35.         {% include 'app/partials/languageswitch.html.twig' with {'theme': 'dark' } %}
  36.     </div>
  38.     <h5 class="mb-3 text-lg">{{ "Volg ons op"|trans }}</h5>
  40.     <div class="flex">
  41.         {% if pimcore_website_config('facebook_url', null, data.request.locale) %}
  42.             <a href="{{ pimcore_website_config('facebook_url', null, data.request.locale) }}"
  43.                 class="flex items-center justify-center w-10 h-10 mr-2 transition bg-gray-900 rounded-full shrink-0 hover:bg-gray-800"
  44.                 target="_blank">
  45.                 <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
  46.                     <defs>
  47.                         <path id="facebook-svg" d="M6.397 16V8.844H4V6h2.397V3.76c0-2.435 1.487-3.76 3.66-3.76 1.04 0 1.934.078 2.193.113v2.543h-1.506c-1.181 0-1.41.563-1.41 1.385V6H12l-.366 2.844h-2.3V16"></path>
  48.                     </defs>
  49.                     <use xlink:href="#facebook-svg" fill="#fff" fill-rule="evenodd"></use>
  50.                 </svg>
  51.             </a>
  52.         {% endif %}
  54.         {% if pimcore_website_config('twitter_url', null, data.request.locale) %}
  55.             <a href="{{ pimcore_website_config('twitter_url', null, data.request.locale) }}"
  56.                 class="flex items-center justify-center w-10 h-10 mr-2 transition bg-gray-900 rounded-full shrink-0 hover:bg-gray-800"
  57.                 target="_blank">
  58.                     <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 14"><defs><path id="twitter-svg" d="M14.355 4.741c.01.142.01.284.01.427 0 4.335-3.299 9.33-9.33 9.33A9.267 9.267 0 0 1 0 13.024c.264.03.518.041.792.041a6.567 6.567 0 0 0 4.07-1.401 3.285 3.285 0 0 1-3.065-2.274c.203.03.406.05.62.05.294 0 .588-.04.862-.111A3.28 3.28 0 0 1 .65 6.112v-.04c.437.243.945.395 1.483.415A3.277 3.277 0 0 1 .67 3.757c0-.61.162-1.168.447-1.655a9.321 9.321 0 0 0 6.761 3.431 3.702 3.702 0 0 1-.081-.751 3.278 3.278 0 0 1 3.28-3.28c.943 0 1.796.397 2.395 1.036a6.456 6.456 0 0 0 2.081-.792 3.27 3.27 0 0 1-1.441 1.807c.66-.07 1.3-.253 1.888-.507a7.049 7.049 0 0 1-1.645 1.695Z"/></defs><use xlink:href="#twitter-svg" fill="#FFF" fill-rule="evenodd" transform="translate(0 -1)"/></svg>
  59.             </a>
  60.         {% endif %}
  62.         {% if pimcore_website_config('linkedin_url', null, data.request.locale) %}
  63.             <a href="{{ pimcore_website_config('linkedin_url', null, data.request.locale) }}"
  64.                 class="flex items-center justify-center w-10 h-10 mr-2 transition bg-gray-900 rounded-full shrink-0 hover:bg-gray-800"
  65.                 target="_blank">
  66.                     <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 256 256"><g fill="#FFF" stroke-miterlimit="10" stroke-width="0"><path d="M6.11 85.736h52.254v168.076H6.109V85.736zM32.237 2.188c16.701 0 30.274 13.573 30.274 30.302 0 16.712-13.573 30.285-30.274 30.285-16.74 0-30.274-13.573-30.274-30.285 0-16.73 13.533-30.302 30.274-30.302M91.127 85.736h50.107v22.983h.714c6.974-13.22 24.02-27.145 49.426-27.145 52.898 0 62.662 34.8 62.662 80.055v92.183h-52.215v-81.736c0-19.496-.34-44.566-27.146-44.566-27.184 0-31.332 21.25-31.332 43.166v83.136H91.127V85.736z"/></g></svg>
  67.             </a>
  68.         {% endif %}
  70.         {% if pimcore_website_config('instagram_url', null, data.request.locale) %}
  71.             <a href="{{ pimcore_website_config('instagram_url', null, data.request.locale) }}"
  72.                 class="flex items-center justify-center w-10 h-10 mr-2 transition bg-gray-900 rounded-full shrink-0 hover:bg-gray-800"
  73.                 target="_blank">
  74.                 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="w-4 h-4" viewBox="0 0 16 16"><defs><path id="insta-svg" d="M8.004 3.929a4.079 4.079 0 0 0-4.086 4.085A4.079 4.079 0 0 0 8.004 12.1a4.079 4.079 0 0 0 4.085-4.086A4.079 4.079 0 0 0 8.004 3.93Zm0 6.741a2.66 2.66 0 0 1-2.656-2.656 2.659 2.659 0 0 1 2.656-2.656 2.659 2.659 0 0 1 2.656 2.656 2.66 2.66 0 0 1-2.656 2.656Zm5.205-6.908a.95.95 0 0 1-.953.953.953.953 0 1 1 .953-.953Zm2.706.967c-.06-1.277-.352-2.407-1.287-3.339-.932-.93-2.063-1.223-3.34-1.287C9.974.028 6.03.028 4.716.103c-1.274.06-2.406.352-3.34 1.284C.441 2.318.153 3.449.089 4.725.014 6.041.014 9.984.089 11.3c.06 1.276.352 2.407 1.287 3.338.935.932 2.062 1.223 3.339 1.287 1.315.075 5.258.075 6.574 0 1.276-.06 2.407-.352 3.339-1.287.931-.931 1.223-2.062 1.287-3.338.074-1.316.074-5.256 0-6.571Zm-1.7 7.982a2.689 2.689 0 0 1-1.515 1.515c-1.048.416-3.537.32-4.696.32-1.16 0-3.652.092-4.697-.32a2.689 2.689 0 0 1-1.515-1.515c-.416-1.049-.32-3.538-.32-4.697 0-1.159-.092-3.651.32-4.697a2.689 2.689 0 0 1 1.515-1.514c1.049-.416 3.537-.32 4.697-.32 1.159 0 3.651-.093 4.696.32a2.689 2.689 0 0 1 1.515 1.514c.416 1.05.32 3.538.32 4.697 0 1.16.096 3.652-.32 4.697Z"/></defs><use xlink:href="#insta-svg" fill="#FFF" fill-rule="evenodd"/></svg>
  75.             </a>
  76.         {% endif %}
  78.         {% if pimcore_website_config('xing_url', null, data.request.locale) %}
  79.             <a href="{{ pimcore_website_config('xing_url', null, data.request.locale) }}"
  80.                 class="flex items-center justify-center w-10 h-10 mr-2 transition bg-gray-900 rounded-full shrink-0 hover:bg-gray-800"
  81.                 target="_blank">
  82.                     <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 540.543 540.543"><path fill="#FFF" d="M129.989 378.772c8.274 0 15.361-5.006 21.243-15.036 53.813-95.423 81.806-145.093 83.991-149.028L181.63 121.25c-5.667-9.804-12.858-14.707-21.567-14.707h-78.11c-5.019 0-8.495 1.634-10.459 4.902-2.399 3.268-2.289 7.301.325 12.087l52.613 91.176c.214.232.214.331 0 .331L41.75 361.453c-2.172 4.149-2.172 8.066 0 11.757 2.173 3.715 5.557 5.562 10.129 5.562h78.11zM488.492 0h-78.758c-8.495 0-15.472 4.902-20.912 14.707C277.053 212.97 219.206 315.596 215.283 322.555l110.784 203.282c5.227 9.804 12.418 14.706 21.567 14.706h78.104c4.791 0 8.28-1.634 10.459-4.902 2.172-3.715 2.068-7.748-.325-12.099L326.073 322.555v-.318L498.627 16.995c2.393-4.571 2.393-8.592 0-12.087C496.662 1.634 493.284 0 488.492 0z"/></svg>
  83.             </a>
  84.         {% endif %}
  85.     </div>
  86. </div>