Yan panel

<div data-trds="yan-panel">
  <button class="trds-button trds-button--ikincil" type="button" data-trds-panel-ac>Süzgeçleri aç</button>
  <dialog class="trds-yan-panel" aria-labelledby="yp-baslik">
    <div class="trds-yan-panel__ust"><h2 class="trds-yan-panel__baslik" id="yp-baslik">Süzgeçler</h2><button class="trds-button trds-button--ikincil trds-button--simge" type="button" aria-label="Paneli kapat" data-trds-kapat><svg class="trds-simge" aria-hidden="true"><use href="#edk-close"/></svg></button></div>
    <div class="trds-yan-panel__govde"><div class="trds-alan"><label class="trds-etiket" for="yp-il">İl</label><select class="trds-secim" id="yp-il"><option>Ankara</option><option>İstanbul</option></select></div></div>
    <div class="trds-yan-panel__alt"><button class="trds-button" type="button" data-trds-kapat>Uygula</button></div>
  </dialog>
</div>
<div data-trds="yan-panel" class="trds-u-ust-4">
  <button class="trds-button trds-button--ikincil" type="button" data-trds-panel-ac>Alt sayfayı aç</button>
  <dialog class="trds-yan-panel trds-yan-panel--alt" aria-labelledby="as-baslik">
    <div class="trds-yan-panel__ust"><h2 class="trds-yan-panel__baslik" id="as-baslik">Paylaş</h2><button class="trds-button trds-button--ikincil trds-button--simge" type="button" aria-label="Kapat" data-trds-kapat><svg class="trds-simge" aria-hidden="true"><use href="#edk-close"/></svg></button></div>
    <div class="trds-yan-panel__govde"><ul class="trds-liste trds-liste--sade"><li><a class="trds-link" href="#">Bağlantıyı kopyala</a></li><li><a class="trds-link" href="#">E-posta ile gönder</a></li></ul></div>
  </dialog>
</div>

<div data-trds="yan-panel">
  <button class="trds-button trds-button--ikincil" type="button" data-trds-panel-ac><svg class="trds-simge" aria-hidden="true"><use href="#edk-question23"/></svg> Yardım</button>
  <dialog class="trds-yan-panel trds-yan-panel--sol" aria-labelledby="yardim-baslik">
    <div class="trds-yan-panel__ust"><h2 class="trds-yan-panel__baslik" id="yardim-baslik">Bu sayfa hakkında</h2><button class="trds-button trds-button--ikincil trds-button--simge" type="button" aria-label="Yardımı kapat" data-trds-kapat><svg class="trds-simge" aria-hidden="true"><use href="#edk-close"/></svg></button></div>
    <div class="trds-yan-panel__govde"><dl class="trds-tanim"><div class="trds-tanim__satir"><dt>Prim günü</dt><dd>Sigortalı çalıştığınız her gün için bir prim günü işlenir.</dd></div><div class="trds-tanim__satir"><dt>Hizmet dökümü</dt><dd>Bütün işverenleriniz ve prim günleriniz.</dd></div></dl><p class="trds-govde">Daha fazlası için <a class="trds-link" href="#">Alo 170</a>.</p></div>
  </dialog>
</div>