Componenti Navigazione nella barra laterale Componente di navigazione della barra laterale

Componente di navigazione della barra laterale

Componente di navigazione reattiva della barra laterale con supporto per la modalità scura. Design minimalista/piatto, combinazione di colori monocromatica, interfaccia complessa per portfolio. Utilizza Tailwind CSS, picsum.photos e randomuser.me. Niente JavaScript.

Anteprima

Codice HTML

<div class="flex h-screen bg-gray-100 dark:bg-gray-900">

  <!-- Sidebar -->
  <div class="w-64 bg-white dark:bg-gray-800 shadow-lg">
    <div class="p-4">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
    </div>
    <nav class="mt-4">
      <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
      <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">About</a>
      <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Projects</a>
      <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Contact</a>
    </nav>

    <!-- Profile Section -->
    <div class="absolute bottom-0 w-full p-4 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div>
          <p class="font-bold text-gray-800 dark:text-white">John Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">View Profile</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Content (responsive - adjust margin-left on larger screens) -->
  <div class="flex-1 p-8">
    <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Welcome to my Portfolio</h2>

    <!-- Project Grid (Example) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Project Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project1/400/300" alt="Project Image">
        <div class="p-4">
          <h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Project Title 1</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>

      <!-- Project Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project2/400/300" alt="Project Image">
        <div class="p-4">
          <h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Project Title 2</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>

      <!-- Project Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project3/400/300" alt="Project Image">
        <div class="p-4">
          <h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Project Title 3</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>

    </div>

  </div>

</div>

Componenti correlati

Navigazione ludica ed educativa nella barra laterale

Un componente di navigazione della barra laterale complesso, giocoso e reattivo per piattaforme educative, con toni della terra, elementi arrotondati e supporto per la modalità scura. Include profilo utente, navigazione principale, avanzamento del corso e collegamenti rapidi.

Aperto