Site Layout

Bu belge, sitenin dış kabuğunu anlatır: üst menü, alt bilgi, ortadaki içerik alanı.

Fix UI Kullanımı buton ve kart görünümü içindir. Layout (header/footer, sayfa gövdesi) Tailwind ile yapılır; karıştırmayın. Shell’de text-sm, font-medium gibi utility’ler normaldir; tekrarlayan buton/kart görünümü için <Button> kullanın. Ayrıntı: Yazı Stilleri.

Genel Yapı

Her public sayfa aynı şablonu kullanır:

BaseLayout
  ├── Header      (logo, menü, tema, dil)
  ├── <main>      (sayfanın kendi içeriği — genelde PageShell)
  └── Footer      (sütunlar, sosyal, disclaimer)

Sayfa dosyası yalnızca <main> içini doldurur; header/footer tekrar yazılmaz.

---
import BaseLayout from '@/layouts/BaseLayout.astro';
import PageShell from '@/components/layout/PageShell.astro';
---

<BaseLayout title="Sayfa başlığı" description="Kısa açıklama">
  <PageShell>
    <!-- section içeriği -->
  </PageShell>
</BaseLayout>

PageShell → max-w-6xl (veya narrow ile max-w-3xl), yatay gutter, dikey section padding. Header/footer aynı max-w-6xl mantığını kullanır.

Tailwind Vs Fix UI (Layout’ta)

Ne değiştirirsen	Nerede	Ne olur
Menü genişliği, sticky, border	`Header.astro` Tailwind sınıfları	Tüm sayfalarda üst çubuk görünümü
İçerik kolon genişliği	`PageShell` (`narrow` prop) veya ek `class`	Yalnızca o sayfa
Buton / CTA görünümü	Fix UI (`Button`, `_fix-button.css`)	Tüm `fix-btn` kullanan yerler
Logo metni	`site.ts` → `name`	Header marka
Menü linkleri	`src/config/nav/` (`nav1.ts`, `navbar3-menus.ts`) + `routes.ts` + `sitePageMenuLink`	Header + mobil menü
Footer sütunları	`footer-nav.ts` + `i18n/common.ts`	Alt link grid’i

Kural: Header/footer’da uzun class="flex gap-4 ..." zinciri normal. Buton stilini layout’ta icat etme — <Button variant="primary"> kullan.

Dosyalar Ve Sorumluluklar

Dosya	Görevi
`src/layouts/BaseLayout.astro`	HTML kabuğu, SEO `<head>`, Header, main, Footer, Toaster, motion
`src/components/layout/PageShell.astro`	Sayfa içeriği container (`max-w-6xl`, `py-16` …)
`src/components/layout/Header.astro`	Üst navigasyon
`src/components/layout/Footer.astro`	Alt bilgi (footer sütunları + sosyal)
`src/config/nav/nav1.ts`	Üst menü (navbar1/2): `megaMenus`
`src/config/nav/navbar3-menus.ts`	Üst menü (navbar3): `megaMenusNavbar3`
`src/config/nav/page-link.ts`	`sitePageMenuLink` — href’i `sitePages`’ten üretir
`src/config/header.ts`	Hangi navbar tasarımı aktif (`navbar1` …)
`src/config/routes.ts`	Her linkin dil başına URL’si
`src/config/site.ts`	Site adı, logo yolu, domain
`src/config/footer-nav.ts`	Footer tedavi / hizmet sütunları
`src/config/social.ts`	Footer sosyal profiller
`src/i18n/common.ts`	Menü ve footer metinleri (4 dil)

BaseLayout

Ne yapar:

<head> — title, description, canonical, hreflang, Open Graph (SEO / Meta)
Tema script — sayfa çizilmeden önce .dark (yanlış tema flaşını azaltır)
<body class="flex min-h-screen flex-col"> — footer sayfa altında kalsın
<main class="flex-1"> — içerik orta alanı büyüsün
Global: Toaster, scroll/hero animasyon (initMotion)

Sayfadan gelen props:

title, description, image — SEO
alternatePaths — blog çevirisi gibi özel hreflang (isteğe bağlı)

