RESPONSIVE ANALİZ 27 Aralık 2025

Muzibu Responsive Sidebar Analizi

Hangi çözünürlükte hangi sidebar görünüyor? Detaylı breakpoint haritası.

Basit Anlatım (Herkes İçin)

Muzibu'da 3 ana bölüm var: Sol menü (navigasyon), Ana içerik (şarkılar/playlistler), Sağ panel (yeni/popüler şarkılar).

Telefonda (0-767px): Sadece ana içerik görünür. Sol menü hamburger butonu ile açılır.
Tablette (768-1023px): Aynı telefon gibi, hamburger menü kullanılır.
Küçük Laptop (1024-1279px): Sol menü görünür, sağ panel hala gizli.
Büyük Ekran (1280px+): Her üç bölüm de görünür - tam deneyim!

Teknik Detaylar (Geliştiriciler İçin)

Tailwind Breakpoint'ler:

sm: 640px
md: 768px
lg: 1024px (Sol sidebar açılır)
xl: 1280px (Sağ sidebar açılır)
2xl: 1536px

İlgili Dosyalar:

resources/views/themes/muzibu/layouts/app.blade.php
resources/views/themes/muzibu/components/sidebar-left.blade.php
resources/views/themes/muzibu/components/sidebar-right.blade.php
public/themes/muzibu/css/muzibu-layout.css

Breakpoint Haritası

Çözünürlük	Hamburger	Sol Sidebar	Ana İçerik	Sağ Sidebar	Arama Kutusu
0 - 639px Küçük Telefon		Gizli (Hamburger ile açılır)	Tek Kolon	Gizli	Gizli
640 - 767px Büyük Telefon (sm)		Gizli	Tek Kolon	Gizli	Gizli
768 - 1023px Tablet (md)		Gizli	Tek Kolon	Gizli	Gizli
1024 - 1279px Laptop (lg)	Gizli	220px	Kalan Alan	Gizli	Görünür
1280 - 1535px Büyük Laptop (xl)	Gizli	220px	Kalan Alan	320px	Görünür
1536px+ Masaüstü (2xl)	Gizli	220px	Kalan Alan	360px	Görünür

Görsel Diagram

Mobil

0-1023px

Logo

Ana İçerik

Sol sidebar hamburger ile açılır

Laptop

1024-1279px

Logo

Sol Menü

Ana İçerik

Sağ sidebar hala gizli

Masaüstü

1280px+

Logo

Sol

Ana İçerik

Sağ

Tam deneyim - 3 kolon

Kod Referansları

Ana Grid Layout

Dosya: app.blade.php:424-428

class="grid
  grid-rows-[56px_1fr_auto]     // Header + Content + Player
  grid-cols-1                    // Mobile: tek kolon
  lg:grid-cols-[220px_1fr]        // 1024px+: Sol sidebar + İçerik
  xl:grid-cols-[220px_1fr_320px]  // 1280px+: + Sağ sidebar 320px
  2xl:grid-cols-[220px_1fr_360px] // 1536px+: Sağ sidebar 360px
"

Sol Sidebar

Dosya: sidebar-left.blade.php:3-6

class="muzibu-left-sidebar row-start-2
  hidden       // Varsayılan: Gizli
  lg:flex      // 1024px+: Görünür (flex)
  lg:flex-col  // Dikey düzen
"

Sağ Sidebar

Dosya: app.blade.php:439

class="muzibu-right-sidebar row-start-2 overflow-y-auto rounded-2xl
  hidden     // Varsayılan: Gizli
  xl:block   // 1280px+: Görünür
"

Hamburger Menü

Dosya: header.blade.php:4-9

class="lg:hidden text-muzibu-text-gray hover:text-white"
// 1024px altında görünür, üstünde gizli

Arama Kutusu

Dosya: header.blade.php:121

class="...
  hidden     // Varsayılan: Gizli (mobilde)
  lg:block   // 1024px+: Görünür
"

Sağ Sidebar - Hangi Sayfalarda Görünür?

Sağ sidebar sadece müzik sayfalarında görünür. Dashboard, Corporate, Profile gibi sayfalarda gizlenir.

Görünür Olduğu Sayfalar:

muzibu.home - Ana Sayfa
muzibu.songs.show - Şarkı Detay
muzibu.albums.* - Albümler
muzibu.artists.* - Sanatçılar
muzibu.playlists.* - Playlistler
muzibu.genres.* - Türler
muzibu.sectors.* - Sektörler
muzibu.radios.* - Radyolar
muzibu.search - Arama
muzibu.favorites - Favoriler
muzibu.my-playlists - Playlistlerim

Gizli Olduğu Sayfalar:

dashboard - Kullanıcı Paneli
corporate/* - Kurumsal Sayfalar
profile - Profil
subscription/* - Üyelik
login/register - Giriş/Kayıt

Kod: app.blade.php:397-416 - $showRightSidebar değişkeni route kontrolü yapar

Özet

1024px

Sol sidebar açılır

1280px

Sağ sidebar açılır

1536px

Sağ sidebar genişler