Componente de la barra lateral de criptomonedas

<div class="flex h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <!-- Sidebar -->
  <div class="w-64 flex-shrink-0 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 duration-300 ease-in-out z-40" id="sidebar">
    <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <svg class="w-8 h-8 text-indigo-600 dark:text-indigo-400 mr-2" 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-1-1.25-3M10.25 10h3.5m-3.5 3h3.5m-4.5 9V5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3-7 3z"></path>
        </svg>
        <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">CryptoVault</span>
      </div>
      <button class="md:hidden text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none" onclick="document.getElementById('sidebar').classList.add('-translate-x-full'); document.getElementById('backdrop').classList.add('hidden');">
        <svg class="w-6 h-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-4">
      <a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out active:bg-gray-300 dark:active:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-5 h-5 mr-3" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-15 4v-2a3 3 0 013-3h2m0 0a3 3 0 013-3h2m-3 2v5h-5M3 12h18"></path>
        </svg>
        Dashboard
      </a>
      <a href="#" class="flex items-center py-3 px-4 text-indigo-600 dark:text-indigo-400 bg-gray-200 dark:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out shadow-sm">
        <svg class="w-5 h-5 mr-3" 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.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4.636 17.364l-.707.707M3 12H2m1-.636L1.636 4.636l.707.707M12 22v-1m-4.636-.707l-.707-.707M3 12h-1M12 21v-1m-4.636-1.364l-.707-.707M2 12h-1M12 23v-1M12 15a3 3 0 110-6 3 3 0 010 6z"></path>
        </svg>
        Portfolio
      </a>
      <a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-5 h-5 mr-3" 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 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v2m0 0v6a2 2 0 002 2h2m2-4h1v4c0 .552.448 1 1 1h2a1 1 0 001-1v-4h1m-6 0h6m-9-6h9c1.657 0 3 1.343 3 3v3H3V6c0-1.657 1.343-3 3-3z"></path>
        </svg>
        Transactions
      </a>
      <a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-5 h-5 mr-3" 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="M7 12l3-3m0 0l3 3m-3-3v8m0-9a9 9 0 11-9 9m9-9A9 9 0 0121 12a9 9 0 01-9 9m-9-9a9 9 0 009 9m0-9V5"></path>
        </svg>
        Exchange
      </a>
      <a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-5 h-5 mr-3" 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 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
        </svg>
        Analytics
      </a>
    </nav>
    <div class="mt-auto p-4 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center space-x-3 mb-4">
        <img class="h-10 w-10 rounded-full object-cover border-2 border-indigo-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <div>
          <p class="font-medium text-gray-900 dark:text-gray-100">Jane Doe</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Premium User</p>
        </div>
      </div>
      <a href="#" class="w-full flex items-center justify-center py-2 px-4 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-4 h-4 mr-2" 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.37a1.724 1.724 0 002.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>
        Settings
      </a>
    </div>
  </div>

  <!-- Main Content Area Placeholder -->
  <div class="flex-1 flex flex-col overflow-hidden">
    <!-- Top Bar (Minimal for this component) -->
    <header class="flex items-center justify-between p-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-md">
      <button class="md:hidden focus:outline-none text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" onclick="document.getElementById('sidebar').classList.remove('-translate-x-full'); document.getElementById('backdrop').classList.remove('hidden');">
        <svg class="w-6 h-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="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
      <h1 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Portfolio Overview</h1>
      <div class="flex items-center space-x-4">
        <!-- Dark mode toggle placeholder -->
        <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500" onclick="document.documentElement.classList.toggle('dark')">
          <svg class="w-5 h-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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
        </button>
      </div>
    </header>
    <main class="flex-1 overflow-x-hidden overflow-y-auto p-6">
      <!-- Your main content goes here -->
      <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">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Total Balance</h2>
          <p class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">$23,456.78</p>
          <p class="text-sm text-green-500 mt-2">+3.4% today</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Bitcoin Holding</h2>
          <p class="text-2xl font-bold text-gray-900 dark:text-gray-100">0.5 BTC</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Value: $15,000</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Recent Activity</h2>
          <ul class="space-y-3">
            <li class="flex justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
              <span>Buy ETH</span>
              <span class="text-green-500">+$500</span>
            </li>
            <li class="flex justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
              <span>Sell ADA</span>
              <span class="text-red-500">-$120</span>
            </li>
            <li class="flex justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
              <span>Deposit USD</span>
              <span class="text-green-500">+$1000</span>
            </li>
          </ul>
        </div>
      </div>
    </main>
  </div>

  <!-- Overlay for mobile sidebar -->
  <div class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden md:hidden" id="backdrop" onclick="document.getElementById('sidebar').classList.add('-translate-x-full'); this.classList.add('hidden');"></div>
</div>