GUNCELLENDI - v2 RESPONSIVE 27 Aralik 2025

Muzibu Responsive Sidebar Analizi

Yeni breakpoint yapisi: 768px'den itibaren sag sidebar gorunur!

Yapilan Degisiklikler

Onceki Durum:

  • Sag sidebar: 1280px+ (xl)
  • 768-1279px arasi: Sag sidebar gizli

Yeni Durum:

  • Sag sidebar: 768px+ (md)
  • 768-1023px: Sadece sag sidebar (sol gizli)
  • 1024px+: Her iki sidebar da gorunur

Basit Anlatim (Herkes Icin)

Artik 768px genislikten itibaren sag sidebar (yeni/populer sarkilar) gorunuyor!

Yeni Breakpoint Haritasi

Cozunurluk Hamburger Sol Sidebar Ana Icerik Sag Sidebar Preview Davranisi
0 - 767px
Mobil
 Gizli Tek Kolon Gizli Detay Sayfaya Git
768 - 1023px
YENI!
 Gizli Kalan Alan 280px Sag Sidebar'da Ac
1024 - 1279px
Laptop (lg)
 Gizli 220px Kalan Alan 280px Sag Sidebar'da Ac
1280 - 1535px
Buyuk Laptop (xl)
 Gizli 220px Kalan Alan 320px Sag Sidebar'da Ac
1536px+
Masaustu (2xl)
 Gizli 220px Kalan Alan 360px Sag Sidebar'da Ac

Gorsel Diagram

Mobil

0-767px
Ana Icerik

Tek kolon

Tablet

768-1023px
Icerik
Sag

YENI! Sag sidebar gorunur

Laptop

1024px+
Sol
Icerik
Sag

3 kolon - tam deneyim

Masaustu

1536px+

Genis sag sidebar (360px)

Teknik Degisiklikler

Grid Layout Degisikligi

Dosya: app.blade.php:421-422

// ONCEKI:
$gridCols = 'xl:grid-cols-[220px_1fr_320px] 2xl:grid-cols-[220px_1fr_360px]'
// YENI:
$gridCols = 'md:grid-cols-[1fr_280px] lg:grid-cols-[220px_1fr_280px] xl:grid-cols-[220px_1fr_320px] 2xl:grid-cols-[220px_1fr_360px]'

Sag Sidebar Gorunurluk

Dosya: app.blade.php:445

// ONCEKI:
class="... hidden xl:block"
// YENI:
class="... hidden md:block"

Preview Responsive Davranis

Dosya: muzibu-store.js:1447-1462

async showPreview(type, id, info) {
    // 768px altinda preview degil, detay sayfaya git
    if (window.innerWidth < 768) {
        const urlMap = {
            playlist: '/playlists/',
            album: '/albums/',
            genre: '/genres/',
            ...
        };
        window.location.href = urlMap[type] + (info?.slug || id);
        return;
    }

    // 768px+ sag sidebar'da preview ac
    this.previewMode = true;
    ...
}

Degisiklik Ozeti

768px
Sag sidebar acilir
YENI!
1024px
Sol sidebar acilir
1280px
Sag: 280px -> 320px
1536px
Sag: 320px -> 360px

Degisiklik Yapilan Dosyalar