Gaming_Sidebar_Navigation_Component
A responsive sidebar navigation component for gaming websites, featuring a monospace/developer-inspired design with high contrast, dark mode support, and interactive elements. Ideal for game interfaces and community portals.
HTML Code
<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>Related Components
Sidebar Navigation Component
A simple, responsive sidebar navigation component with microinteraction-focused hover effects, designed for government/public service websites. Features analogous color scheme and dark mode support.
RetroSidebarNavigation
A retro/vintage styled sidebar navigation component with responsive effects and dark theme support using Tailwind CSS.
Sidebar Navigation Component
A responsive sidebar navigation component designed in the Brutalism style, perfect for e-commerce applications. It features vibrant colors, high contrast, and multiple interactive elements, including links to different shopping categories, user account options, and a vibrant call-to-action button for shopping cart access. The design adapts to dark mode as well.