v5 - Header & Left Sidebar Detayli Analiz

Responsive Header & Sidebar Mockups

Acilma Animasyonlari, Alternatifler ve Tum Detaylar

27 Aralik 2025

Basit Anlatim (Herkes Icin)

Ne Yapiyoruz: Muzibu'nun ust menusunu (header) ve sol yan menusunu (sidebar) farkli ekran boyutlarinda nasil gorunecegini ve nasil calisacagini planliyoruz.

Neden Onemli: Telefondan girdiginde hamburger menuye tiklayinca menu nasil acilacak? Tablette nasil gorunecek? Masaustunde nasil duracak? Hepsini tasarliyoruz.

Telefon (< 768px)

Hamburger butonu, menu soldan kayarak acilir, arkada karanlik overlay

Tablet (768-1023px)

Hamburger butonu, menu soldan kayar, overlay hafif

Masaustu (1024px+)

Menu her zaman gorunur, hamburger yok

Teknik Detaylar (Gelistiriciler Icin)

Breakpoint Yapisi:

< 768px - Mobile: Hamburger + Overlay Sidebar
768-1023px - Tablet: Hamburger + Overlay Sidebar
>= 1024px - Desktop: Static Sidebar

Ilgili Dosyalar:

resources/views/themes/muzibu/components/header.blade.php
resources/views/themes/muzibu/components/sidebar-left.blade.php
public/themes/muzibu/js/muzibu-store.js

Header Tasarimlari

Her viewport icin header alternatifleri

375px Mobile

A Minimal Header (Onerilen)

muzibu

+ Hamburger sol, arama ve profil sag
+ Logo merkez hissiyati
+ Temiz, minimal gorunum

B Centered Logo

muzibu

+ Logo tam ortada
+ Instagram/TikTok tarzi
- Daha sikisik gorunebilir

768px Tablet

A Search Bar Gorunur (Onerilen)

muzibu

Ara...

+ Arama kutusu gorunur
+ Hamburger menu sol tarafta
+ Bildirim ikonu eklendi

B Compact Search

muzibu

+ Arama butonu (tiklaninca acilir)
+ Daha fazla bos alan
- Ekstra tikla gerektirir

1024px+ Desktop

FINAL Full Header (Degisiklik Yok)

muzibu

Sarki, sanatci, album ara...

Nurullah

+ Hamburger yok (sidebar zaten gorunur)
+ Genis arama alani
+ Kullanici adi gorunur

Left Sidebar Alternatifleri

Acilma sekli, gorunum ve davranis

Acilma Animasyonlari

1 Slide In (Onerilen)

translateX(-100%) -> translateX(0)

+ En yaygin pattern

+ Performansli (GPU accelerated)

2 Fade + Slide

translateX + opacity

+ Daha yumusak gecis

+ Premium his

3 Push Content

Content (itilir)

margin-left transition

+ Icerik gorunur kalir

- Kucuk ekranda sikisik

Kapanma Davranislari

Overlay'e Tikla

Karanlik alana tiklayinca kapat

Zorunlu

X Butonu

Sidebar icinde kapat butonu

Zorunlu

Swipe Left

Sola kaydirarak kapat

Opsiyonel

ESC Tusu

Klavyeden ESC ile kapat

Desktop

Sidebar Tasarim Alternatifleri

A Classic Dark (Mevcut / Onerilen)

muzibu

Nurullah

Premium Uye

Ana Sayfa Playlistler Albumler

+ Mevcut tasarimla uyumlu
+ Koyu tema, goz yormaz

B Glass Effect (Premium His)

muzibu

Nurullah

Premium Uye

Ana Sayfa Playlistler

+ Modern ve premium
- iOS Safari'de sorun olabilir

Mobile vs Tablet Sidebar Farklari

Ozellik	Mobile (< 768px)	Tablet (768-1023px)
Sidebar Genisligi	280px	320px
Overlay Transparanligi	70% siyah	50% siyah
Font Boyutlari	text-sm (14px)	text-base (16px)
Swipe Kapama	Aktif	Opsiyonel

Tam Ekran Mockuplar

Sidebar acik haliyle tum goruntu

375px Mobile Sidebar Acik Hali

muzibu

Sidebar: 280px Overlay: 70% Slide-in: 300ms

768px Tablet Sidebar Acik Hali

muzibu

Nurullah

Premium Uye

12 playlist - 245 favori

Ana Sayfa Playlistler Albumler

Kutuphanem

Favorilerim 245

Sidebar: 320px Overlay: 50% Istatistik gorunur

CSS & JS Spesifikasyonlari

Teknik uygulama detaylari

CSS Degiskenleri

:root {
  --sidebar-width-mobile: 280px;
  --sidebar-width-tablet: 320px;
  --sidebar-width-desktop: 220px;
  --overlay-mobile: rgba(0,0,0,0.7);
  --overlay-tablet: rgba(0,0,0,0.5);
  --transition-duration: 300ms;
}

Z-Index Hierarchy

Header z-30

Overlay z-40

Left Sidebar (Mobile) z-50

Modals z-60

Onerilen Yaklasim

Header

Alternatif A (Minimal). Hamburger sol, logo yaninda, arama sag.

Sidebar Acilma

Slide-In animasyon. 300ms sure, ease-out easing.

Sidebar Tasarim

Alternatif A (Classic Dark). Mevcut tema ile uyumlu.

Bu tasarimlari onayla veya degisiklik iste:

"UYGUNDUR"