Gaming_Sidebar_Navigation_Component

<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>