사이드바 탐색 구성 요소 - 게임
미니멀하고 반응이 빠른 사이드바 탐색 구성 요소로, 검은색, 흰색 및 밝은 액센트 색상으로 게임 웹사이트용으로 설계되었습니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="flex h-screen bg-gray-100 dark:bg-gray-900 font-sans">
<!-- Mobile Menu Toggle Button (hidden on desktop) -->
<button class="p-4 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 md:hidden absolute top-0 left-0 z-20" aria-label="Toggle Navigation">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
<!-- Sidebar -->
<aside class="w-64 bg-white dark:bg-gray-800 shadow-lg md:relative absolute inset-y-0 left-0 transform -translate-x-full md:translate-x-0 transition-transform duration-200 ease-in-out z-10" id="sidebar">
<div class="flex flex-col h-full">
<!-- Logo/Title -->
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">GameForge</h1>
</div>
<!-- Navigation Links -->
<nav class="flex-1 p-4 space-y-2">
<a href="#dashboard" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group">
<svg class="h-5 w-5 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400" 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 2m-2-2v10a1 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 class="font-medium">Dashboard</span>
</a>
<a href="#games" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group">
<svg class="h-5 w-5 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.792 2-4 2s-4-.895-4-2 1.792-2 4-2 4 .895 4 2zm12-2v2m-6-2v2M6 16.5V11M9 13V6l2-1m-2 7a2 2 0 11-4 0 2 2 0 014 0zm10.75-2.25l-2-2-4 4-2 2z" />
</svg>
<span class="font-medium">My Games</span>
</a>
<a href="#community" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group">
<svg class="h-5 w-5 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M17 20v-2c0-.35L3 4m7 2a4 4 0 11-8 0 4 4 0 018 0zm0 0c1.734-.843 2.002-2.906 1.157-4.64C10.16 2.766 8.1 2.498 6.357 3.353m6.762 6.762A4 4 0 1120 16a4 4 0 01-8 0zv" />
</svg>
<span class="font-medium">Community</span>
</a>
<a href="#store" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group">
<svg class="h-5 w-5 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
<span class="font-medium">Store</span>
</a>
<a href="#settings" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group">
<svg class="h-5 w-5 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400" 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.37a1.724 1.724 0 002.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 class="font-medium">Settings</span>
</a>
</nav>
<!-- User Profile/Accent Section -->
<div class="p-4 border-t border-gray-200 dark:border-gray-700 mt-auto">
<div class="flex items-center space-x-3">
<img class="h-10 w-10 rounded-full ring-2 ring-blue-500 dark:ring-blue-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<div class="leading-none">
<p class="text-sm font-semibold text-gray-900 dark:text-white">PlayerOne</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Level 42</p>
</div>
</div>
</div>
</div>
</aside>
<!-- Main Content Area (for demonstration, can be styled further) -->
<main class="flex-1 p-8 overflow-y-auto">
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Welcome, PlayerOne!</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Latest Achievement</h3>
<p class="text-gray-600 dark:text-gray-300">Unlocked 'Master Adventurer' in 'The Eldoria Chronicles'!</p>
<img class="mt-4 rounded-md object-cover w-full h-32" src="https://picsum.photos/300/200?random=1" alt="Achievement thumbnail">
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">New Game Releases</h3>
<p class="text-gray-600 dark:text-gray-300">Check out the highly anticipated 'Galactic Conquest' this week!</p>
<img class="mt-4 rounded-md object-cover w-full h-32" src="https://picsum.photos/300/200?random=2" alt="New game thumbnail">
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Community Highlights</h3>
<p class="text-gray-600 dark:text-gray-300">Top 5 'Fortress Siege' strategies discussed in forums.</p>
<img class="mt-4 rounded-md object-cover w-full h-32" src="https://picsum.photos/300/200?random=3" alt="Community thumbnail">
</div>
</div>
</main>
<!-- Optional: Overlay for mobile menu -->
<div class="fixed inset-0 bg-black bg-opacity-50 z-5 hidden md:hidden" id="sidebar-overlay"></div>
</div>
<!-- Simple JavaScript for mobile menu toggle - Note: This is an exception for demonstration purposes as per prompt, but component is designed to render without JS. -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const toggleButton = document.querySelector('button[aria-label="Toggle Navigation"]');
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('sidebar-overlay');
if (toggleButton && sidebar && overlay) {
toggleButton.addEventListener('click', () => {
sidebar.classList.toggle('-translate-x-full');
overlay.classList.toggle('hidden');
});
overlay.addEventListener('click', () => {
sidebar.classList.add('-translate-x-full');
overlay.classList.add('hidden');
});
}
});
</script>관련 구성 요소
재미있는 교육용 사이드바 탐색
교육 플랫폼을 위한 복잡하고 재미있으며 반응이 빠른 사이드바 탐색 구성 요소로, 흙색, 둥근 요소 및 다크 모드 지원을 특징으로 합니다. 사용자 프로필, 기본 탐색, 과정 진행 상황 및 빠른 링크가 포함됩니다.
Sidebar Navigation 구성 요소
Brutalism 스타일로 설계된 반응형 사이드바 탐색 구성 요소로, 전자 상거래 애플리케이션에 적합합니다. 생생한 색상, 고대비, 다양한 쇼핑 카테고리에 대한 링크, 사용자 계정 옵션, 장바구니 액세스를 위한 생생한 클릭 유도문안 버튼을 포함한 여러 대화형 요소가 특징입니다. 디자인은 다크 모드에도 적용됩니다.