-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Make hamburger menu on mobile functional, update style overrides (#17)
* Add Bulma javascript snippet to show/hide hamburger menu This is just copied from the docs, Bulma doesn't come with Javascript built in so we have to add it ourselves There are ways to get clever with hidden checkboxes and not require Javascript here, but this is a very Javascript-oriented project, so that would be silly * Make layout consistent with docs * Add labels in mobile menu I duplicated the icons because hiding just the text in desktop mode results in weird margins on the icon buttons, sigh. This is just kinda part of the tradeoff of using something like Bulma, and that's fine * Fix missing active/focus overrides This resulted in buttons sometimes being white which was invisible Also, this is a lot, imo because we're fighting with an opinionated styling system outside of its built-in customization channels. A cleaner way to do this would be to use the customization variables they give us, likely by upgrading to 1.0 so we don't have to deal with generating the files ourselves, but that's a whole other project
- Loading branch information
1 parent
a675dea
commit fd24b06
Showing
3 changed files
with
70 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| // From https://bulma.io/documentation/components/navbar/#navbarJsExample | ||
| document.addEventListener('DOMContentLoaded', () => { | ||
|
|
||
| // Get all "navbar-burger" elements | ||
| const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); | ||
|
|
||
| // Add a click event on each of them | ||
| $navbarBurgers.forEach( el => { | ||
| el.addEventListener('click', () => { | ||
|
|
||
| // Get the target from the "data-target" attribute | ||
| const target = el.dataset.target; | ||
| const $target = document.getElementById(target); | ||
|
|
||
| // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" | ||
| el.classList.toggle('is-active'); | ||
| $target.classList.toggle('is-active'); | ||
|
|
||
| }); | ||
| }); | ||
|
|
||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters