How to have a way to use different twig templates depending on the viewport , or having a twig variables that give the info ?
An example was using foundation sticky classes on twigh templates. The stickyness was making a mess on the mobile view
<div id="sidebar-first" {{ create_attribute({'class': sidebar_first_classes }) }} data-sticky-container> <div class="sticky" data-sticky data-top-anchor="sidebar-first:top" data-btm-anchor="main:bottom"> {{ page.sidebar_first }} I had to somehow remove the classes using JS:
function revealSidebar() { const sidebar: HTMLElement | null = document.querySelector('.sidebar-first'); const sticky: HTMLElement | null = document.querySelector('.sticky'); if (sidebar != null) { // Stickyness ne doit pas être opérante sur mobile if (sticky != null) { while (sticky.attributes.length > 0) sticky.removeAttribute(sticky.attributes[0].name); sticky.classList.remove('sticky'); } sidebar.style.display = 'block'; sidebar.style.height = '320px'; sidebar.classList.remove('sticky-container'); } const reveal = document.querySelector('.reveal-button') as HTMLElement; reveal.style.display = 'none'; } 
