Compare commits

..

2 Commits

Author SHA1 Message Date
c38be00f73 Reintroduce burger nav 2025-04-21 21:24:52 +02:00
ccbcb94449 make user_select buttons dark 2025-04-21 21:08:39 +02:00
2 changed files with 70 additions and 53 deletions

View File

@ -6,14 +6,21 @@
<a class="navbar-item primary is-hidden" id="nav_username" href="/"> <a class="navbar-item primary is-hidden" id="nav_username" href="/">
<strong>Hey, <span id="nav_usernameContent"></span></strong> <strong>Hey, <span id="nav_usernameContent"></span></strong>
</a> </a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div> </div>
<div id="navbarBasicExample" class="navbar-menu is-active"> <div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-end"> <div class="navbar-end">
<div class="navbar-item" id="dynamic-navbar-buttons"> <div class="navbar-item" id="dynamic-navbar-buttons">
<!-- Buttons will be dynamically injected here --> <!-- Buttons will be dynamically injected here -->
</div> </div>
</div> </div>
</div>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const navbarButtons = document.getElementById('dynamic-navbar-buttons'); const navbarButtons = document.getElementById('dynamic-navbar-buttons');
@ -63,7 +70,17 @@
} }
navbarButtons.appendChild(btn); navbarButtons.appendChild(btn);
}); });
// Burger menu toggle
const burger = document.querySelector('.navbar-burger');
const menu = document.querySelector('.navbar-menu');
if (burger && menu) {
burger.addEventListener('click', () => {
burger.classList.toggle('is-active');
menu.classList.toggle('is-active');
});
}
}); });
</script> </script>
</div>
</nav> </nav>

View File

@ -6,7 +6,7 @@
</section> </section>
<hidden> <hidden>
<!-- Base Button --> <!-- Base Button -->
<button class="button is-link is-medium m-2" id="baseStruct">Username</button> <button class="button is-dark is-medium m-2" id="baseStruct">Username</button>
</hidden> </hidden>
<div class="modal" id="pinPadModal"> <div class="modal" id="pinPadModal">
<div class="modal-background"></div> <div class="modal-background"></div>