Header, Navbar ve Mobil Menü

Bu sayfa üst çubuğu anlatır: logo, masaüstü menü (navbar), tema, dil ve mobil hamburger menü.

Menü verisi artık tek bir header-nav.ts dosyasında değil; src/config/nav/ altında: nav1.ts (megaMenus), navbar3-menus.ts (megaMenusNavbar3), page-link.ts (sitePageMenuLink). Eski kök nav.ts üst menü için kullanılmıyor.

Layout geneli: Site Layout. Footer: Navigasyon sayfasının footer bölümü.

---

Üç parça — karıştırma

Sitede üst kısım üç ayrı şey gibi düşün:

Parça	Ne?	Nerede?
Header	Üst çubuğun iskeleti (logo + menü alanı + sağ butonlar)	Header.astro
Navbar	Masaüstünde gördüğün menü tasarımı (1, 2 veya 3)	Navbar1.astro … Navbar3.astro
Mobil menü	Küçük ekranda hamburger → sağdan açılan çekmece	MobileNav.tsx

Önemli: Hangi navbar’ı seçersen seç (navbar1, navbar2, navbar3), mobil menü hep aynıdır (MobileNav). Navbar seçimi sadece md ve üzeri (tablet/desktop geniş) ekranı etkiler.

---

Sayfada nasıl görünür?

BaseLayout
  └── Header.astro          ← kabuk
        ├── HeaderLogo      ← logo + site adı
        ├── Navbar1/2/3     ← masaüstü menü (seçtiğin tasarım)
        └── HeaderActions   ← tema, dil, WhatsApp, hamburger
              └── MobileNav ← mobil çekmece (React)

Senin yapman gereken çoğu zaman: src/config/nav/ ve routes.ts içinde linkleri düzenlemek veya Navbar2.astro gibi bir dosyada görünümü değiştirmek.

---

Tek cümleyle: veri nereden geliyor?

1. src/config/nav/nav1.ts — megaMenus (navbar 1 ve 2 için menü ağacı)
2. src/config/nav/navbar3-menus.ts — megaMenusNavbar3 (navbar 3 için)
3. src/config/header.ts — Hangi veri seti kullanılır: headerNavbar === 'navbar3' ise (2), değilse (1)
4. getHeaderContext() (header-context.ts) — seçilen menüyü dile göre düz listeye çevirir (menus)
5. Bu menus hem navbar’a hem mobil menü’ye gider

Gerçek sayfa URL’leri src/config/routes.ts → sitePages içindedir. Menüde tavsiye edilen bağlama: sitePageMenuLink('pageId', etiket) (src/config/nav/page-link.ts).

---

Hangi dosya ne işe yarar?

Dosya	Basit açıklama
src/components/layout/Header.astro	Parçaları yan yana koyar; burayı çok sık açmana gerek yok
src/config/header.ts	Hangi navbar aktif: navbar1 | navbar2 | navbar3
src/config/nav/nav1.ts	Navbar1/2 menü içeriği (megaMenus)
src/config/nav/navbar3-menus.ts	Navbar3 menü içeriği (megaMenusNavbar3)
src/config/nav/page-link.ts	sitePageMenuLink — sitePages’ten href üretir
src/config/routes.ts → sitePages	Her pageId için dört dilde path
src/i18n/common.ts → headerNav	Menü metinleri (4 dil); ayrıca common.nav
src/components/layout/header/Navbar1.astro	Tasarım 1: mega menü (açılır paneller)
src/components/layout/header/Navbar2.astro	Tasarım 2: düz linkler
src/components/layout/header/Navbar3.astro	Tasarım 3: zengin mega panel
src/components/islands/HeaderMegaNav.tsx	Navbar1’in etkileşimi (React)
src/components/islands/MobileNav.tsx	Mobil hamburger + çekmece
src/components/layout/header/HeaderActions.astro	Tema, dil, CTA, MobileNav mount
src/lib/header-context.ts	Dil, menü, etiketleri hazırlar

---

Navbar tasarımını değiştirmek (en kolay iş)

Dosya: src/config/header.ts

export const headerNavbar = 'navbar1'; // navbar2 | navbar3

Değer	Ne görürsün?
navbar1	Dropdown’lı mega menü
navbar2	Üst seviye düz linkler (panel yok)
navbar3	Geniş mega panel — navbar3-menus.ts verisi

Kaydet → sayfayı yenile. Başka dosyaya dokunmana gerek yok.

---

Kendi navbar tasarımını yazmak

1. Navbar3.astro dosyasını aç (veya Navbar1 kopyalayıp Navbar4 ekle — o zaman header.ts ve Header.astro’ya da ekle)
2. İçinde menus prop’u var — hazır başlık ve link listesi
3. İstediğin HTML/Tailwind ile çiz
4. header.ts içinde headerNavbar = 'navbar3' yap

Etkileşimli menü (açılır kapanır) istersen React island kullan — Navbar1’deki HeaderMegaNav.tsx örneğine bak (React Kullanımı).

---

Adım adım: Yeni sayfayı menüye bağlamak

İki kutu

1. Adres defteri — src/config/routes.ts → sitePages. Her sayfa bir pageId (home, blog, implants, …).
2. Menü listesi — nav1.ts (megaMenus) veya navbar3-menus.ts (megaMenusNavbar3), hangi navbar aktifse ona göre (header.ts).

sitePageMenuLink — sen ne yaparsın?

