재미있는 교육용 사이드바 탐색
교육 플랫폼을 위한 복잡하고 재미있으며 반응이 빠른 사이드바 탐색 구성 요소로, 흙색, 둥근 요소 및 다크 모드 지원을 특징으로 합니다. 사용자 프로필, 기본 탐색, 과정 진행 상황 및 빠른 링크가 포함됩니다.
HTML 코드
<div class="flex h-screen bg-orange-50 dark:bg-stone-900 font-sans">
<!-- Sidebar -->
<aside class="w-64 bg-amber-100 dark:bg-stone-800 p-6 flex flex-col shadow-lg rounded-r-2xl m-3 transition-all duration-300 ease-in-out md:w-64 sm:w-20 lg:w-72 overflow-hidden hover:w-64 md:hover:w-64 sm:hover:w-64">
<div class="flex items-center justify-between mb-8 transition-all duration-300 ease-in-out">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/id/64/40/40" alt="Logo" class="w-10 h-10 rounded-full shadow-md" />
<span class="text-stone-700 dark:text-orange-200 text-xl font-bold truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">LearnBuddy</span>
</div>
</div>
<!-- User Profile -->
<div class="flex items-center space-x-4 p-4 bg-amber-200 dark:bg-stone-700 rounded-xl mb-8 shadow-sm transition-all duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-400 dark:border-stone-600 shadow-md" />
<div class="flex-grow min-w-0 transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">
<h3 class="text-stone-800 dark:text-orange-100 text-lg font-semibold truncate">Alex Johnson</h3>
<p class="text-stone-600 dark:text-orange-300 text-sm truncate">Student</p>
</div>
</div>
<!-- Navigation Links -->
<nav class="flex-grow space-y-3">
<a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 12v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-7-7v10a1 1 0 01-1 1h-3"></path>
</svg>
<span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Dashboard</span>
<span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Dashboard</span>
</a>
<a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13.414m0-13.414a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5zm0 13.414a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">My Courses</span>
<span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">My Courses</span>
</a>
<a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.5 8a.5.5 0 11-1 0 .5.5 0 011 0zM12 6a.5.5 0 11-1 0 .5.5 0 011 0zM8.5 8a.5.5 0 11-1 0 .5.5 0 011 0zM12 10a.5.5 0 11-1 0 .5.5 0 011 0zM10 12a.5.5 0 11-1 0 .5.5 0 011 0zM10 14a.5.5 0 11-1 0 .5.5 0 011 0zM12 16a.5.5 0 11-1 0 .5.5 0 011 0zM14 14a.5.5 0 11-1 0 .5.5 0 011 0zM14 12a.5.5 0 11-1 0 .5.5 0 011 0zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Schedule</span>
<span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Schedule</span>
</a>
<a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
<span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Messages</span>
<span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Messages</span>
<span class="bg-red-500 text-white text-xs font-semibold px-2 py-0.5 rounded-full absolute top-2 right-2 sm:relative sm:top-auto sm:right-auto sm:ml-auto transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">3</span>
</a>
<a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
</svg>
<span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Resources</span>
<span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Resources</span>
</a>
</nav>
<!-- Course Progress Section -->
<div class="mt-8">
<h4 class="text-stone-800 dark:text-orange-200 text-md font-semibold mb-3 truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Your Progress</h4>
<div class="bg-amber-200 dark:bg-stone-700 p-4 rounded-xl shadow-sm">
<div class="flex justify-between items-center mb-2">
<span class="text-stone-700 dark:text-orange-200 text-sm truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">JavaScript Basics</span>
<span class="text-stone-600 dark:text-orange-300 text-xs transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">75%</span>
</div>
<div class="w-full bg-amber-300 dark:bg-stone-600 rounded-full h-2.5">
<div class="bg-emerald-500 h-2.5 rounded-full" style="width: 75%"></div>
</div>
<button class="mt-4 w-full bg-amber-400 dark:bg-stone-500 text-stone-900 dark:text-white py-2 rounded-lg font-bold text-sm hover:bg-amber-500 dark:hover:bg-stone-400 transition-colors duration-200 shadow-md transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Continue Learning</button>
</div>
</div>
<!-- Quick Links / Settings -->
<div class="mt-auto pt-8 border-t border-amber-300 dark:border-stone-600">
<a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Settings</span>
<span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Settings</span>
</a>
<a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
</svg>
<span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Log Out</span>
<span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Log Out</span>
</a>
</div>
</aside>
<!-- Main Content Area (Optional - for demonstration) -->
<main class="flex-1 p-6">
<h1 class="text-3xl font-bold text-stone-800 dark:text-orange-100 mb-6">Welcome to Dashboard</h1>
<p class="text-stone-700 dark:text-orange-200">This is where your main content would go.</p>
<p class="text-stone-700 dark:text-orange-200 mt-4">Resize the window to see responsiveness and hover over the sidebar on small screens to expand it.</p>
<div class="mt-8 p-6 bg-white dark:bg-stone-800 rounded-lg shadow-md">
<h2 class="text-xl font-semibold text-stone-800 dark:text-orange-100 mb-4">More Content</h2>
<p class="text-stone-700 dark:text-orange-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<img src="https://picsum.photos/id/1015/600/300" alt="Placeholder Image" class="mt-6 rounded-lg shadow-sm border border-stone-200 dark:border-stone-700">
</div>
</main>
</div>관련 구성 요소
Sidebar Navigation 구성 요소
반응형 사이드바 탐색 구성 요소에는 3D 디자인 요소, 유사한 색 구성표, 대화형 기능이 있는 중간 수준의 복잡성이 있습니다. 블로그 또는 콘텐츠 웹사이트에 적합합니다.
Sidebar Navigation 구성 요소
산업 디자인 스타일, 따뜻한 중성 색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 사이드바 탐색 구성 요소로, 암호화폐/블록체인 애플리케이션에 적합합니다.
Brutalism 사이드바 탐색
Brutalism 디자인, 생생한 색 구성표 및 블로그/콘텐츠 목적을 위한 단순한 레이아웃을 갖춘 반응형 사이드바 탐색 구성 요소. 다크 모드 지원이 포함됩니다.