Szkielet panelu i pasek boczny
Skonfigurują Państwo dwukolumnowy szkielet panelu z nieruchomym paskiem bocznym zawierającym linki nawigacyjne, ikony i sekcję profilu użytkownika na dole.
Szkielet panelu i pasek boczny to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Przegląd układu panelu
Panel administracyjny jest zbudowany wokół stale widocznego paska bocznego po lewej stronie i głównego obszaru treści po prawej. Pasek boczny ma stałą szerokość i zwykle zajmuje całą wysokość widoku, natomiast główny obszar wypełnia pozostałe miejsce i przewija się niezależnie. Ten dwukolumnowy szkielet stanowi podstawę, na której umieszczane są wszystkie widżety, tabele i wykresy panelu.
<!-- 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>Budowanie szkieletu paska bocznego
Pasek boczny wykorzystuje flex h-full w-64 flex-col bg-gray-900, aby utworzyć ciemny panel o pełnej wysokości. flex-shrink-0 zapobiega jego zmniejszaniu, gdy główna treść się rozrasta. Podziel go na trzy sekcje za pomocą układu kolumnowego flex: obszar logo u góry, przewijaną sekcję nawigacji pośrodku z klasą flex-1 overflow-y-auto oraz obszar profilu użytkownika przypięty do dołu.
<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>Linki nawigacyjne paska bocznego
Elementy nawigacji na pasku bocznym łączą ikonę z etykietą. Jako podstawowy styl linku użyj flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium. Nieaktywne linki powinny używać text-gray-400 hover:bg-gray-800 hover:text-white transition-colors. Aktywny link wyróżnij za pomocą bg-gray-800 text-white, aby wskazać bieżącą stronę.
<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>Grupy nawigacji paska bocznego
Pogrupuj powiązane elementy nawigacji w oznaczonych sekcjach, aby ułatwić ich odnajdywanie. Przed każdą grupą linków dodaj etykietę sekcji z klasami mb-2 mt-6 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500. Ten wzorzec jest często stosowany w panelach analitycznych i panelach SaaS, w których znajduje się co najmniej 10 miejsc docelowych nawigacji.
<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>Obszar profilu użytkownika na pasku bocznym
Na dole paska bocznego wyświetl awatar, imię i adres e-mail zalogowanego użytkownika. Użyj flex items-center gap-3, aby wyrównać awatar i tekst. Dodaj po prawej stronie przycisk z ikoną ustawień i klasą ml-auto. Całą sekcję obejmij subtelnym stanem po najechaniu: 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>Kontener głównego obszaru treści
Główny obszar treści znajduje się po prawej stronie paska bocznego. Użyj flex flex-1 flex-col overflow-hidden, aby wypełniał pozostałą przestrzeń poziomą i umożliwiał niezależne przewijanie. Górny pasek jest zakotwiczony u góry tego obszaru, a nie paska bocznego, natomiast główny przewijany obszar znajduje się pod nim dzięki flex-1 overflow-y-auto.
<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>Strategia paska bocznego na urządzeniach mobilnych
Na ekranach urządzeń mobilnych pasek boczny nie może być stale widoczny, ponieważ zajmowałby zbyt dużo miejsca. Domyślnie ukryj go poza ekranem za pomocą -translate-x-full, a po aktywowaniu menu hamburgerowego wysuwaj go, przełączając na translate-x-0. Nałóż na główną treść półprzezroczyste tło bg-black/50, które po kliknięciu zamyka pasek boczny. Ten wzorzec jest identyczny z używanym w lekcji o zwijanym pasku bocznym.
<!-- 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>Warianty szerokości paska bocznego
Niektóre panele używają zwiniętego paska bocznego, który pokazuje tylko ikony i rozwija się po najechaniu lub użyciu przełącznika. Osiągnij to za pomocą przejść CSS zmieniających szerokość paska bocznego: domyślne w-16 pokazuje tylko ikony, a rozwinięte w-64 również etykiety. Dodaj przejście za pomocą transition-all duration-300. Ukryj etykiety tekstowe w trybie zwiniętym, używając opacity-0 w-0 overflow-hidden.
<!-- 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>Separatory sekcji paska bocznego
Użyj my-4 border-t border-gray-800, aby dodać poziome separatory między grupami nawigacji na pasku bocznym. Zapewnia to wyraźniejsze rozdzielenie niż samo zastosowanie odstępów. Separatory powinny być cienkie i ciemne, aby wtapiały się w tło paska bocznego, a jednocześnie zachowywały strukturę wizualną. Unikaj ich nadmiernego stosowania — zwykle wystarczą dwa lub trzy na jeden pasek boczny.
<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>Znacznik powiadomienia przy elemencie nawigacji
Niektóre linki paska bocznego wymagają znacznika powiadomienia, który informuje o nieprzeczytanych elementach lub oczekujących działaniach. Dodaj mały znacznik w formie pigułki, wyrównany do prawej strony linku za pomocą ml-auto. Nadaj mu wygląd małego kółka: ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-xs text-white w przypadku licznika albo użyj mniejszej kropki jako prostego wskaźnika nieprzeczytanych elementów.
<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>Ciemne i jasne motywy paska bocznego
Choć ciemne paski boczne są tradycyjnym rozwiązaniem, jasne paski boczne (bg-white border-r border-gray-200) z ciemnym tekstem zyskują na popularności, ponieważ zapewniają czystszy, nowoczesny wygląd. Wybór zależy od Państwa marki. Ciemny pasek boczny tworzy silny kontrast wizualny i wyraźnie oddziela nawigację od treści. Jasny pasek boczny sprawia wrażenie lżejszego i dobrze komponuje się z białymi obszarami głównej treści.
<!-- 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>Szybkie sprawdzenie
Sprawdź swoją znajomość zagadnień Tailwind CSS Mastery omówionych w tej lekcji.
Podsumowanie lekcji
W tej lekcji nauczyli się Państwo: budowania struktury dashboardu z dwiema kolumnami, ze stałym paskiem bocznym i elastycznym obszarem głównym, tworzenia nawigacji paska bocznego z grupami, stanami aktywnymi i plakietkami powiadomień oraz obsługi pasków bocznych na urządzeniach mobilnych za pomocą przesunięcia poza ekran i nakładki w tle. W następnej części zbudujemy górny pasek i okruszki nawigacyjne.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Szkielet panelu i pasek boczny” jest bezpłatna?
Tak — pełny tekst „Szkielet panelu i pasek boczny” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Szkielet panelu i pasek boczny”?
Skonfigurują Państwo dwukolumnowy szkielet panelu z nieruchomym paskiem bocznym zawierającym linki nawigacyjne, ikony i sekcję profilu użytkownika na dole. Ćwiczysz Tailwind CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Tailwind CSS Academy?
Nie wymagamy żadnego doświadczenia. Tailwind CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Szkielet panelu i pasek boczny”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Tailwind CSS Academy?
Tak. Każda lekcja Tailwind CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Szkielet panelu i pasek boczny
- Górny pasek i okruszki nawigacji
- Karty statystyk i widżety KPI
- Tabela danych i zastępcze wykresy