Tailwind CSS Academy · Ders

Kontrol Paneli İskeleti ve Kenar Çubuğu

Gezinme bağlantıları, simgeler ve alt bölümde kullanıcı profili alanı içeren sabit bir kenar çubuğuyla iki sütunlu kontrol paneli iskeletini kurun.

1. ders / 413 adım

Kontrol Paneli İskeleti ve Kenar Çubuğu, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.

Gösterge Paneli Düzenine Genel Bakış

Bir yönetici gösterge paneli, solda kalıcı bir kenar çubuğu ve sağda bir ana içerik alanı etrafında yapılandırılır. Kenar çubuğunun genişliği sabittir ve genellikle görüntü alanının tamamı kadar yüksekliğe sahiptir; ana alan ise kalan boşluğu doldurur ve bağımsız olarak kaydırılır. Bu iki sütunlu kabuk, tüm gösterge paneli bileşenlerinin, tabloların ve grafiklerin yerleştirildiği temeldir.

<!-- Dashboard shell structure -->
<div class="flex h-screen overflow-hidden bg-gray-100">
  <!-- Sidebar -->
  <aside class="w-64 flex-shrink-0">
    <!-- Navigation -->
  </aside>

  <!-- Main content area -->
  <div class="flex flex-1 flex-col overflow-hidden">
    <!-- Top bar -->
    <main class="flex-1 overflow-y-auto p-6">
      <!-- Page content -->
    </main>
  </div>
</div>

Kenar Çubuğu Kabuğu Oluşturma

Kenar çubuğu, koyu ve tam yükseklikte bir panel için flex h-full w-64 flex-col bg-gray-900 kullanır. flex-shrink-0, ana içerik büyüdüğünde kenar çubuğunun sıkışmasını önler. Esnek sütun düzenini kullanarak kenar çubuğunu üç bölüme ayırın: üstte bir logo alanı, ortada flex-1 overflow-y-auto içeren kaydırılabilir gezinme bölümü ve altta sabitlenen bir kullanıcı profili alanı.

<aside class="flex h-screen w-64 flex-shrink-0 flex-col bg-gray-900">
  <!-- Logo area -->
  <div class="flex h-16 items-center border-b border-gray-800 px-4">
    <div class="flex items-center gap-2 font-bold text-white">
      <div class="h-7 w-7 rounded-lg bg-blue-500"></div>
      Dashboard
    </div>
  </div>

  <!-- Scrollable navigation -->
  <nav class="flex-1 overflow-y-auto px-3 py-4">
    <!-- Navigation links -->
  </nav>

  <!-- User profile -->
  <div class="border-t border-gray-800 p-4">
    <!-- User info -->
  </div>
</aside>

Kenar Çubuğu Gezinme Bağlantıları

Kenar çubuğundaki gezinme öğeleri bir simgeyle etiketi birleştirir. Temel bağlantı stili olarak flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium kullanın. Etkin olmayan bağlantılarda text-gray-400 hover:bg-gray-800 hover:text-white transition-colors kullanılır. Etkin bağlantı, geçerli sayfayı göstermek için bg-gray-800 text-white ile vurgulanır.

<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
  <!-- Active link -->
  <a href="/dashboard"
     class="flex items-center gap-3 rounded-lg bg-gray-800 px-3 py-2
            text-sm font-medium text-white">
    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3"/>
    </svg>
    Overview
  </a>

  <!-- Inactive link -->
  <a href="/users"
     class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium
            text-gray-400 transition-colors hover:bg-gray-800 hover:text-white">
    <!-- Icon + label -->
    Users
  </a>
</nav>

Kenar Çubuğu Gezinme Grupları

Daha kolay bulunabilmeleri için ilişkili gezinme öğelerini etiketli bölümler altında gruplayın. Her bağlantı grubundan önce mb-2 mt-6 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500 ile bir bölüm etiketi ekleyin. Bu düzen, 10 veya daha fazla gezinme hedefinin bulunduğu analiz ve SaaS gösterge panellerinde yaygındır.

<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
  <!-- Main group -->
  <p class="mb-2 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500">
    Main
  </p>
  <a href="/dashboard" class="flex items-center gap-3 rounded-lg ...">Overview</a>
  <a href="/analytics" class="flex items-center gap-3 rounded-lg ...">Analytics</a>

  <!-- Settings group -->
  <p class="mb-2 mt-6 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500">
    Settings
  </p>
  <a href="/billing" class="flex items-center gap-3 rounded-lg ...">Billing</a>
  <a href="/team" class="flex items-center gap-3 rounded-lg ...">Team</a>
