title: Different states depending on screen size with Alpine.js
body: <p>I need the  <code>x-on:mouseenter=&quot;itemActive = {{ index }}&quot;</code> and <code>x-on:mouseleave=&quot;itemActive = false&quot;</code> states to be <code>x-on:click=&quot;itemActive = {{ index }}&quot;</code> and <code>x-on:click.away=&quot;itemActive = false&quot;</code> on screen smaller than 768px. The code below works perfectly with the hover part for larger screens but can't seem to figure out how to make it work with different screen sizes.</p>
  <p>I am using Twig, Tailwind and Alpine.JS.</p>
  <pre><code>&lt;div x-data=&quot;{itemActive: false}&quot; class=&quot;w-full pb-12 mt-5 overflow-x-hidden overflow-y-scroll md:flex md:flex-wrap md:w-auto md:mt-0 md:pb-0 md:overflow-visible&quot;&gt;
  
    {% for item in menu.items %} {% set index = loop.index0 %}
  
    &lt;div x-on:mouseenter=&quot;itemActive = {{ index }}&quot; x-on:mouseleave=&quot;itemActive = false&quot; class=&quot;flex flex-wrap w-full md:block md:w-auto {{ item.classes|join(' ') }}&quot;&gt;
  
      &lt;a :class=&quot;{'bg-gray-900' : itemActive === {{ index }}}&quot; class=&quot;flex flex-wrap items-center justify-between w-full h-10 px-4 cursor-pointer md:h-14 md:justify-start md:w-auto&quot; href=&quot;{{ item.link }}&quot;&gt;
        {{ item.title }}      
        {% if item.children %}
          &lt;span&gt;&lt;i class=&quot;pl-2 fa fa-caret-down&quot;&gt;&lt;/i&gt;&lt;/span&gt;
        {% endif %}
      &lt;/a&gt;
  
      {% if item.children %}
      &lt;div x-show=&quot;itemActive === {{ index }}&quot; class=&quot;absolute z-10 w-48 bg-gray-900&quot;&gt;
        {% for child in item.children %}
        &lt;a class=&quot;flex flex-wrap items-center h-12 px-4 transition-colors cursor-pointer md:h-14 hover:bg-gray-700&quot; href=&quot;{{ child.link }}&quot; &gt;
          {{ child.title }}
        &lt;/a&gt;
        {% endfor %}      
      &lt;/div&gt; 
      {% endif %}
  
    &lt;/div&gt;
  
    {% endfor %}
    
  &lt;/div&gt;
  </code></pre>
  <p>Any suggestions?</p>