custom/plugins/EsmComputer/src/Resources/views/storefront/layout/social-media-icons.html.twig line 1

Open in your IDE?
  2. <div class="side-icons">
  3.     <div class="social-media-icons">
  4.         <a href="https://www.youtube.com/channel/UCwn19G22Bkl0RKX8vtbyxsw" target="_blank">
  5.             <img src="{{ asset('bundles/esmcomputer/assets/images/Grün_4.png') }}" alt="Youtube" title="Youtube" style="width: 40px; height: 40px;margin-bottom: 5px;cursor: pointer;">
  6.         </a>
  7.         <a href="https://www.facebook.com/esmcomputer/?locale=de_DE" target="_blank">
  8.             <img src="{{ asset('bundles/esmcomputer/assets/images/Grün_3.png') }}" alt="Facebook" title="Facebook" style="width: 40px; height: 40px; margin-bottom: 5px;">
  9.         </a>
  10.         <a href="https://www.instagram.com/esmcomputer/" target="_blank">
  11.             <img src="{{ asset('bundles/esmcomputer/assets/images/Grün_2.png') }}" alt="Instagram" title="Instagram" style="width: 40px; height: 40px; margin-bottom: 5px;" target="_blank">
  12.         </a>
  13.         <a href="https://www.tiktok.com/@esmcomputer" target="_blank">
  14.             <img src="{{ asset('bundles/esmcomputer/assets/images/Grün_1.png') }}" alt="Tiktok" title="Tiktok" style="width: 40px; height: 40px;margin-bottom: 5px;cursor: pointer;">
  15.         </a>
  16.     </div>
  17.     <a onclick="closeSocialMedia()" style="cursor: pointer;" class="arrow-open" >
  18.         {% sw_icon 'arrow-circle-right' %}
  19.     </a>
  20.     <a onclick="openSocialMedia()" class="arrow-close" style="display: none; cursor: pointer;">
  21.         {% sw_icon 'arrow-circle-left' %}
  22.     </a>
  23. </div>
  27. <div class="mob-social-media-icons">
  28.     <span>
  29.         <b> FOLGE UNS JETZT: </b>
  30.     </span>
  31.     <a href="https://www.youtube.com/channel/UCwn19G22Bkl0RKX8vtbyxsw" target="_blank">
  32.         <img src="{{ asset('bundles/esmcomputer/assets/images/Weiß_4.png') }}" alt="Youtube" title="Youtube" style="width: 40px; height: 40px; cursor: pointer;">
  33.     </a>
  34.     <a href="https://www.facebook.com/esmcomputer/?locale=de_DE" target="_blank">
  35.         <img src="{{ asset('bundles/esmcomputer/assets/images/Weiß_3.png') }}" alt="Facebook" title="Facebook" style="width: 40px; height: 40px;">
  36.     </a>
  37.     <a href="https://www.instagram.com/esmcomputer/" target="_blank">
  38.         <img src="{{ asset('bundles/esmcomputer/assets/images/Weiß_2.png') }}" alt="Instagram" title="Instagram" style="width: 40px; height: 40px;">
  39.     </a>
  40.     <a href="https://www.tiktok.com/@esmcomputer" target="_blank">
  41.         <img src="{{ asset('bundles/esmcomputer/assets/images/Weiß_1.png') }}" alt="Tiktok" title="Tiktok" style="width: 40px; height: 40px;margin-bottom: 5px;cursor: pointer;">
  42.     </a>
  43.     <a onclick="closeMobSocialMedia()" style="cursor: pointer;">
  44.         {% sw_icon 'x' %}
  45.     </a>
  46. </div>
  47. <script>
  48.     if(localStorage.getItem('socialMedia') === 'close') {
  49.         closeSocialMedia();
  50.     }
  51.     if(localStorage.getItem('mobSocialMedia') === 'close') {
  52.         closeMobSocialMedia();
  53.     }
  54.     function closeMobSocialMedia() {
  55.             document.querySelector('.mob-social-media-icons').style.display = 'none';
  56.             localStorage.setItem('mobSocialMedia', 'close');
  57.     }
  58.     function closeSocialMedia() {
  59.         localStorage.setItem('socialMedia', 'close');
  60.         document.querySelector('.social-media-icons').style.display = 'none';
  61.         document.querySelector('.arrow-open').style.display = 'none';
  62.         document.querySelector('.arrow-close').style.display = 'block';
  63.     }
  64.     function openSocialMedia() {
  65.         localStorage.setItem('socialMedia', 'open');
  66.         document.querySelector('.social-media-icons').style.display = 'flex';
  67.         document.querySelector('.arrow-open').style.display = 'block';
  68.         document.querySelector('.arrow-close').style.display = 'none';
  69.     }
  70. </script>