shni/amayo
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Actualizar navegación del dashboard para incluir un botón de menú móvil y ajustar la visibilidad de la barra de navegación

Browse Source
This commit is contained in:
Shni
2025-10-14 23:31:55 -05:00
parent 37355e3e9a
commit 3fe714ad20
4 changed files with 63 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/server/server.ts
View File

@@ -936,7 +936,8 @@ export const server = createServer(
guilds, guilds,
selectedGuild: guildId, selectedGuild: guildId,
page, page,
hideNavbar: true, hideNavbar: false,
useDashboardNav: true,
}); });
return; return;
} }

4
src/server/views/layouts/layout.ejs
View File

@@ -21,7 +21,9 @@
</head> </head>
<body class="min-h-screen pixel-grid-bg pt-14" style="background-image: url('/assets/images/background.svg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat;"> <body class="min-h-screen pixel-grid-bg pt-14" style="background-image: url('/assets/images/background.svg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat;">
<% if (!hideNavbar) { %> <% if (useDashboardNav) { %>
<%- await include('../partials/dashboard_nav', { appName, user }) %>
<% } else if (!hideNavbar) { %>
<%- await include('../partials/navbar', { appName }) %> <%- await include('../partials/navbar', { appName }) %>
<% } %> <% } %>

73
src/server/views/pages/dashboard.ejs
View File

@@ -1,8 +1,8 @@
<div class="max-w-6xl mx-auto p-4"> <div class="max-w-3xl mx-auto p-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="relative flex justify-center">
<!-- Card principal --> <!-- Card principal (centered) -->
<div class="col-span-2"> <div class="w-full">
<div class="backdrop-blur-md bg-white/10 border border-white/10 rounded-xl p-6 shadow-lg glass-card"> <div class="mx-auto backdrop-blur-md bg-white/10 border border-white/10 rounded-xl p-6 shadow-lg glass-card">
<h1 class="text-3xl font-bold mb-2"><%= appName %></h1> <h1 class="text-3xl font-bold mb-2"><%= appName %></h1>
<p class="text-sm text-slate-200/80 mb-4">Panel de administración</p> <p class="text-sm text-slate-200/80 mb-4">Panel de administración</p>
<div class="mt-4"> <div class="mt-4">
@@ -12,19 +12,58 @@
</div> </div>
</div> </div>
<!-- Sidebar navegación móvil estilo app --> <% if (typeof selectedGuild !== 'undefined' && selectedGuild) { %>
<aside class="col-span-1 md:col-span-1"> <!-- Floating sidebar for guild actions -->
<nav class="bg-white/6 backdrop-blur rounded-xl p-4 glass-card"> <aside class="absolute right-8 top-20 hidden lg:block">
<ul class="flex md:flex-col gap-2"> <nav class="bg-white/6 backdrop-blur rounded-xl p-4 glass-card w-48">
<li><a href="/dashboard/overview" class="block p-2 rounded-md hover:bg-white/5">Overview</a></li> <ul class="flex flex-col gap-3">
<li><a href="/dashboard/members" class="block p-2 rounded-md hover:bg-white/5">Miembros</a></li> <li><a href="/dashboard/<%= selectedGuild %>/overview" class="block p-2 rounded-md hover:bg-white/5">Overview</a></li>
<li><a href="/dashboard/settings" class="block p-2 rounded-md hover:bg-white/5">Ajustes</a></li> <li><a href="/dashboard/<%= selectedGuild %>/members" class="block p-2 rounded-md hover:bg-white/5">Miembros</a></li>
<li><a href="/dashboard/areas" class="block p-2 rounded-md hover:bg-white/5">Game Areas</a></li> <li><a href="/dashboard/<%= selectedGuild %>/settings" class="block p-2 rounded-md hover:bg-white/5">Ajustes</a></li>
<li><a href="/dashboard/mobs" class="block p-2 rounded-md hover:bg-white/5">Mobs</a></li> <li><a href="/dashboard/<%= selectedGuild %>/areas" class="block p-2 rounded-md hover:bg-white/5">Game Areas</a></li>
</ul> <li><a href="/dashboard/<%= selectedGuild %>/mobs" class="block p-2 rounded-md hover:bg-white/5">Mobs</a></li>
</nav> </ul>
</aside> </nav>
</aside>
<!-- Mobile drawer/backdrop -->
<div id="drawerBackdrop" class="fixed inset-0 bg-black/40 z-40 hidden"></div>
<div id="mobileDrawer" class="fixed left-0 top-0 bottom-0 w-64 bg-white/6 backdrop-blur z-50 transform -translate-x-full transition-transform duration-300">
<div class="p-4">
<h4 class="text-white font-semibold mb-3">Servidor: <%= selectedGuild %></h4>
<ul class="flex flex-col gap-3">
<li><a href="/dashboard/<%= selectedGuild %>/overview" class="block p-2 rounded-md hover:bg-white/5">Overview</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/members" class="block p-2 rounded-md hover:bg-white/5">Miembros</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/settings" class="block p-2 rounded-md hover:bg-white/5">Ajustes</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/areas" class="block p-2 rounded-md hover:bg-white/5">Game Areas</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/mobs" class="block p-2 rounded-md hover:bg-white/5">Mobs</a></li>
</ul>
</div>
</div>
<% } %>
</div> </div>
</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>

2
src/server/views/partials/dashboard_nav.ejs
View File

@@ -2,6 +2,8 @@
<div class="max-w-6xl mx-auto flex items-center justify-between"> <div class="max-w-6xl mx-auto flex items-center justify-between">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<a href="/" class="text-white font-bold">← Volver</a> <a href="/" class="text-white font-bold">← Volver</a>
<!-- Drawer toggle for mobile -->
<button id="drawerToggle" class="ml-3 lg:hidden text-white/90 px-3 py-2 rounded-md hover:bg-white/5">☰</button>
<span class="text-white/80">|</span> <span class="text-white/80">|</span>
<h3 class="text-white font-semibold"><%= appName %></h3> <h3 class="text-white font-semibold"><%= appName %></h3>
</div> </div>