复古侧边栏导航

<div class="flex h-screen">
  <!-- Sidebar -->
  <div class="w-64 bg-gray-800 text-gray-100 retro-sidebar">
    <div class="p-4 text-2xl font-bold border-b border-gray-700 retro-title">Vaporwave Nav</div>
    <nav class="mt-4">
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item">💿 Tracks</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item">📼 mixtapes</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item"> neon city</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item">💾💾💾 save game</a>
    </nav>
  </div>

  <!-- Page Content -->
  <div class="flex-1 p-10 text-2xl font-bold">
    <h1 class="retro-main-title">Welcome to the Grid</h1>
    <p class="mt-4 text-base retro-text">Explore the digital landscape...</p>
      <img src="https://picsum.photos/seed/retroscape/800/600" alt="Retro landscape" class="mt-8 rounded-lg shadow-lg">
  </div>
</div>

<style>
.retro-sidebar {
  background: linear-gradient(145deg, #4a0e4a, #1a051a);
  font-family: 'Press Start 2P', cursive;
}

.retro-title {
  color: #0ff;
  text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 15px #0ff, 0 0 20px #0ff;
}

.retro-nav-item {
  color: #0f0;
  text-shadow: 0 0 3px #0f0;
}

.retro-nav-item:hover {
  color: #ff0;
  text-shadow: 0 0 5px #ff0;
}

.retro-main-title {
    font-family: 'Press Start 2P', cursive;
    color: #f0f;
    text-shadow: 0 0 7px #f0f, 0 0 12px #f0f, 0 0 18px #f0f;
}

.retro-text {
    font-family: 'Press Start 2P', cursive;
    color: #0ff;
    text-shadow: 0 0 3px #0ff;
}

@media (max-width: 768px) {
  .retro-sidebar {
    width: 100%;
    height: auto;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .retro-sidebar {
    background: linear-gradient(145deg, #1a051a, #4a0e4a);
  }
  .retro-title {
    color: #0f0;
    text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 15px #0f0, 0 0 20px #0f0;
  }
  .retro-nav-item {
    color: #0ff;
    text-shadow: 0 0 3px #0ff;
  }
  .retro-nav-item:hover {
    color: #f0f;
    text-shadow: 0 0 5px #f0f;
  }
  .retro-main-title {
      color: #0ff;
      text-shadow: 0 0 7px #0ff, 0 0 12px #0ff, 0 0 18px #0ff;
  }
  .retro-text {
      color: #f0f;
      text-shadow: 0 0 3px #f0f;
  }
}
</style>