Discussion about feature ideas and future plans

[balzss]

You can let me know here if you have any idea how I could make Luxbar better

[davidlr99]

Automatically close mobile menu overlay when user clicks at menu item. Fixed it with jQuery:

$('.luxbar-item').click(function(event) {
    $('#luxbar-checkbox').prop('checked', false);
}

Would be cool to see this included in further versions. 🙏🏻😊

[balzss]

I don't think this is actually needed because usually clicking on an item results in loading a new page which resets the navbar automatically. The other thing is: adding jquery as a dependency for a css only library just for this is kind of overkill. I want to keep the css only nature of the library but making plugins for it is a possible way to go. But please let me know if I'm wrong and this feature could be actually useful.

[berkandirim]

There should be an option for fixed menu to hide when scrolling down and show when scrolling up.

Edit: Sorry I've just read the comment above. If you want to keep it css only, obviously this won't be implemented :)

[balzss]

It seems like there are quite a few people requesting these features and I was thinking of different ways of implementing them. The main goal of Luxbar is to be lightweight and css only so adding a luxbar.js is not a solution but I think a plugin system would fit this library. There could be a plugins folder with .js files and a readme alongside and some way of installing these modules independently from the core library, maybe an npm script or something. What do you think about this? Would you like to write some example plugins for it?

[berkandirim]

That would be great. I'll try and write a plugin that does the above.

[berkandirim]

OK, here's my first attempt https://github.com/berkandirim/luxbar-hide Kept it jquery-free. It basically switches the luxbar class to luxbar-static when scrolling down and luxbar-fixed when scrolling up.

[balzss]

Awesome! I'll try to come up with a good way to implement it and let the users have the option to download it. Right now I'm not sure how should I do it.

[ghost]

I see in the demo that you use the full height of the viewport to animate the menu.

.luxbar-checkbox {
  display: none; }
  .luxbar-checkbox:not(:checked) ~ .luxbar-menu {
    overflow: hidden;
    height: 58px; }
  .luxbar-checkbox:checked ~ .luxbar-menu {
    transition: height 0.6s ease;
    height: 100vh;
    overflow: auto; }

Do you think you can come up with a version that animates to the height of the menu items?

When clicking to see the mobile menu there is a flash of a vertical scrollbar visible in FF & Chrome, can you see that?

I see you use an active class in the demo. Would you assign that with JS in production or hard code it to the selected link if used on a small static site?

Generally I am thinking it is great to have it this light, though I also think to be able to for example know what item is selected and act on that one would use JS again. But of course the benefit is overall less size than JS. A comparison would be interesting, since the Known Issues for flex are definitely there. For that I would use flexibility, but again JS, though wide support if needed, naturally if you target newer browsers nothing to worry.

Sure this can be done with pure CSS grid, would you be interested to have a go? I am working on something downwards compatible (with responsive height for the menu) but could also see the use for something future proof.

[Jlevett]

Hey. First off thanks for your work so far. Great library. To automatically close the mobile menu overlay and not have trouble with the hamburger menu I added the following for each link tag.
onClick = () => { document.getElementById('luxbar-checkbox').checked = false; document.getElementsByClassName('luxbar-menu')[0].scrollTop = 0; } I know this is a pure css library but it might help others.

Cheers.