구성 요소 사이드바 탐색 Sidebar Navigation 구성 요소

Sidebar Navigation 구성 요소

다크 모드를 지원하는 반응형 사이드바 탐색 구성 요소. 미니멀리스트/플랫 디자인, 단색 색 구성표, 포트폴리오를 위한 복잡한 인터페이스. Tailwind CSS, picsum.photos 및 randomuser.me 를 사용합니다. 자바스크립트가 없습니다.

미리 보기

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>

Sidebar Navigation 구성 요소

미리 보기

HTML 코드

관련 구성 요소

레트로사이드바내비게이션

Sidebar Navigation 구성 요소

Glassmorphism 사이드바 탐색