Sağ Sidebar Görünürlük Sistemi

📝 Basit Anlatım (Herkes İçin)

Sağ sidebar, Muzibu sitesinde ekranın sağ tarafında çıkan panel. Bu panel müzik sayfalarında gösterilir, diğer sayfalarda gizlenir.

Sağ Sidebar Göründüğü Yerler

• Ana sayfa
• Şarkılar sayfası
• Albümler sayfası
• Playlistler sayfası
• Türler (Genre) sayfası
• Sektörler sayfası
• Radyolar sayfası
• Arama sayfası
• Favoriler sayfası
• Playlistlerim sayfası
• Kurumsal Playlistler
• Dinleme Geçmişi

Sağ Sidebar Gizlendiği Yerler

• Profil sayfası
• Ayarlar sayfası
• Giriş/Kayıt sayfaları
• Ödeme sayfaları
• Kurumsal dashboard
• Diğer statik sayfalar

Responsive Davranış

Mobil (768px altı): Sağ sidebar tamamen gizli
Tablet (768px - 1024px): Sol sidebar hamburger menü, sağ sidebar görünür
Desktop (1024px üstü): Her iki sidebar da görünür

🔧 Teknik Detaylar (Geliştiriciler İçin)

1. PHP Route Kontrolü

Dosya: resources/views/themes/muzibu/layouts/app.blade.php
Satır: 467-490

@php
    $showRightSidebar = in_array(Route::currentRouteName(), [
        'muzibu.home',
        'muzibu.songs.index',
        'muzibu.songs.show',
        'muzibu.albums.index',
        'muzibu.albums.show',
        'muzibu.artists.index',
        'muzibu.artists.show',
        'muzibu.playlists.index',
        'muzibu.playlists.show',
        'muzibu.genres.index',
        'muzibu.genres.show',
        'muzibu.sectors.index',
        'muzibu.sectors.show',
        'muzibu.radios.index',
        'muzibu.search',
        'muzibu.favorites',
        'muzibu.my-playlists',
        'muzibu.corporate-playlists',
        'muzibu.listening-history',
    ]);
@endphp

2. Grid Layout Class Sistemi

Dosya: app.blade.php
Satır: 492-496

✅ Sağ Sidebar Var

md:grid-cols-[1fr_280px]
lg:grid-cols-[220px_1fr_280px]
xl:grid-cols-[220px_1fr_320px]
2xl:grid-cols-[220px_1fr_360px]

❌ Sağ Sidebar Yok

lg:grid-cols-[220px_1fr]
xl:grid-cols-[220px_1fr]
2xl:grid-cols-[220px_1fr]

3. Hybrid Sistem: PHP Initial + Alpine SPA

Dosya: app.blade.php
Satır: 501-506

<div id="main-app-grid"
    class="grid {{ $initialGridCols }}"
    x-bind:class="$store.sidebar?.rightSidebarVisible
        ? '{{ $gridColsWithSidebar }}'
        : '{{ $gridColsNoSidebar }}'"
>

İlk Yükleme: PHP değişkeni ($initialGridCols) kullanılır.
SPA Navigasyon: Alpine.js store ($store.sidebar.rightSidebarVisible) ile dinamik güncellenir.

4. Sidebar Element Görünürlüğü

Dosya: app.blade.php
Satır: 519-524

<aside
    class="muzibu-right-sidebar {{ $showRightSidebar ? 'hidden md:block' : 'hidden' }}"
    x-bind:class="$store.sidebar?.rightSidebarVisible ? 'md:block' : 'hidden'"
>
    @include('themes.muzibu.components.sidebar-right')
</aside>

🎨 Sağ Sidebar İçerik Modları

Dosya: resources/views/themes/muzibu/components/sidebar-right.blade.php

Mode 1

Preview Mode

Liste elemanına (playlist, album, genre, sector) tıklandığında aktif olur.

Gösterir:

• Büyük kapak resmi + gradient overlay
• Favori butonu + Play All butonu
• Şarkı listesi (thumbnail + duration + favorite + 3-dot menu)
• Kendi playlist'i ise: Sürükle-bırak (reorder) + Şarkı çıkar (delete)
• Infinite scroll (100'e kadar) + Pagination (100+ için)

Satır: 58-530

Mode 2

Detail Page Mode

Detay sayfasında (album show, playlist show) ve preview mode aktif değilken çalışır.

Gösterir:

• Büyük kapak resmi + gradient overlay
• Favori butonu + Play All butonu
• Entity bilgileri (type, title, song count)
• Şarkı listesi (thumbnail + favorite + 3-dot menu)

Satır: 533-641

Mode 3

Homepage Default

Preview ve detail page mode değilse (ana sayfa, liste sayfaları vb.) varsayılan içerik gösterilir.

Gösterir:

• Premium Header + Gradient Background
• Tab Sistemi: "Yeni Şarkılar" ve "Popüler Şarkılar"
• Tab'a göre başlık + ikon değişir (⭐ Yeni / 🔥 Popüler)
• Şarkı listesi (PHP'den gelen $newSongs ve $popularSongs)

Satır: 645-745

📱 Responsive Breakpoints

Breakpoint	Ekran Genişliği	Sol Sidebar	Sağ Sidebar	Sağ Sidebar Genişliği
Mobile	< 768px	Hamburger Menu	Gizli	-
Tablet	768px - 1023px	Hamburger Menu	Görünür	280px
Desktop (LG)	1024px - 1279px	Görünür (220px)	Görünür	280px
Desktop (XL)	1280px - 1535px	Görünür (220px)	Görünür	320px
Desktop (2XL)	≥ 1536px	Görünür (220px)	Görünür	360px

💡 Önemli Notlar

1. Hybrid Yaklaşım

Sistem hem PHP hem de Alpine.js kullanır. İlk yükleme PHP ile olur, SPA navigasyonları Alpine.js store ile yönetilir. Bu sayede hem SEO dostu hem de dinamik bir yapı sağlanır.

2. Grid Layout

CSS Grid kullanılarak responsive layout sağlanır. Tailwind'in grid-cols-[...] syntax'ı ile sabit genişlikler tanımlanır. Mobilde tek sütun, tablette 2 sütun, desktop'ta 3 sütun layout çalışır.

3. Dinamik İçerik

Sağ sidebar içeriği Alpine.js x-if ve x-show direktifleri ile dinamik olarak değişir. Preview mode, detail page mode ve homepage default mode arasında geçiş yapar.

4. Mobile First

Mobilde sağ sidebar gizli olduğu için performans kazancı sağlanır. Tablet ve üstünde sidebar yüklendiğinde infinite scroll ve pagination ile büyük listeler optimize edilir.

📊 Sağ Sidebar Görünen Route'lar

muzibu.home

muzibu.songs.index

muzibu.songs.show

muzibu.albums.index

muzibu.albums.show

muzibu.artists.index

muzibu.artists.show

muzibu.playlists.index

muzibu.playlists.show

muzibu.genres.index

muzibu.genres.show

muzibu.sectors.index

muzibu.sectors.show

muzibu.radios.index

muzibu.search

muzibu.favorites

muzibu.my-playlists

muzibu.corporate-playlists

muzibu.listening-history

Toplam: 19 route'da sağ sidebar gösteriliyor