x/spend-sparrow
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: add menu for mobile
Some checks failed
Build Docker Image / Build-Docker-Image (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Tim Wundenberg
2025-08-01 22:21:37 +02:00
parent e53e2360d6
commit 3d47f9569c
8 changed files with 98 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
input.css
View File

@@ -3,32 +3,34 @@
@source './static/**/*.js'; @source './static/**/*.js';
@source './template/**/*.templ'; @source './template/**/*.templ';
body {
@apply font-garamond text-gray-700;
}
input:focus {
@apply outline-none ring-0;
}
@font-face { @font-face {
font-family: "EB Garamond"; font-family: "EB Garamond";
src: url("/static/font/EBGaramond-VariableFont_wght.woff2") format("woff2"); src: url("/static/font/EBGaramond-VariableFont_wght.woff2") format("woff2");
} }
@theme { body {
--font-garamond: "EB Garamond", serif; font-family: "EB Garamond", serif;
@apply text-gray-700;
}
input:focus {
@apply outline-none ring-0;
}
button {
@apply cursor-pointer;
} }
/* Button */ /* Button */
.button { .button {
transition: all 150ms linear; transition: all 150ms linear;
@apply cursor-pointer border-2 rounded-lg border-transparent; @apply cursor-pointer border-2 rounded-lg border-transparent;
} }
.button-primary:hover, .button-primary:hover,
.button-normal:hover { .button-normal:hover {
transform: translate(-0.25rem, -0.25rem); transform: translate(-0.25rem, -0.25rem);
box-shadow: 3px 3px 3px var(--color-gray-200); box-shadow: 3px 3px 3px var(--color-gray-200);
} }
.button-primary { .button-primary {
@@ -56,3 +58,5 @@ input:focus {
box-shadow: 0 0 0 2px var(--color-gray-200); box-shadow: 0 0 0 2px var(--color-gray-200);
} }

4
internal/template/account/account.templ
View File

@@ -66,7 +66,9 @@ templ EditAccount(account *types.Account) {
hx-swap="outerHTML" hx-swap="outerHTML"
class="button button-neglect px-1 flex items-center gap-2" class="button button-neglect px-1 flex items-center gap-2"
> >
@svg.Cancel() <span class="h-4 w-4">
@svg.Cancel()
</span>
<span> <span>
Cancel Cancel
</span> </span>

73
internal/template/layout.templ
View File

@@ -1,5 +1,7 @@
package template package template
import "spend-sparrow/internal/template/svg"
func layoutLinkClass(isActive bool) string { 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" common := "text-2xl p-2 text-gray-900 decoration-yellow-400 decoration-[0.25rem] hover:bg-gray-200 rounded-lg"
if isActive { if isActive {
@@ -28,37 +30,49 @@ templ Layout(slot templ.Component, user templ.Component, loggedIn bool, path str
/> />
<script src="/static/js/htmx.min.js"></script> <script src="/static/js/htmx.min.js"></script>
<script src="/static/js/toast.js"></script> <script src="/static/js/toast.js"></script>
<script src="/static/js/layout.js"></script>
<script src="/static/js/time.js"></script> <script src="/static/js/time.js"></script>
<script src="/static/js/echarts.min.js"></script> <script src="/static/js/echarts.min.js"></script>
<script src="/static/js/dashboard.js" defer></script> <script src="/static/js/dashboard.js" defer></script>
</head> </head>
<body class="flex flex-col min-h-screen" hx-headers='{"Csrf-Token": "CSRF_TOKEN"}'> <body hx-headers='{"Csrf-Token": "CSRF_TOKEN"}'>
<header class="sticky top-0 z-50 bg-white flex items-center gap-2 p-4 border-b-1 border-gray-200"> <div class="flex flex-col min-h-screen">
<a href="/" class="flex gap-2 -mt-2"> <header class="sticky top-0 z-50 bg-white flex items-center gap-6 p-4 border-b-1 border-gray-200">
<img width="150" src="/static/logo.svg" alt="SpendSparrow logo"/> <button id="menuButton" class="w-10 h-10 block xl:hidden">
</a> @svg.Menu()
<div class="ml-auto"> </button>
@user <a href="/" class="flex gap-2 -mt-2">
</div> <img width="150" src="/static/logo.svg" alt="SpendSparrow logo"/>
</header> </a>
// Content <div class="ml-auto">
<div class="flex flex-1"> @user
if loggedIn { </div>
<aside class="w-64 shrink-0 text-nowrap h-[calc(100vh-4rem)] xl:block hidden sticky top-18 border-r-1 border-gray-200 overflow-y-auto p-4"> </header>
<nav class="flex gap-2 flex-col text-lg mt-5 px-5 pt-2"> // Content
<a class={ layoutLinkClass(path == "/dashboard") } href="/dashboard">Dashboard</a> <div class="flex flex-1">
<a class={ layoutLinkClass(path == "/transaction") } href="/transaction">Transaction</a> if loggedIn {
<a class={ layoutLinkClass(path == "/treasurechest") } href="/treasurechest">Treasure Chest</a> <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">
<a class={ layoutLinkClass(path == "/account") } href="/account">Account</a> @navigation(path)
</nav> </aside>
</aside>
}
<main class="flex-1 p-6">
if slot != nil {
@slot
} }
</main> <main class="flex-1 p-6">
if slot != nil {
@slot
}
</main>
</div>
</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="toasts" class="fixed bottom-4 right-4 ml-4 max-w-96 flex flex-col gap-2 z-50">
<div <div
id="toast" id="toast"
@@ -69,3 +83,12 @@ templ Layout(slot templ.Component, user templ.Component, loggedIn bool, path str
</body> </body>
</html> </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>
}

12
internal/template/svg/default.templ
View File

@@ -31,7 +31,7 @@ templ Save() {
} }
templ Cancel() { templ Cancel() {
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" class="h-4 w-4 text-gray-500"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" class="text-gray-500">
<path fill="currentColor" d="m654 501l346 346l-154 154l-346-346l-346 346L0 847l346-346L0 155L154 1l346 346L846 1l154 154z"></path> <path fill="currentColor" d="m654 501l346 346l-154 154l-346-346l-346 346L0 847l346-346L0 155L154 1l346 346L846 1l154 154z"></path>
</svg> </svg>
} }
@@ -47,3 +47,13 @@ templ Info() {
<path fill="currentColor" d="M0 0h48v48H0z" mask="url(#ipSInfo0)"></path> <path fill="currentColor" d="M0 0h48v48H0z" mask="url(#ipSInfo0)"></path>
</svg> </svg>
} }
templ Menu() {
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="text-gray-500">
<g data-name="1" id="_1">
<path d="M441.13,166.52h-372a15,15,0,1,1,0-30h372a15,15,0,0,1,0,30Z"></path>
<path d="M441.13,279.72h-372a15,15,0,1,1,0-30h372a15,15,0,0,1,0,30Z"></path>
<path d="M441.13,392.92h-372a15,15,0,1,1,0-30h372a15,15,0,0,1,0,30Z"></path>
</g>
</svg>
}

4
internal/template/transaction/transaction.templ
View File

@@ -188,7 +188,9 @@ templ EditTransaction(transaction *types.Transaction, accounts []*types.Account,
hx-swap="outerHTML" hx-swap="outerHTML"
class="button button-neglect px-1 flex items-center gap-2" class="button button-neglect px-1 flex items-center gap-2"
> >
@svg.Cancel() <span class="h-4 w-4">
@svg.Cancel()
</span>
<span> <span>
Cancel Cancel
</span> </span>

4
internal/template/transaction_recurring/transaction_recurring.templ
View File

@@ -193,7 +193,9 @@ templ EditTransactionRecurring(transactionRecurring *types.TransactionRecurring,
hx-swap="outerHTML" hx-swap="outerHTML"
class="button button-neglect px-1 flex items-center gap-2" class="button button-neglect px-1 flex items-center gap-2"
> >
@svg.Cancel() <span class="h-4 w-4">
@svg.Cancel()
</span>
<span> <span>
Cancel Cancel
</span> </span>

4
internal/template/treasurechest/treasure_chest.templ
View File

@@ -88,7 +88,9 @@ templ EditTreasureChest(treasureChest *types.TreasureChest, parents []*types.Tre
hx-swap="outerHTML" hx-swap="outerHTML"
class="button button-neglect px-1 flex items-center gap-2" class="button button-neglect px-1 flex items-center gap-2"
> >
@svg.Cancel() <span class="h-4 w-4">
@svg.Cancel()
</span>
<span> <span>
Cancel Cancel
</span> </span>

11
static/js/layout.js Normal file
View File

@@ -0,0 +1,11 @@
document.addEventListener("DOMContentLoaded", () => {
menuButton.addEventListener("click", function (e) {
menu.showModal();
});
menuButtonClose.addEventListener("click", function (e) {
menu.close();
});
})