Tailwind CSS Academy · Oppitunti

Hallintapaneelin runko ja sivupalkki

Määrittäkää kaksipalstainen hallintapaneelin runko, jossa on kiinteä sivupalkki navigointilinkkeineen, kuvakkeineen ja alareunan käyttäjäprofiiliosioineen.

Oppitunti 1/413 vaihetta

Hallintapaneelin runko ja sivupalkki on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.

Hallintapaneelin asettelun yleiskatsaus

Ylläpidon hallintapaneeli rakentuu vasemmalla olevasta pysyvästä sivupalkista ja oikealla olevasta pääsisältöalueesta. Sivupalkin leveys on kiinteä ja se kattaa yleensä koko näkymän korkeuden, kun taas pääalue täyttää jäljelle jäävän tilan ja vierii itsenäisesti. Tämä kaksisarakkeinen runko muodostaa perustan, jolle kaikki hallintapaneelin vimpaimet, taulukot ja kaaviot sijoitetaan.

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

Sivupalkin rungon rakentaminen

Sivupalkissa käytetään luokkia flex h-full w-64 flex-col bg-gray-900 tumman ja koko korkeuden kattavan paneelin luomiseen. flex-shrink-0 estää sitä kutistumasta, kun pääsisältö kasvaa. Jakakaa se kolmeen osaan flex-sarakkeena: yläreunan logoalueeseen, keskellä olevaan vieritettävään navigointiosioon, jossa käytetään luokkia flex-1 overflow-y-auto, sekä alareunaan kiinnitettyyn käyttäjäprofiilialueeseen.

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

Sivupalkin navigointilinkit

Sivupalkin navigointikohteissa yhdistyvät kuvake ja selite. Käyttäkää linkkien perustyylinä luokkia flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium. Passiivisissa linkeissä käytetään luokkia text-gray-400 hover:bg-gray-800 hover:text-white transition-colors. Aktiivinen linkki korostetaan luokilla bg-gray-800 text-white, jotta nykyinen sivu näkyy selvästi.

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

Sivupalkin navigointiryhmät

Ryhmitelkää toisiinsa liittyvät navigointikohteet nimettyihin osioihin, jotta ne löytyvät helpommin. Lisätkää osion nimi ennen jokaista linkkiryhmää luokilla mb-2 mt-6 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500. Tämä on yleinen käytäntö analytiikka- ja SaaS-hallintapaneeleissa, joissa navigointikohteita on vähintään kymmenen.

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

Sivupalkin käyttäjäprofiilialue

Sivupalkin alaosassa näytetään kirjautuneen käyttäjän avatar, nimi ja sähköpostiosoite. Käyttäkää luokkia flex items-center gap-3 avatarin ja tekstin kohdistamiseen. Lisätkää oikeaan reunaan asetusten kuvakepainike luokalla ml-auto. Ympäröikää koko osio huomaamattomalla hover-tilalla: 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>

Pääsisältöalueen säiliö

Pääsisältöalue sijaitsee sivupalkin oikealla puolella. Käyttäkää luokkia flex flex-1 flex-col overflow-hidden, jotta se täyttää jäljelle jäävän vaakasuuntaisen tilan ja mahdollistaa itsenäisen vierityksen. Yläpalkki kiinnittyy tämän alueen yläreunaan, ei sivupalkkiin, ja pääasiallinen vieritysalue sijoittuu sen alapuolelle luokilla 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>

Mobiilin sivupalkkistrategia

Mobiilinäytöillä sivupalkkia ei voida pitää jatkuvasti näkyvissä ilman, että se vie liikaa tilaa. Piilottakaa se oletusarvoisesti näytön ulkopuolelle luokalla -translate-x-full ja tuokaa se esiin hampurilaisvalikon aktivoinnin yhteydessä vaihtamalla luokaksi translate-x-0. Asettakaa pääsisällön päälle puoliksi läpinäkyvä tausta bg-black/50, joka sulkee sivupalkin napsautettaessa. Tämä on sama toteutustapa kuin kokoon taitettavan sivupalkin oppitunnissa.

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

Sivupalkin leveyden muunnelmat

Joissakin hallintapaneeleissa käytetään kokoon taitettua sivupalkkia, jossa näkyvät aluksi vain kuvakkeet ja joka laajenee osoitettaessa tai vaihtopainikkeella. Toteuttakaa tämä sivupalkin leveyden CSS-siirtymillä: oletusarvoinen w-16 näyttää vain kuvakkeet ja laajennettu w-64 myös selitteet. Käyttäkää siirtymään luokkia transition-all duration-300. Piilottakaa tekstiselitteet kokoon taitetussa tilassa luokilla 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>

Sivupalkin osioiden erottimet

Lisätkää sivupalkin navigointiryhmien väliin vaakasuuntaiset erottimet luokilla my-4 border-t border-gray-800. Tämä erottaa ryhmät selkeämmin kuin pelkkä välistys. Pitäkää erottimet ohuina ja tummina, jotta ne sulautuvat sivupalkin taustaan mutta luovat silti visuaalista rakennetta. Älkää käyttäkö erottimia liikaa – kaksi tai kolme sivupalkkia kohden riittää yleensä.

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

Navigointikohteen ilmoitusmerkki

Jotkin sivupalkin linkit tarvitsevat ilmoitusmerkin lukemattomien kohteiden tai odottavien toimien osoittamiseen. Lisätkää linkin oikeaan reunaan kohdistettu pieni pillerimerkki luokalla ml-auto. Muotoilkaa se pieneksi ympyräksi laskuria varten luokilla ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-xs text-white tai käyttäkää pienempää pistettä yksinkertaisena lukemattomuuden merkkinä.

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

Tummat ja vaaleat sivupalkkiteemat

Vaikka tummat sivupalkit ovat perinteinen ratkaisu, vaaleat sivupalkit (bg-white border-r border-gray-200), joissa on tumma teksti, ovat yhä suositumpia puhtaamman ja modernimman ulkoasun vuoksi. Valinta riippuu brändistänne. Tumma sivupalkki luo voimakkaan visuaalisen kontrastin ja erottaa navigoinnin selkeästi sisällöstä. Vaalea sivupalkki tuntuu ilmavammalta ja sopii hyvin yhteen valkoisten pääsisältöalueiden kanssa.

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

Pikatarkistus

Testatkaa, kuinka hyvin ymmärrätte tämän oppitunnin Tailwind CSS Mastery -käsitteet.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin yhteenveto

Tässä oppitunnissa opitte: kaksipalstaisen dashboard-rungon rakentamisen kiinteällä sivupalkilla ja joustavalla pääalueella, sivupalkin navigoinnin jäsentämisen ryhmien, aktiivisten tilojen ja ilmoitusmerkkien avulla sekä mobiilisivupalkkien käsittelyn siirtämällä ne näkymän ulkopuolelle ja käyttämällä taustapeitettä. Seuraavaksi rakennamme yläpalkin ja murupolun.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 30
Oppitunnit: 120

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Hallintapaneelin runko ja sivupalkki” ilmainen?

Kyllä – oppitunnin ”Hallintapaneelin runko ja sivupalkki” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Hallintapaneelin runko ja sivupalkki”?

Määrittäkää kaksipalstainen hallintapaneelin runko, jossa on kiinteä sivupalkki navigointilinkkeineen, kuvakkeineen ja alareunan käyttäjäprofiiliosioineen. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Hallintapaneelin runko ja sivupalkki”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?

Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Tailwind CSS Academy