Tim Wundenberg
36cf584da5
Some checks failed
Build Docker Image / Build-Docker-Image (push) Has been cancelled
96 lines
3.2 KiB
Plaintext
96 lines
3.2 KiB
Plaintext
package template
|
|
|
|
import "spend-sparrow/internal/template/svg"
|
|
|
|
func layoutLinkClass(isActive bool) string {
|
|
common := "text-2xl p-2 text-gray-900 decoration-yellow-400 decoration-[0.25rem] hover:bg-gray-200 rounded-lg"
|
|
if isActive {
|
|
return common + " " + "underline"
|
|
}
|
|
|
|
return common + " " + "hover:underline"
|
|
}
|
|
|
|
templ Layout(slot templ.Component, user templ.Component, loggedIn bool, path string) {
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>SpendSparrow</title>
|
|
<link rel="icon" href="/static/favicon.svg"/>
|
|
<link rel="stylesheet" href="/static/css/tailwind.css"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
<meta
|
|
name="htmx-config"
|
|
content='{
|
|
"includeIndicatorStyles": false,
|
|
"selfRequestsOnly": true,
|
|
"allowScriptTags": false
|
|
}'
|
|
/>
|
|
<script src="/static/js/htmx.min.js"></script>
|
|
<script src="/static/js/toast.js"></script>
|
|
<script src="/static/js/layout.js"></script>
|
|
<script src="/static/js/transaction.js"></script>
|
|
<script src="/static/js/time.js"></script>
|
|
<script src="/static/js/echarts.min.js"></script>
|
|
<script src="/static/js/dashboard.js" defer></script>
|
|
</head>
|
|
<body hx-headers='{"Csrf-Token": "CSRF_TOKEN"}'>
|
|
<div class="flex flex-col min-h-screen">
|
|
<header class="sticky top-0 z-50 bg-white flex items-center gap-6 p-4 border-b-1 border-gray-200">
|
|
<button id="menuButton" class="w-10 h-10 block xl:hidden">
|
|
@svg.Menu()
|
|
</button>
|
|
<a href="/" class="flex gap-2 -mt-2">
|
|
<img width="150" src="/static/logo.svg" alt="SpendSparrow logo"/>
|
|
</a>
|
|
<div class="ml-auto">
|
|
@user
|
|
</div>
|
|
</header>
|
|
// Content
|
|
<div class="flex flex-1">
|
|
if loggedIn {
|
|
<aside class="shrink-0 h-[calc(100vh-4rem)] xl:block hidden sticky top-18 border-r-1 border-gray-200 overflow-y-auto p-4">
|
|
@navigation(path)
|
|
</aside>
|
|
}
|
|
<main class="flex-1 p-6">
|
|
if slot != nil {
|
|
@slot
|
|
}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<dialog id="menu" class="max-h-none w-64 h-screen">
|
|
<header class="sticky top-0 z-50 bg-white flex items-center justify-between p-4 border-b-1 border-gray-200">
|
|
<a href="/" class="flex gap-2 -mt-2">
|
|
<img width="150" src="/static/logo.svg" alt="SpendSparrow logo"/>
|
|
</a>
|
|
<button id="menuButtonClose" class="h-6 w-6">
|
|
@svg.Cancel()
|
|
</button>
|
|
</header>
|
|
@navigation(path)
|
|
</dialog>
|
|
<div id="toasts" class="fixed bottom-4 right-4 ml-4 max-w-96 flex flex-col gap-2 z-50">
|
|
<div
|
|
id="toast"
|
|
class="transition-all duration-300
|
|
opacity-0 px-4 py-2 text-lg hidden text-bold rounded bg-amber-900 text-white"
|
|
></div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
}
|
|
|
|
templ navigation(path string) {
|
|
<nav class="w-64 text-nowrap flex gap-2 flex-col text-lg mt-5 px-5 pt-2">
|
|
<a class={ layoutLinkClass(path == "/dashboard") } href="/dashboard">Dashboard</a>
|
|
<a class={ layoutLinkClass(path == "/transaction") } href="/transaction">Transaction</a>
|
|
<a class={ layoutLinkClass(path == "/treasurechest") } href="/treasurechest">Treasure Chest</a>
|
|
<a class={ layoutLinkClass(path == "/account") } href="/account">Account</a>
|
|
</nav>
|
|
}
|