サイドバーナビゲーションコンポーネント - ゲーム

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