page-link.ts içindeki fonksiyon hazır; günlük işte bu dosyayı değiştirmen gerekmez. Menü dosyasında import edip çağırırsın:

import { sitePageMenuLink } from './page-link';

sitePageMenuLink('blog', common.headerNav.discoveryBlog);

• 1. argüman: sitePages anahtarı ('blog', 'implants', …) — routes.ts ile aynı olmalı.
• 2. argüman: Menüde görünen yazı (LS), genelde common.headerNav veya common.nav.
• 3. argüman (isteğe bağlı): Navbar3’te alt açıklama metni.

Path’i menüde /tr/... diye elle yazma; tek kaynak sitePages.

Sıra (checklist)

1. routes.ts → sitePages’e pageId + dört dil path.
2. Astro pages/ altında sayfa route’ları (Sayfa Ekle / Kaldır).
3. i18n/common.ts → menü etiketi (ls(...)), çoğunlukla headerNav.
4. nav1.ts veya navbar3-menus.ts → ilgili links / columns içine sitePageMenuLink('pageId', ...).

Sayfa yoksa geçici # kullan (placeholder); hazır olunca yukarıdaki adımlar.

İçerik vs metin vs URL

Ne	Dosya
Menüde ne var, sıra, sütunlar	nav1.ts / navbar3-menus.ts
Görünen yazılar (4 dil)	common.ts → headerNav / nav
Gerçek URL’ler	routes.ts → sitePages; menüde bağlamak için sitePageMenuLink

Navbar .astro dosyalarına link listesi yazma — menus prop’undan gelir.

---

Mobil menü nereden çalışıyor?

1. Sağ üstteki üç çizgi (hamburger) → MobileNav.tsx
2. HeaderActions.astro içinde mount edilir
3. Tıklanınca ekranın sağından panel gelir (document.body üzerine portal)
4. İçerik yine menus — üst menüyle aynı kaynak (getHeaderContext)
5. Altta WhatsApp butonu; link tıklanınca menü kapanır

Mobil menüyü değiştirmek için: MobileNav.tsx
Mobil menü linklerini değiştirmek için: nav1.ts / navbar3-menus.ts + routes.ts / sitePageMenuLink (navbar’dan bağımsız aynı veri)

sitePageMenuLink sadece üst menü zincirinde

Mobil taraf ayrı bir pageId listesi tutmaz; menus üst menüyle aynı üretildiği için sitePageMenuLink yaptığın güncellemeler mobilde de geçerli olur.

Footer (üst menüden ayrı)

Footer src/config/footer-nav.ts + src/i18n/common.ts (common.footer) + social.ts ile yönetilir; megaMenus / sitePageMenuLink akışına dahil değildir. Gerçek sayfa URL’si vermek için footer-nav.ts içindeki href alanında projedeki mevcut tipe göre '#' veya sitePages path objesi kullanılır.

Not: nav1.ts içindeki Treatments mega menü sütunları footer-nav.ts → footerColumns ile paylaşılır; footer veya bu sütunları değiştirirken üst menüdeki Treatments panelinin de güncellenebileceğini unutma.

Detaylı footer tablosu: Navigasyon → Footer bölümü.

---

Masaüstü vs mobil — kısa tablo

	Masaüstü (geniş ekran)	Mobil (dar ekran)
Ana menü	Navbar1 / 2 / 3 (md+ görünür)	Gizli
Hamburger	Gizli	MobileNav görünür
Tema / dil	Header sağda	Aynı yerde
Menü verisi	menus	Aynı menus

---

Sık yapılan işler

İstediğin	Nereye bak
Mega menüye dön	header.ts → navbar1
Düz link menü	header.ts → navbar2
Menüde yeni sayfa linki	routes.ts + nav1.ts / navbar3-menus.ts + sitePageMenuLink + common.headerNav
Logo / site adı	site.ts → HeaderLogo.astro
Mobil çekmece görünümü	MobileNav.tsx
Footer sütun / link	footer-nav.ts + common.footer (Navigasyon)
Tema butonu	ThemeSelect.tsx
Dil listesi	LanguageSelect.tsx + routes.ts
Üst bar sticky / blur	Header.astro üstündeki class

---

Header.astro neden kısa?

Çünkü sadece şunu yapar:

<HeaderLogo />
<Navbar1 veya 2 veya 3 />   ← config’ten seçilen
<HeaderActions />            ← tema, dil, mobil

Ağır iş parçalara ve header-context.ts’e taşındı. Günlük işin çoğu header.ts, src/config/nav/*.ts ve Navbar*.astro dosyalarında.

---

İlgili rehberler

• Site Layout — BaseLayout, PageShell
• Navigasyon — footer ve genel navigasyon
• Çeviri Metinleri — common.headerNav
• Sayfa Ekle / Kaldır — sitePages + sayfa dosyaları
• React Kullanımı — island (client:load)
• Çoklu Dil Kullanımı — dil URL’leri

---

Özet (ezberlenecek 4 satır)

1. Header = logo + navbar alanı + sağ butonlar.
2. Navbar1/2/3 = sadece masaüstü menü tasarımı; seçim config/header.ts.
3. Mobil menü = hep MobileNav.tsx; navbar seçiminden etkilenmez.
4. Linkler = nav1.ts / navbar3-menus.ts + routes.ts (sitePages) + sitePageMenuLink; metinler common.headerNav → hepsi menus ile hem masaüstü hem mobilde aynı. Footer ayrı: footer-nav.ts + common.footer (Navigasyon).