Sidebar ve header
- React kursu
- Orta seviye
- Ders 50/80
- 4 dk
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.
Başlangıç kodu
import { Link } from "react-router-dom";
// Sidebar bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sidebar'da genellikle ne bulunur?
- Form alanı
- Tablo
- Bağlantı listesi Doğru cevap
- Modal
Açıklama: Sidebar bağlantı listesi içerir; sayfalar arası geçiş sağlar.
2 Sidebar bağlantısı
import { Link } from "react-router-dom";
<nav><____ to="/">Ana sayfa</Link></nav>import { Link } from "react-router-dom";
<nav><Link to="/">Ana sayfa</Link></nav>Açıklama: Link to ile sayfa bağlantısı verilir.
3 Sidebar ve header: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
Sidebar |
Sol menü |
Header |
Üst başlık |
Link |
Sayfa bağlantısı |
main |
İçerik alanı |