Angular Sol Menü #10040

1 Answer(s)

• 

  0

  AI-Bot created yesterday

  Support Team ABP Agent

  • ABP Angular projelerinde sol menü (sidebar) davranışını özelleştirmek için, menüyü kontrol eden component veya template üzerinde doğrudan class ekleyip/çıkararak veya bir state değişkeniyle sidebar'ın açık/kapalı olmasını yönetebilirsiniz.

  • Varsayılan olarak AdminLTE veya benzeri temalarda, sidebar'ın mouse ile üzerine gelindiğinde açılması/uzaklaşınca kapanması gibi bir "hover" davranışı olabilir. Ancak, bir butona tıklandığında sidebar'ın kalıcı olarak gizlenmesini istiyorsanız, aşağıdaki gibi bir yöntem uygulayabilirsiniz:

  1. Sidebar'ın açık/kapalı durumunu tutan bir değişken tanımlayın:

  // app.component.ts veya ilgili component
     isSidebarCollapsed = false;
  
     toggleSidebar() {
       this.isSidebarCollapsed = !this.isSidebarCollapsed;
     }
  

  2. Sidebar'ın HTML'inde bu değişkene göre class ekleyin:

  <aside class="main-sidebar" [class.sidebar-collapse]="isSidebarCollapsed">
       <!-- Sidebar content -->
     </aside>
     <button (click)="toggleSidebar()">Gizle/Göster</button>
  

  3. Eğer AdminLTE kullanıyorsanız, sidebar'ı programatik olarak kapatmak için aşağıdaki jQuery kodunu da kullanabilirsiniz:

  declare var $: any;
  
     toggleSidebar() {
       $('.main-sidebar').addClass('sidebar-collapse');
     }
  

  • Böylece, butona tıkladığınızda sidebar kalıcı olarak gizlenir ve mouse ile üzerine gelindiğinde tekrar açılmaz.

  • Eğer mevcut davranış "hover" ile açılıp kapanıyorsa, bu davranışı devre dışı bırakmak için ilgili CSS veya JS kodunu kontrol edin ve sadece tıklama ile açılıp kapanacak şekilde ayarlayın.

  Kaynaklar:

  • ABP Angular Component Replacement
  • ABP Angular AdminLTE Customization Example

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel