Gaming_Sidebar_Navigation_Component
게임 웹 사이트를 위한 반응형 사이드바 탐색 구성 요소로, 고대비, 다크 모드 지원 및 대화형 요소를 갖춘 모노스페이스/개발자에서 영감을 받은 디자인을 특징으로 합니다. 게임 인터페이스 및 커뮤니티 포털에 이상적입니다.
HTML 코드
<div class="min-h-screen bg-gray-50 font-mono text-gray-900 dark:bg-gray-950 dark:text-gray-50">
<div class="flex flex-col md:flex-row">
<!-- Sidebar -->
<div class="fixed inset-0 z-40 h-full w-64 transform -translate-x-full overflow-y-auto bg-gray-800 p-6 shadow-lg transition-all duration-300 ease-in-out dark:bg-gray-900 md:relative md:w-64 md:translate-x-0" id="sidebar">
<div class="flex items-center justify-between">
<h2 class="text-2xl font-bold uppercase text-green-400">// GAMING_UI</h2>
<button class="text-gray-400 focus:outline-none md:hidden" onclick="document.getElementById('sidebar').classList.toggle('-translate-x-full')">
<svg class="h-6 w-6" 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="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<nav class="mt-10 space-y-4">
<a href="#" class="flex items-center rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
<svg class="mr-3 h-5 w-5" 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.75 17L9 20l-1 1h8l-1-1l-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
<span>// DASHBOARD</span>
</a>
<a href="#" class="flex items-center rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
<svg class="mr-3 h-5 w-5" 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="M11 4a2 2 0 10-4 0v12a2 2 0 104 0V4zm1 0a2 2 0 10-4 0v12a2 2 0 104 0V4zm0 8a2 2 0 10-4 0v4a2 2 0 104 0v-4z"></path>
</svg>
<span>// GAMES_LIBRARY</span>
</a>
<a href="#" class="flex items-center rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
<svg class="mr-3 h-5 w-5" 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 20h2a2 2 0 002-2V8a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V3"></path>
</svg>
<span>// DOWNLOADS</span>
</a>
<a href="#" class="flex items-center rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
<svg class="mr-3 h-5 w-5" 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 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm-6-9a4 4 0 100-8 4 4 0 000 8zm7-2a2 2 0 11-4 0 2 2 0 014 0zM18 10a2 2 0 10-4 0 2 2 0 004 0z"></path>
</svg>
<span>// FRIENDS_LIST</span>
</a>
<div class="relative">
<button onclick="document.getElementById('community-dropdown').classList.toggle('hidden')" class="flex w-full items-center justify-between rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
<div class="flex items-center">
<svg class="mr-3 h-5 w-5" 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>// COMMUNITY</span>
</div>
<svg class="h-4 w-4 transform transition-transform duration-300 ease-in-out" 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="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div id="community-dropdown" class="absolute left-full top-0 ml-2 hidden w-48 rounded-md bg-gray-700 py-2 shadow-lg dark:bg-gray-800">
<a href="#" class="block px-4 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">// FORUMS</a>
<a href="#" class="block px-4 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">// NEWS</a>
<a href="#" class="block px-4 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">// LIVE_STREAMS</a>
</div>
</div>
<a href="#" class="flex items-center rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
<svg class="mr-3 h-5 w-5" 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>// SETTINGS</span>
</a>
</nav>
<div class="mt-10 border-t border-gray-700 pt-6 text-sm text-gray-400">
<p>// USER_PROFILE</p>
<div class="mt-4 flex items-center">
<img class="h-10 w-10 rounded-full border-2 border-green-500 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="ml-3">
<p class="font-bold text-white">_PLAYER_ONE_</p>
<p class="text-xs text-gray-400">// ONLINE</p>
</div>
</div>
<button class="mt-4 w-full rounded-md bg-red-600 px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800">
// LOGOUT
</button>
</div>
</div>
<!-- Main Content Area -->
<div class="ml-0 flex-1 p-6 transition-all duration-300 ease-in-out md:ml-64">
<!-- Top Bar for mobile menu toggle -->
<div class="mb-6 flex items-center justify-between md:hidden">
<h1 class="text-2xl font-bold uppercase text-green-500">// CONSOLE_LOG</h1>
<button class="text-gray-900 dark:text-gray-50 focus:outline-none" onclick="document.getElementById('sidebar').classList.toggle('-translate-x-full')">
<svg class="h-8 w-8" 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="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<h1 class="text-3xl font-bold uppercase text-green-500 md:block hidden">// DASHBOARD_OVERVIEW</h1>
<div class="mt-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
<!-- Card 1 -->
<div class="rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800">
<h3 class="text-xl font-semibold uppercase text-blue-500">// ACTIVE_GAMES</h3>
<p class="mt-4 text-gray-700 dark:text-gray-300">_STATUS: LOADING_GAME_DATA...</p>
<div class="mt-4 space-y-3">
<div class="flex items-center">
<img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/19/50/50" alt="Game Icon">
<span class="ml-3 text-gray-800 dark:text-gray-200">GAME_TITLE_XYZ // PLAYING</span>
</div>
<div class="flex items-center">
<img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/20/50/50" alt="Game Icon">
<span class="ml-3 text-gray-800 dark:text-gray-200">ANOTHER_GAME // PAUSED</span>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800">
<h3 class="text-xl font-semibold uppercase text-red-500">// RECENT_ACTIVITY</h3>
<ul class="mt-4 space-y-2 text-gray-700 dark:text-gray-300">
<li><span class="text-yellow-500">_LOG:</span> GAME_XYZ achieved PLATINUM_RANK.</li>
<li><span class="text-yellow-500">_LOG:</span> Download completed: PATCH_V1.2.</li>
<li><span class="text-yellow-500">_LOG:</span> Joined 'ELITE_SQUAD' guild.</li>
</ul>
</div>
<!-- Card 3 -->
<div class="rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800">
<h3 class="text-xl font-semibold uppercase text-purple-500">// MESSAGES</h3>
<div class="mt-4 space-y-3">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="ml-3">
<p class="font-semibold text-gray-800 dark:text-gray-200">_SPECTRA_</p>
<p class="text-sm text-gray-600 dark:text-gray-400">"GG, well played!"</p>
</div>
</div>
<div class="flex items-center">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
<div class="ml-3">
<p class="font-semibold text-gray-800 dark:text-gray-200">_CODE_BREAKER_</p>
<p class="text-sm text-gray-600 dark:text-gray-400">"New mission available."</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- No extra JS, just simple toggles managed via inline onclick for demonstration -->
<script>
// This script is only for the sidebar toggle on small screens and dropdowns.
// In a real application, you might use a framework or more robust JS.
document.addEventListener('DOMContentLoaded', () => {
const sidebar = document.getElementById('sidebar');
const dropdownButton = document.querySelector('#community-dropdown').previousElementSibling;
const dropdownMenu = document.getElementById('community-dropdown');
// Close sidebar when clicking outside on mobile
document.addEventListener('click', (event) => {
if (!sidebar.contains(event.target) && !event.target.closest('button')) {
if (!sidebar.classList.contains('-translate-x-full')) {
sidebar.classList.add('-translate-x-full');
}
}
});
// Handle dropdown toggle for community
dropdownButton.addEventListener('click', (event) => {
event.stopPropagation(); // Prevent click from bubbling to document and closing sidebar
dropdownMenu.classList.toggle('hidden');
dropdownButton.querySelector('svg:last-child').classList.toggle('rotate-180');
});
// Close dropdown when clicking outside
document.addEventListener('click', (event) => {
if (!dropdownMenu.contains(event.target) && !dropdownButton.contains(event.target)) {
dropdownMenu.classList.add('hidden');
dropdownButton.querySelector('svg:last-child').classList.remove('rotate-180');
}
});
});
</script>관련 구성 요소
Sidebar Navigation 구성 요소
블로그에 맞게 조정된 사이드바 탐색 구성 요소로, 3D 요소와 생생한 색상으로 디자인되었습니다. 다크 모드를 지원하고 반응형이며 콘텐츠 소비에 적합한 간단한 레이아웃을 특징으로 합니다.
재미있는 교육용 사이드바 탐색
교육 플랫폼을 위한 복잡하고 재미있으며 반응이 빠른 사이드바 탐색 구성 요소로, 흙색, 둥근 요소 및 다크 모드 지원을 특징으로 합니다. 사용자 프로필, 기본 탐색, 과정 진행 상황 및 빠른 링크가 포함됩니다.
Glassmorphism Sidebar Navigation 구성 요소
블로그를 위한 Glassmorphism 스타일의 사이드바 탐색 구성 요소로, 단색 색 구성표를 특징으로 합니다. HTML 및 Tailwind CSS만 사용하는 다크 모드를 지원하는 단순하고 반응이 빠른 디자인입니다. 사이드바에는 사이트 제목, 탐색 링크 및 프로필 섹션이 포함되어 있습니다.