rob/gachore
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: barebones menu button

Browse source
This commit is contained in:
Robert Perce 2025-05-22 13:24:02 -05:00
parent 803205ee7f
commit 9ec2d35082
2 changed files with 32 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/tabs.astro
View file

@ -5,7 +5,7 @@ const path = Astro.url.pathname;
const pageData = Page.db.query('select route, name from pages').values(); const pageData = Page.db.query('select route, name from pages').values();
--- ---
<nav> <nav id="sideNav" class="desktop">
{ pageData.map(([path, name]) => <Tab {...{path}}>{name}</Tab>) } { pageData.map(([path, name]) => <Tab {...{path}}>{name}</Tab>) }
<form class="editMode" hx-on::after-request="if(event.detail.successful) this.reset()"> <form class="editMode" hx-on::after-request="if(event.detail.successful) this.reset()">
<input name="name" placeholder="Page name" /> <input name="name" placeholder="Page name" />

31
src/layouts/Layout.astro
View file

@ -18,6 +18,7 @@ const { tabs } = Astro.props;
</head> </head>
<body> <body>
<div class="topbar"> <div class="topbar">
<button class="mobile" id="navButton">☰</button>
<Bank /> <Bank />
<a href={ tabs ? "/gacha" : "/" }>{`To ${ tabs ? "Gacha" : "Quests" }`}</a> <a href={ tabs ? "/gacha" : "/" }>{`To ${ tabs ? "Gacha" : "Quests" }`}</a>
<button id="edit_mode">Edit Mode</button> <button id="edit_mode">Edit Mode</button>
@ -69,6 +70,25 @@ const { tabs } = Astro.props;
window.addEventListener('htmx:afterRequest', () => { window.addEventListener('htmx:afterRequest', () => {
setVisibility(); setVisibility();
}); });
document.getElementById("navButton")?.addEventListener('click', (evt) => {
evt.preventDefault();
const nav = document.getElementById("sideNav");
if (!nav) {
console.warn('missing sideNav element');
return;
}
nav.classList.remove('desktop');
nav.style.display = 'flex';
nav.style.position = 'absolute';
nav.style.left = '0';
nav.style.top = '0';
nav.style.zIndex = '1';
nav.style.backgroundColor = 'white';
nav.style.height = '100%';
nav.style.borderRight = '1px solid black';
});
</script> </script>
<style> <style>
@ -179,4 +199,15 @@ input {
width: 1.5em; width: 1.5em;
} }
} }
@media screen and (max-width: 720px) {
.desktop {
display: none !important;
}
}
@media screen and (min-width: 720px) {
.mobile {
display: none !important;
}
}
</style> </style>