components/aside.html.twig

{% set currentDevice = app.request.attributes.get('_route_params').device|default('') %}

<aside>
  <h2>Devices</h2>
  <input type="text" id="device-search" placeholder="Search devices" onkeyup="searchDevices()">
  {% for vendor, devices in deviceVendors %}
    {% set hasSelectedDevice = false %}
    {% for device in devices %}
      {% if device.codename == currentDevice %}
        {% set hasSelectedDevice = true %}
      {% endif %}
    {% endfor %}
    <div class="accordion-item">
      <input type="checkbox" id="vendor-{{ loop.index }}" name="accordion" hidden {{ hasSelectedDevice ? 'checked' : '' }}/>
      <label class="accordion-label" for="vendor-{{ loop.index }}">
        <div class="label-content">
          <img class="icon" src="{{ asset('assets/images/svg/mobile.svg') }}" alt=""/>
          <span style="font-weight: bold">{{ vendor }}</span>
        </div>
      </label>

      <div class="accordion-content">
        <ul>
          {% for device in devices %}
            <li>
              <a href="{{ path('leaf_wiki_device', { device: device.codename }) }}" class="device-box {{ device.codename == currentDevice ? 'selected-device' : '' }}">
                {{ device.name }}
                <span style="font-size: 15px;">({{ device.codename }})</span>
              </a>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  {% endfor %}
</aside>