</nav>

Kenar Çubuğunda Kullanıcı Profili Alanı

Kenar çubuğunun altında oturum açmış kullanıcının avatarı, adı ve e-postası gösterilir. Avatarı ve metni hizalamak için flex items-center gap-3 kullanın. En sağa ml-auto ile bir ayarlar simgesi düğmesi ekleyin. Bölümün tamamını şu ince üzerine gelme durumuyla sarın: hover:bg-gray-800 rounded-lg p-2 cursor-pointer.

<div class="border-t border-gray-800 p-3">
  <div class="flex cursor-pointer items-center gap-3 rounded-lg p-2 transition hover:bg-gray-800">
    <img src="/avatar.jpg" alt="User" class="h-9 w-9 rounded-full">
    <div class="min-w-0 flex-1">
      <p class="truncate text-sm font-medium text-white">Jane Doe</p>
      <p class="truncate text-xs text-gray-400">jane@example.com</p>
    </div>
    <button class="ml-auto rounded-md p-1 text-gray-400 hover:text-white">
      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35"/>
      </svg>
    </button>
  </div>
</div>

Ana İçerik Alanı Kapsayıcısı

Ana içerik alanı, kenar çubuğunun sağında yer alır. Kalan yatay alanı doldurması ve bağımsız kaydırmaya izin vermesi için flex flex-1 flex-col overflow-hidden kullanın. Üst çubuk kenar çubuğuna değil, bu alanın üst kısmına sabitlenir; ana kaydırma bölgesi ise flex-1 overflow-y-auto ile bunun altında yer alır.

<div class="flex flex-1 flex-col overflow-hidden">
  <!-- Top bar (sticks to top of main area) -->
  <header class="flex h-16 items-center border-b border-gray-200 bg-white px-6">
    <!-- Search, notifications, avatar -->
  </header>

  <!-- Scrollable page content -->
  <main class="flex-1 overflow-y-auto bg-gray-100 p-6">
    <!-- Dashboard widgets, tables, charts -->
  </main>
</div>

Mobil Kenar Çubuğu Stratejisi

Mobil ekranlarda kenar çubuğu kalıcı olarak görünürse fazla yer kaplar. Varsayılan olarak -translate-x-full ile ekran dışına gizleyin ve hamburger menüsü etkinleştirildiğinde translate-x-0 değerini değiştirerek içeri kaydırın. Ana içeriği, tıklandığında kenar çubuğunu kapatan yarı saydam bg-black/50 arka planıyla kaplayın. Bu düzen, daraltılabilir kenar çubuğu dersinde kullanılanla aynıdır.

<!-- Overlay backdrop (shown when sidebar is open) -->
<div id="sidebar-backdrop"
     class="fixed inset-0 z-20 hidden bg-black/50 lg:hidden"
     onclick="closeSidebar()"></div>

<!-- Sidebar with transition -->
<aside id="sidebar"
       class="fixed inset-y-0 left-0 z-30 w-64 -translate-x-full flex-col bg-gray-900
              transition-transform duration-300 lg:relative lg:translate-x-0 lg:flex">
  <!-- ... -->
</aside>

Kenar Çubuğu Genişliği Çeşitleri

Bazı gösterge panellerinde yalnızca simgeleri gösteren ve üzerine gelindiğinde veya bir anahtarla genişleyen daraltılmış kenar çubuğu kullanılır. Bunu, kenar çubuğu genişliğinde CSS geçişleri uygulayarak gerçekleştirin: varsayılan w-16 yalnızca simgeleri, genişletilmiş w-64 ise etiketleri gösterir. transition-all duration-300 ile geçiş ekleyin. Daraltılmış modda metin etiketlerini opacity-0 w-0 overflow-hidden kullanarak gizleyin.

<!-- Collapsible sidebar pattern -->
<aside id="sidebar"
       class="flex flex-col bg-gray-900 transition-all duration-300"
       :class="expanded ? 'w-64' : 'w-16'">
  <a href="/dashboard" class="flex items-center gap-3 rounded-lg px-3 py-2">
    <svg class="h-5 w-5 flex-shrink-0 text-gray-400"><!-- icon --></svg>
    <span :class="expanded ? 'opacity-100' : 'opacity-0 w-0 overflow-hidden'"
          class="transition-opacity duration-200 text-sm text-gray-400">
      Overview
    </span>
  </a>
</aside>

Kenar Çubuğu Bölüm Ayraçları

