Sidebar ve header

Sidebar ve header içeren bir sayfa düzeni kurmayı öğrenirsin.

Sidebar ve header

Pek çok uygulamada sol tarafta bir kenar çubuğu, üstte bir başlık bulunur. Bu iki bileşen layout içinde yan yana yerleşir; içerik alanı geri kalan boşluğu doldurur.

Kenar çubuğu genellikle bağlantı listesi içerir; Link bileşeni ile sayfalar arası geçiş yapılır. Başlık ise logo ve kullanıcı menüsü taşır.

Yerleşim için CSS Flexbox veya Grid yaygın seçimdir; kenar çubuğuna sabit genişlik, içeriğe esnek genişlik verilir.

Header içeriği

Header (başlık) genellikle uygulama logosunu, arama kutusunu ve kullanıcı menüsünü taşır. Sabit yüksekliği olur; kenar çubuğu ile yan yana çalışır.

Header'ı ayrı bir bileşen yapmak, layout içinde değiştirmeyi kolaylaştırır. Farklı sayfalarda farklı header göstermek istiyorsan, layout prop olarak header alabilir.

Mobilde header genellikle kenar çubuğunu açan bir menü düğmesi içerir; bu da responsive tasarımın parçasıdır.

Uygulama Sidebar bileşeni

Aşağıdaki iskeleti tamamla. Sidebar bileşeni yaz; nav içinde <Link to="/">Ana sayfa</Link> ve <Link to="/products">Ürünler</Link> döndür. Dışa aktar.

Örnek çözümü göster

import { Link } from "react-router-dom";

function Sidebar() {
  return (
    <nav>
      <Link to="/">Ana sayfa</Link>
      <Link to="/products">Ürünler</Link>
    </nav>
  );
}

export default Sidebar;

Kendini test et

Sidebar'da genellikle ne bulunur?
- Form alanı
- Tablo
- Bağlantı listesi
- Modal
Cevabı göster

Bağlantı listesi — Sidebar bağlantı listesi içerir; sayfalar arası geçiş sağlar.

Sidebar bağlantısı

import { Link } from "react-router-dom";

<nav><____ to="/">Ana sayfa</Link></nav>

Cevabı göster

import { Link } from "react-router-dom";

<nav><Link to="/">Ana sayfa</Link></nav>

Sidebar ve header: kavramları eşleştir

Sidebar

Sol menü
Header

Üst başlık
Link

Sayfa bağlantısı
main

İçerik alanı

Sıradaki ders: Outlet ile layout

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler