amayo/src/server/views/pages/dashboard.ejs

<% if (typeof useDashboardNav !== 'undefined' && useDashboardNav) { %>
  <%- include('../partials/dashboard_nav') %>
<% } %>
<div class="max-w-7xl mx-auto p-6">
  <div class="flex flex-col lg:flex-row gap-6">
    <!-- Left sidebar (menu 1) -->
    <aside class="hidden lg:block w-60">
      <nav class="bg-white/6 backdrop-blur rounded-xl p-4 glass-card h-[70vh]">
        <ul class="flex flex-col gap-4">
          <li class="text-slate-300">Item L1</li>
          <li class="text-slate-300">Item L2</li>
          <li class="text-slate-300">Item L3</li>
          <li class="text-slate-300">Item L4</li>
        </ul>
      </nav>
    </aside>

    <!-- Center panel (overview) -->
    <main class="flex-1">
      <div class="backdrop-blur-md bg-white/8 border border-white/8 rounded-xl p-8 shadow-lg min-h-[70vh]">
        <h2 class="text-xl text-slate-200 mb-6">Overview</h2>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div class="bg-white/5 rounded p-4">Panel A</div>
          <div class="bg-white/5 rounded p-4">Panel B</div>
          <div class="bg-white/5 rounded p-4">Panel C</div>
          <div class="bg-white/5 rounded p-4">Panel D</div>
        </div>
      </div>
    </main>

    <!-- Right sidebar (menu 2) -->
    <aside class="hidden lg:block w-56">
      <nav class="bg-white/6 backdrop-blur rounded-xl p-4 glass-card h-[70vh]">
        <ul class="flex flex-col gap-3">
          <li><a href="#" class="block p-2 rounded-md hover:bg-white/5">Overview</a></li>
          <li><a href="#" class="block p-2 rounded-md hover:bg-white/5">Miembros</a></li>
          <li><a href="#" class="block p-2 rounded-md hover:bg-white/5">Ajustes</a></li>
          <li><a href="#" class="block p-2 rounded-md hover:bg-white/5">Game Areas</a></li>
          <li><a href="#" class="block p-2 rounded-md hover:bg-white/5">Mobs</a></li>
        </ul>
      </nav>
    </aside>
  </div>
</div>

  

  <script>
    // Drawer toggle logic
    const drawerToggle = document.getElementById('drawerToggle');
    const mobileDrawer = document.getElementById('mobileDrawer');
    const drawerBackdrop = document.getElementById('drawerBackdrop');
    function openDrawer() {
      mobileDrawer.classList.remove('-translate-x-full');
      drawerBackdrop.classList.remove('hidden');
    }
    function closeDrawer() {
      mobileDrawer.classList.add('-translate-x-full');
      drawerBackdrop.classList.add('hidden');
    }
    drawerToggle?.addEventListener('click', openDrawer);
    drawerBackdrop?.addEventListener('click', closeDrawer);
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') closeDrawer();
    });
  </script>