Değiştirince ne olur:

Layout’a dokunmadan yeni sayfa ekleyebilirsin; otomatik header/footer alır.
BaseLayout’u bozarsan tüm site etkilenir — dikkatli değiştir.

Ayrıntılı ve basit anlatım: Header, Navbar ve Mobil Menü.

Bileşenler:

Logo — site.ts → HeaderLogo.astro
Masaüstü menü — Navbar1 / Navbar2 / Navbar3 (config/header.ts ile seçilir)
Mobil menü — MobileNav.tsx (hamburger; navbar seçiminden bağımsız)
Tema / dil — HeaderActions.astro içinde React island’lar

Tailwind örnekleri (Header’da):

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

Menü Linki Eklemek

src/config/routes.ts → yeni pageId ve tüm dillerin path’i (sitePages)
Sayfa dosyalarını oluştur
src/config/nav/nav1.ts veya navbar3-menus.ts → ilgili megaMenus / links içine sitePageMenuLink('pageId', etiket) (page-link.ts — bkz. Header rehberi)
src/i18n/common.ts → common.headerNav.* (ls())

Detay: Header, Navbar ve Mobil Menü.

Dil Değiştirici (`pageId`)

getPageIdFromPathname() (src/i18n/routing.ts):

resolvePath bir sitePages URL’si döndürürse → pageId = home | blog | fixUi (vb.)
Blog yazı URL’si (/blog/slug, /tr/blog/slug …) sitePages’te yok → pageId = 'home'; header dil linkleri ana sayfaya gider
Yazı çevirisi: blog slug sayfası alternatePaths ile BaseLayout’a geçer — SEO / Meta, Çoklu Dil Kullanımı

Yapı (masaüstü):

Tedavi / hizmet sütunları — footer-nav.ts → footerColumns
Sosyal sütun — social.ts (boş URL’ler gösterilmez)
Disclaimer — common.footer.disclaimer

Veri kaynakları:

Sütun başlıkları ve link etiketleri → i18n/common.ts (footer.columnTitles, footer.links)
Link hedefleri → footer-nav.ts (# placeholder veya routes path’leri)
Sosyal → social.ts

Değiştirince ne olur:

footer-nav.ts güncelle → alt link sütunları değişir
social.ts güncelle → sosyal ikonlar değişir

Sayfa İçeriği (Main)

Layout içeriğe karışmaz. Her sayfa PageShell veya eşdeğer Tailwind ile kurar:

<BaseLayout title="...">
  <PageShell class="flex flex-col gap-8">
    <h1 class="fix-type-h1">...</h1>
    <Button variant="primary">CTA</Button>
  </PageShell>
</BaseLayout>

Blog yazıları: BlogPostView.astro içinde PageShell narrow + prose — MDX Kullanımı.

Sayfada ikinci bir <main> veya tekrar ThemeSelect koyma — layout’tan gelir.

Sık Senaryolar

İstediğin	Ne yap
Yeni menü maddesi	`routes.ts` + sayfa + `nav1.ts` / `navbar3-menus.ts` + `sitePageMenuLink` + `common.headerNav`
Logo değişsin	`site.ts` → `logo`, dosyayı `public/` veya `public/og/`
Footer tedavi linki	`footer-nav.ts` + `common.footer.links`
Üst bar rengi / blur	`Header.astro` Tailwind
Tüm sitede buton rengi	`_fix-button.css` veya token — Fix UI Kullanımı
Blog dil linki yazıya gitsin	Blog slug sayfasında `alternatePaths` prop
Bileşen demosu	`/fix-ui` sayfası

İlgili Rehberler

Fix UI Kullanımı — buton, kart, /fix-ui katalog
Çoklu Dil Kullanımı — URL ve çeviri
SEO / Meta — title, hreflang
Font & UI Kullanımı — tema seçici, toast

Özet

Layout = BaseLayout + Header + Footer + PageShell. Üst menü: Header, Navbar ve Mobil Menü. Footer: footer-nav.ts + social.ts. Sayfa dosyası yalnızca <main> içini doldurur.