0Pricing
Tailwind CSS Academy · Урок

Каркас панели управления и боковая панель

Настройте двухколоночный каркас панели управления с фиксированной боковой панелью, содержащей ссылки навигации, иконки и расположенный внизу раздел профиля пользователя.

«Каркас панели управления и боковая панель» — бесплатный урок Tailwind CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Tailwind CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Tailwind CSS Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Dashboard Layout Overview

An admin dashboard is structured around a persistent sidebar on the left and a main content area on the right. The sidebar is fixed-width and typically full viewport height, while the main area fills the remaining space and scrolls independently. This two-column shell is the foundation on which all dashboard widgets, tables, and charts are placed.

<!-- 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>

Building the Sidebar Shell

The sidebar uses flex h-full w-64 flex-col bg-gray-900 for a dark, full-height panel. flex-shrink-0 prevents it from compressing when the main content grows. Divide it into three sections using flex column layout: a logo area at the top, a scrollable nav section in the middle with flex-1 overflow-y-auto, and a user profile area pinned to the bottom.

<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>

Sidebar Navigation Links

Navigation items in the sidebar combine an icon and a label. Use flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium as the base link style. Inactive links use text-gray-400 hover:bg-gray-800 hover:text-white transition-colors. The active link is highlighted with bg-gray-800 text-white to show the current page.

<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>

Sidebar Navigation Groups

Group related navigation items under labeled sections for better discoverability. Add a section label with mb-2 mt-6 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500 before each group of links. This pattern is common in analytics and SaaS dashboards where there are 10 or more navigation destinations.

<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>

User Profile Area in Sidebar

The bottom of the sidebar shows the logged-in user's avatar, name, and email. Use flex items-center gap-3 to align the avatar and text. Add a settings icon button on the far right with ml-auto. Wrap the whole section in a subtle hover state: 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>

Main Content Area Wrapper

The main content area sits to the right of the sidebar. Use flex flex-1 flex-col overflow-hidden so it fills the remaining horizontal space and allows independent scrolling. The top bar docks at the top of this area (not the sidebar), and the main scrolling region sits below it using 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>

Mobile Sidebar Strategy

On mobile screens, the sidebar cannot be permanently visible without taking too much space. Hide it off-screen with -translate-x-full by default and slide it in when the hamburger menu is activated by toggling translate-x-0. Overlay the main content with a semi-transparent backdrop bg-black/50 that closes the sidebar on click. This pattern is identical to the one used in the collapsible sidebar lesson.

<!-- 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>

Sidebar Width Variants

Some dashboards use a collapsed sidebar that shows only icons and expands on hover or via a toggle. Achieve this with CSS transitions on the sidebar width: default w-16 shows icons only, expanded w-64 shows labels. Transition with transition-all duration-300. Hide the text labels in collapsed mode using 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>

Sidebar Section Dividers

Use my-4 border-t border-gray-800 to add horizontal dividers between navigation groups in the sidebar. This creates a cleaner separation than just spacing alone. Keep dividers thin and dark so they blend with the sidebar background while still providing visual structure. Avoid overusing dividers — two or three per sidebar is typically enough.

<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>

Notification Badge on Nav Item

Some sidebar links need a notification badge to indicate unread items or pending actions. Add a small pill badge aligned to the right of the link using ml-auto. Style it as a small circle: ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-xs text-white for a count, or a smaller dot for a simple unread indicator.

<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>

Dark and Light Sidebar Themes

While dark sidebars are traditional, light sidebars (bg-white border-r border-gray-200) with dark text are increasingly popular for a cleaner, modern look. The choice depends on your brand. A dark sidebar creates strong visual contrast and clearly separates navigation from content. A light sidebar feels airier and pairs well with white main content areas.

<!-- 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>

Quick Check

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

Lesson Recap

In this lesson you learned: building the two-column dashboard shell with a fixed sidebar and flexible main area, structuring sidebar navigation with groups, active states, and notification badges, and handling mobile sidebars with an off-screen translate and overlay backdrop. Next up we build the top bar and breadcrumbs.

Часто задаваемые вопросы

Урок «Каркас панели управления и боковая панель» бесплатный?

Да — полный текст урока «Каркас панели управления и боковая панель» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Tailwind CSS Academy, подпишись на CoddyKit PRO. Курс Tailwind CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Каркас панели управления и боковая панель»?

Настройте двухколоночный каркас панели управления с фиксированной боковой панелью, содержащей ссылки навигации, иконки и расположенный внизу раздел профиля пользователя. Ты практикуешь Tailwind CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Tailwind CSS Academy?

Предыдущий опыт не требуется. Tailwind CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Каркас панели управления и боковая панель»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Tailwind CSS Academy?

Да. Каждый урок Tailwind CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Каркас панели управления и боковая панель
  2. Верхняя панель и хлебные крошки
  3. Карточки статистики и виджеты KPI
  4. Таблица данных и заготовки графиков
← Назад к Tailwind CSS Academy