Healthcare Sidebar 구성 요소
의료 애플리케이션을 위한 복잡하고 미니멀하며 반응이 빠른 사이드바 구성 요소로, 유사한 색 구성표와 다크 모드 지원을 특징으로 합니다. 탐색, 사용자 프로필 및 빠른 링크가 포함됩니다.
HTML 코드
<div class="flex h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
<!-- Sidebar -->
<div class="flex flex-col w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shadow-lg transition-all duration-300 ease-in-out md:translate-x-0" id="sidebar">
<!-- Sidebar Header -->
<div class="flex items-center justify-between h-16 px-4 border-b border-gray-200 dark:border-gray-700">
<a href="#" class="flex items-center space-x-2">
<svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
<span class="text-xl font-semibold text-gray-900 dark:text-white">MedPanel</span>
</a>
<!-- Mobile menu button - hidden on desktop -->
<button type="button" class="md:hidden text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 rounded" aria-controls="sidebar" aria-expanded="false" onclick="document.getElementById('sidebar').classList.toggle('translate-x-0'); document.getElementById('sidebar').classList.toggle('-translate-x-full');">
<span class="sr-only">Open sidebar</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<!-- User Profile -->
<div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
<img class="h-12 w-12 rounded-full ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User avatar">
<div class="ml-3">
<p class="text-lg font-medium text-gray-900 dark:text-white">Dr. Elena Smith</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Cardiologist</p>
</div>
</div>
<!-- Main Navigation -->
<nav class="flex-1 px-2 py-4 space-y-1 overflow-y-auto">
<a href="#" class="flex items-center p-3 rounded-lg text-indigo-700 dark:text-indigo-300 bg-indigo-100 dark:bg-indigo-700/30 font-semibold hover:bg-indigo-100 dark:hover:bg-indigo-700/50 group transition-colors duration-200">
<svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-6-6v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span>Dashboard</span>
</a>
<a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
<svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<span>Patients</span>
</a>
<a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
<svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2zm7-9v5m-5-5h5m-5 0h.01M12 12c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2z" />
</svg>
<span>Appointments</span>
</a>
<a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
<svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
<span>Records</span>
</a>
<a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
<svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M10 14v10m-2-5a2 2 0 002 2h4a2 2 0 002-2m-2 0V11m0 0h2m-2 0H8m6 0h2m-2 0v5m4-5v5M7 7h.01M17 7h.01" />
</svg>
<span>Analytics</span>
</a>
<a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
<svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
</svg>
<span>Messages <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">3</span></span>
</a>
</nav>
<!-- Quick Links / Settings -->
<div class="mt-auto px-2 py-4 border-t border-gray-200 dark:border-gray-700">
<a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
<svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span>Settings</span>
</a>
<a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
<svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<span>Logout</span>
</a>
</div>
</div>
<!-- Main Content Area (dummy content for layout) -->
<main class="flex-1 p-6 md:p-8 overflow-y-auto">
<h1 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">Dashboard Overview</h1>
<p class="text-gray-700 dark:text-gray-300">Welcome to your healthcare management system. Use the sidebar to navigate through different sections.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
<h2 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">Upcoming Appointments</h2>
<p class="text-gray-700 dark:text-gray-300">Dr. John Doe - Cardiology, Today 10:00 AM</p>
<p class="text-gray-700 dark:text-gray-300">Ms. Jane Smith - Pediatrics, Tomorrow 02:30 PM</p>
<a href="#" class="mt-4 inline-block text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
<h2 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">Recent Patients</h2>
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
<li>Patient ID: P2023001 - <span class="font-medium">Sarah Connor</span></li>
<li>Patient ID: P2023002 - <span class="font-medium">Kyle Reese</span></li>
</ul>
<a href="#" class="mt-4 inline-block text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
<h2 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">Pending Tasks</h2>
<p class="text-gray-700 dark:text-gray-300">Review lab results for Patient P2023001</p>
<p class="text-gray-700 dark:text-gray-300">Update medication for Patient P2023002</p>
<a href="#" class="mt-4 inline-block text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
</div>
</div>
</main>
<!-- Overlay for mobile sidebar -->
<div class="fixed inset-0 bg-gray-900 bg-opacity-50 z-40 md:hidden -translate-x-full transition-opacity duration-300 ease-in-out" id="sidebar-overlay" onclick="document.getElementById('sidebar').classList.toggle('translate-x-0'); document.getElementById('sidebar').classList.toggle('-translate-x-full'); document.getElementById('sidebar-overlay').classList.toggle('opacity-100'); document.getElementById('sidebar-overlay').classList.toggle('-translate-x-full');"></div>
<script>
// This small script is for handling the mobile sidebar open/close functionality.
// In a real application, you'd likely use a framework or more robust JS.
const sidebar = document.getElementById('sidebar');
const sidebarToggleButton = document.querySelector('button[aria-controls="sidebar"]');
const sidebarOverlay = document.getElementById('sidebar-overlay');
sidebarToggleButton.addEventListener('click', () => {
sidebar.classList.toggle('-translate-x-full');
sidebarOverlay.classList.toggle('-translate-x-full');
});
sidebarOverlay.addEventListener('click', () => {
sidebar.classList.add('-translate-x-full');
sidebarOverlay.classList.add('-translate-x-full');
});
</script>
</div>