fixes menu

This commit is contained in:
Victor Broman 2026-02-06 19:18:55 +01:00
parent 656333275b
commit 37b45ee4db

@ -23,17 +23,17 @@
<div class="flex h-16 items-center justify-between">
<div class="flex items-center">
<a href="/" class="text-white font-bold text-xl tracking-tight">ERP System</a>
<div class="ml-10 flex items-baseline space-x-4">
<div class="hidden md:flex ml-10 items-baseline space-x-4">
<a href="/" class="{{if eq .ActivePage "dashboard"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} rounded-md px-3 py-2 text-sm font-medium">Dashboard</a>
<a href="/customers" class="{{if eq .ActivePage "customers"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} rounded-md px-3 py-2 text-sm font-medium">Customers</a>
<a href="/orders" class="{{if eq .ActivePage "orders"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} rounded-md px-3 py-2 text-sm font-medium">Orders</a>
<a href="/invoices" class="{{if eq .ActivePage "invoices"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} rounded-md px-3 py-2 text-sm font-medium">Invoices</a>
<div class="relative group">
<button class="{{if eq .ActivePage "ledger"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} rounded-md px-3 py-2 text-sm font-medium inline-flex items-center">
<div class="relative">
<button type="button" onclick="toggleDropdown(event, 'ledger-dropdown')" class="{{if eq .ActivePage "ledger"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} rounded-md px-3 py-2 text-sm font-medium inline-flex items-center">
General Ledger
<svg class="ml-1 h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
</button>
<div class="absolute left-0 z-10 mt-1 w-48 origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 hidden group-hover:block">
<div id="ledger-dropdown" class="absolute left-0 z-10 mt-1 w-48 origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 hidden">
<div class="py-1">
<a href="/ledger/accounts" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" hx-boost="true">Chart of Accounts</a>
<a href="/ledger/journal" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" hx-boost="true">Journal Entries</a>
@ -43,12 +43,52 @@
</div>
</div>
</div>
<div class="flex items-center space-x-4">
<div class="hidden md:flex items-center space-x-4">
<span class="text-indigo-200 text-sm">{{.Username}}</span>
<form method="POST" action="/logout" hx-post="/logout">
<button type="submit" class="text-indigo-200 hover:text-white text-sm font-medium">Logout</button>
</form>
</div>
<div class="-mr-2 flex md:hidden">
<button type="button" onclick="toggleMobileMenu()" class="inline-flex items-center justify-center rounded-md bg-indigo-600 p-2 text-indigo-200 hover:bg-indigo-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</div>
</div>
<div class="hidden md:hidden" id="mobile-menu">
<div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
<a href="/" class="{{if eq .ActivePage "dashboard"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} block rounded-md px-3 py-2 text-base font-medium">Dashboard</a>
<a href="/customers" class="{{if eq .ActivePage "customers"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} block rounded-md px-3 py-2 text-base font-medium">Customers</a>
<a href="/orders" class="{{if eq .ActivePage "orders"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} block rounded-md px-3 py-2 text-base font-medium">Orders</a>
<a href="/invoices" class="{{if eq .ActivePage "invoices"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} block rounded-md px-3 py-2 text-base font-medium">Invoices</a>
<div>
<button type="button" onclick="toggleDropdown(event, 'ledger-mobile-dropdown')" class="{{if eq .ActivePage "ledger"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} w-full text-left block rounded-md px-3 py-2 text-base font-medium flex justify-between items-center">
General Ledger
<svg class="ml-1 h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
</button>
<div id="ledger-mobile-dropdown" class="hidden pl-4 space-y-1">
<a href="/ledger/accounts" class="text-indigo-200 hover:bg-indigo-500 hover:text-white block rounded-md px-3 py-2 text-sm font-medium">Chart of Accounts</a>
<a href="/ledger/journal" class="text-indigo-200 hover:bg-indigo-500 hover:text-white block rounded-md px-3 py-2 text-sm font-medium">Journal Entries</a>
<a href="/ledger/trial-balance" class="text-indigo-200 hover:bg-indigo-500 hover:text-white block rounded-md px-3 py-2 text-sm font-medium">Trial Balance</a>
</div>
</div>
</div>
<div class="border-t border-indigo-700 pb-3 pt-4">
<div class="flex items-center px-5">
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">{{.Username}}</div>
</div>
</div>
<div class="mt-3 space-y-1 px-2">
<form method="POST" action="/logout" hx-post="/logout">
<button type="submit" class="block w-full text-left rounded-md px-3 py-2 text-base font-medium text-indigo-200 hover:bg-indigo-500 hover:text-white">Logout</button>
</form>
</div>
</div>
</div>
</nav>
@ -60,6 +100,25 @@
</div>
</main>
</div>
<script>
function toggleDropdown(event, id) {
event.stopPropagation();
const el = document.getElementById(id);
if (el) el.classList.toggle('hidden');
}
function toggleMobileMenu() {
const el = document.getElementById('mobile-menu');
if (el) el.classList.toggle('hidden');
}
document.addEventListener('click', function(event) {
const dropdown = document.getElementById('ledger-dropdown');
if (dropdown && !dropdown.classList.contains('hidden') && !event.target.closest('button[onclick*="ledger-dropdown"]') && !dropdown.contains(event.target)) {
dropdown.classList.add('hidden');
}
});
</script>
</body>
</html>
{{end}}