<?php
// User/Include/topbar.php
$user = getCurrentUser();
?>
<div class="topbar">
  <button onclick="document.getElementById('sidebar').classList.toggle('open')" style="background:none;border:none;color:var(--text-muted);font-size:18px;
                 cursor:pointer;display:none" id="menuToggle">
    <i class="fas fa-bars"></i>
  </button>
  <div class="topbar-left">
    <?= e($pageTitle ?? 'Dashboard') ?>
  </div>
  <div class="topbar-wallet">
    <i class="fas fa-wallet" style="color:var(--gold);margin-right:6px"></i>
    <?= e(substr($user['walletAddress'] ?? '', 0, 10) . '...' . substr($user['walletAddress'] ?? '', -6)) ?>
  </div>
  <div class="topbar-bal">
    <i class="fas fa-coins" style="margin-right:5px"></i>
    $<?= number_format($user['wallet'] ?? 0, 2) ?>
  </div>
  <a href="Logout.php" title="Logout" style="color:var(--danger);font-size:16px;margin-left:6px">
    <i class="fas fa-sign-out-alt"></i>
  </a>
</div>
<script>
  window.addEventListener('resize', () => {
    document.getElementById('menuToggle').style.display = window.innerWidth <= 768 ? 'block' : 'none';
  });
  document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('menuToggle').style.display = window.innerWidth <= 768 ? 'block' : 'none';
  });
  document.addEventListener("click", function (e) {
    const sidebar = document.getElementById("sidebar");
    const toggle = document.getElementById("menuToggle");

    if (window.innerWidth <= 768) {
      if (!sidebar.contains(e.target) && !toggle.contains(e.target)) {
        sidebar.classList.remove("open");
      }
    }
  });
</script>
