Kullanım Senaryosu: Mobil Uyumlu Hamburger Menü

Bu senaryoda iki farklı menü kontrolü bulunmaktadır:

  1. Collapse Menü: Menü daraltıldığında ikonlar görünür, içerik alanı genişler. Menü geniş/küçük arasında geçiş yapılabilir.
  2. Hamburger Collapse Menü: Menü tamamen kapatılır ve sadece sol üstte küçük bir ☰ (hamburger) ikon görünür. Bu ikonla menü tekrar açılabilir.

Senaryo: Hamburger Menü ile Menüyü Tamamen Aç/Kapat

Mobil kullanıcılar, ekranın sol üst köşesindeki ☰ ikonuna tıklayarak menüyü tamamen açmalı veya kapatabilmelidir.

Uygulama Adımları:

  1. UI ekranına bir Icon elementi yerleştirin.
    • İkon: Hamburger (☰)
  2. Icon’a şu aksiyonu tanımlayın:
    • OnClick → UI Control → Toggle Hamburger Collapse Menu
    • Component to Change: hamburgerMenu

Bu yapı sayesinde kullanıcılar, menüyü tamamen kapatarak daha geniş bir içerik alanı elde edebilir.

Ek Senaryo: Menü Boyutunu Daraltma (Collapse Menu)

Kullanıcılar, menü açıkken menüyü daraltmak (sadece ikonları göstermek) için ayrı bir buton kullanabilir.

Uygulama Adımları:

  1. UI ekranına bir buton veya ikon elementi yerleştirin.
  2. Bu elemente şu aksiyonu tanımlayın:
    • OnClick → UI Control → Toggle Collapse Menu
    • Component to Change: sidebarMenu

Bu sayede kullanıcılar menüyü tamamen kapatmak yerine sadece daraltarak alan kazanabilir.