Navigasyon

Bu belge üç konuyu bir arada anlatır: menü linkleri, üst çubuk (header), alt bilgi (footer). Ayrı sayfa yok; hepsi birbirine bağlı.

Layout özeti: Site Layout. Yeni sayfa URL’si: Sayfa Ekle / Kaldır. Fix UI butonları: Fix UI Kullanımı.

---

A) Menü Linkleri

Tek Kaynak: nav.ts

src/config/nav.ts hem header hem footer menüsünü besler. İki ayrı liste vardır ama genelde aynı maddeleri tekrarlar — biri güncellenip diğeri unutulmasın diye bilinçli kopya değil, aynı yapı kullanılır.

Her öğe:

type NavItem = {
  label: LS;   // common.nav.* — 4 dil
  href: LS;    // siteHref(sitePages.xxx) — 4 dil URL
};

siteHref() routes.ts içindeki sitePages path’lerini href objesine çevirir.

Mevcut Menü (Contact Dahil)

header: [
  { label: common.nav.home, href: siteHref(sitePages.home) },
  { label: common.nav.blog, href: siteHref(sitePages.blog) },
  { label: common.nav.contact, href: siteHref(sitePages.contact) },
],
footer: [ /* aynı üç madde */ ],

Contact örneği: tıklanınca locale’e göre /contact, /tr/iletisim, /de/kontakt veya /fr/contact gider.

Yeni Menü Linki Ekleme

1. routes.ts — sitePages altında yeni pageId ve 4 path
2. Sayfa dosyaları — Sayfa Ekle / Kaldır
3. nav.ts — header ve footer’a satır: siteHref(sitePages.yeniSayfa)
4. i18n/common.ts — common.nav.yeniSayfa için ls('...', '...', '...', '...')

Menü metni nav.ts içinde yazılmaz; t(item.label, locale) ile common.nav okunur.

---

B) Header Görünümü

Dosya: src/components/layout/Header.astro

Yapı

Parça	Kaynak
Logo görseli	site.ts → logo
Marka adı	site.ts → name
Logo linki	getHomePath(locale)
Menü	nav.header
Tema	ThemeToggle (React, client:load)
Dil	LanguageSwitcher + pageId

Tailwind (Örnek)

• sticky top-0 z-50 — kaydırınca üstte kalır
• max-w-6xl mx-auto px-4 — içerik genişliği header ile hizalı
• border-b border-border — alt çizgi

Görünümü değiştirmek için Header’daki sınıfları düzenleyin; sayfa dosyalarına taşımayın.

Fix UI Ve Tema

Header’da yalnızca mevcut ThemeToggle kullanılır. Layout’ta veya sayfada ikinci bir tema butonu icat etmeyin — Font & UI Kullanımı.

Dil Değiştirici Ve pageId

const pageId = getPageIdFromPathname(Astro.url.pathname);
// ...
<LanguageSwitcher pageId={pageId} />

pageId, resolvePath ile routes.ts eşleşmesinden gelir. Contact sayfasında doğru kalır — ayrıntı: Sayfa Ekle / Kaldır.

Blog yazı sayfasında varsayılan home olabilir; yazı çevirisi için alternatePaths — SEO / Meta.

---

C) Footer İçerik

Dosya: src/components/layout/Footer.astro

Üç Sütun (Masaüstü Grid)

1. Marka — site.name (logo metni)
2. Hızlı linkler — nav.footer (header ile aynı nav.ts kaynağı)
3. İletişim + sosyal

İletişim Satırları

src/config/contact.ts:

• tel: → contact.phone
• mailto: → contact.email (footer’da CTA metni common.footer.emailCta)
• Adres özeti → contact.address.city, country

Contact sayfası da aynı config’i okur; footer ile tutarlı kalır — Site Bilgileri.

Sosyal Linkler

src/config/social.ts — linkedin, x, instagram vb.

Footer yalnızca dolu URL olanları listeler:

const socialEntries = Object.entries(social).filter(([, url]) => url);

Boş string → ikon/satır yok.

Footer Metinleri

src/i18n/common.ts → common.footer.*:

• quickLinks, contactHeading, emailCta, rights

Çeviri operasyonu: Çeviri Metinleri.

---

Ne Değiştirirse Ne Olur

Neyi değiştirirsin	Nerede	Ne olur
Menüde yeni sayfa	routes.ts + sayfalar + nav.ts + common.nav	Header ve footer’da link
Menü sırası	nav.ts dizisi sırası	Link sırası (her iki menüde)
Menü etiketi	common.ts nav.*	4 dilde görünen metin
Logo / site adı	site.ts	Header logo + footer marka
Üst bar sticky / blur	Header.astro Tailwind	Tüm sayfalarda header
Footer telefon	contact.ts	Footer + Contact sayfası
Sosyal profil	social.ts (URL dolu)	Footer’da yeni link
Footer başlık metni	common.footer.*	4 dilde alt bilgi metinleri
Tema butonu	ThemeToggle / Fix UI	Global — sayfaya dokunmayın

---

Yapmayın

• Header ve footer link listelerini farklı dosyalarda tutmayın (nav.ts tek kaynak).
• nav.ts içine düz metin yazmayın — common.nav + t().
• Footer’da iletişimi sayfadan kopyalamayın — contact.ts.
• Her sayfada LanguageSwitcher tekrarlamayın.

---

İlgili Rehberler

• Sayfa Ekle / Kaldır — URL ve sayfa dosyaları
• Site Bilgileri — site, contact, social
• Çeviri Metinleri — common.ts
• Site Layout — BaseLayout kabuğu
• Fix UI Kullanımı — ThemeToggle, butonlar

---

Özet

Menü nav.ts + routes.ts + common.nav. Header: logo (site.ts), menü, ThemeToggle, LanguageSwitcher (pageId). Footer: nav.footer, contact.ts, dolu social.ts, common.footer. Contact menüde canlı örnek.