Kenar çubuğundaki gezinme grupları arasına yatay ayraçlar eklemek için my-4 border-t border-gray-800 kullanın. Bu, yalnızca aralık kullanmaya kıyasla daha düzenli bir ayrım oluşturur. Ayraçları ince ve koyu tutarak kenar çubuğunun arka planıyla bütünleşmelerini, ancak görsel yapı sağlamalarını sağlayın. Ayraçları aşırı kullanmaktan kaçının — genellikle her kenar çubuğu için iki veya üç ayraç yeterlidir.

<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
  <!-- Main group -->
  <a href="/" class="...">Overview</a>
  <a href="/analytics" class="...">Analytics</a>
  <a href="/reports" class="...">Reports</a>

  <!-- Divider -->
  <div class="my-4 border-t border-gray-800"></div>

  <!-- Settings group -->
  <a href="/billing" class="...">Billing</a>
  <a href="/api" class="...">API Keys</a>
</nav>

Gezinme Öğesinde Bildirim Rozeti

Bazı kenar çubuğu bağlantılarında okunmamış öğeleri veya bekleyen işlemleri belirtmek için bir bildirim rozeti gerekir. ml-auto kullanarak bağlantının sağ tarafına hizalanmış küçük bir kapsül rozeti ekleyin. Sayı için şu şekilde küçük bir daire olarak biçimlendirin: ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-xs text-white; basit bir okunmamış göstergesi içinse daha küçük bir nokta kullanın.

<a href="/messages"
   class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium
          text-gray-400 transition hover:bg-gray-800 hover:text-white">
  <svg class="h-5 w-5"><!-- message icon --></svg>
  Messages
  <!-- Badge -->
  <span class="ml-auto flex h-5 min-w-[20px] items-center justify-center
               rounded-full bg-blue-500 px-1 text-xs font-semibold text-white">
    3
  </span>
</a>

Koyu ve Açık Kenar Çubuğu Temaları

Koyu kenar çubukları geleneksel olsa da koyu metinli açık kenar çubukları (bg-white border-r border-gray-200) daha sade ve modern bir görünüm sunduğu için giderek daha popüler hâle geliyor. Seçim markanıza bağlıdır. Koyu kenar çubuğu güçlü bir görsel kontrast oluşturur ve gezinmeyi içerikten net biçimde ayırır. Açık kenar çubuğu daha ferah bir his verir ve beyaz ana içerik alanlarıyla uyum sağlar.

<!-- Dark sidebar -->
<aside class="w-64 bg-gray-900 text-gray-400">
  <!-- Links: text-gray-400 hover:bg-gray-800 hover:text-white -->
  <!-- Active: bg-gray-800 text-white -->
</aside>

<!-- Light sidebar -->
<aside class="w-64 border-r border-gray-200 bg-white text-gray-600">
  <!-- Links: text-gray-600 hover:bg-gray-50 hover:text-gray-900 -->
  <!-- Active: bg-blue-50 text-blue-700 -->
</aside>

Kısa Kontrol

Bu derste işlenen Tailwind CSS Uzmanlığı kavramlarını anlayıp anlamadığınızı test edin.

İnteraktif derste cevapla

Ders Özeti

Bu derste şunları öğrendiniz: sabit bir kenar çubuğu ve esnek bir ana alanla iki sütunlu gösterge paneli iskeleti oluşturmayı, gruplar, etkin durumlar ve bildirim rozetleriyle kenar çubuğu gezinmesini yapılandırmayı ve ekran dışına taşıma ile kaplama arka planını kullanarak mobil kenar çubuklarını yönetmeyi. Sırada üst çubuğu ve içerik haritasını oluşturmak var.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 30
Dersler: 120

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Kontrol Paneli İskeleti ve Kenar Çubuğu” dersi ücretsiz mi?

Evet — “Kontrol Paneli İskeleti ve Kenar Çubuğu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.

“Kontrol Paneli İskeleti ve Kenar Çubuğu” dersinde ne öğreneceğim?

Gezinme bağlantıları, simgeler ve alt bölümde kullanıcı profili alanı içeren sabit bir kenar çubuğuyla iki sütunlu kontrol paneli iskeletini kurun. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Kontrol Paneli İskeleti ve Kenar Çubuğu” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Kontrol Paneli İskeleti ve Kenar Çubuğu
Üst Çubuk ve İçerik Haritası
İstatistik Kartları ve KPI Pencere Öğeleri
Veri Tablosu ve Grafik Yer Tutucuları

← Tailwind CSS Academy Sayfasına Dön