Open rafaberaldo opened 3 years ago
I think you do have a valid point. However, isn't this solvable using the built-in toggleSidebar()
method? Or do you not want to use halfmoon.js
in your Vue project? The library definitely has some weirdness when used with React/Vue/Angular etc, so I will look more into this. Thank you for the detailed issue.
No I'm not using the built-in js, forgot to mention that.
I will look more into this. I really do want the framework to me more usable with Vue/React/Angular/Svelte/whatever. In that regard, it needs a little more work and documentation. Till then, copying the toggleSidebar()
function from halfmoon.js
and using that in your Vue project would probably be the best idea (in my opinion).
I was just testing and ran into this same issue, I think. I'm not doing anything fancy, just trying to set the initial state of when loaded. I expected that if I set this value to something other than "hidden" it would show the sidebar -- nothing worked.
data-sidebar-hidden="hidden" << sidebar initially hidden data-sidebar-hidden="shown" << sidebar initially hidden data-sidebar-hidden="false" << sidebar initially hidden data-sidebar-hidden="" << sidebar initially hidden
Problem
I'm trying to toggle sidebar with Vuejs:
It doens't work because on CSS you're not validating its value, only if the attribute exists (https://github.com/halfmoonui/halfmoon/blob/master/css/halfmoon-variables.css#L3228)
Proposed solution
I think it's better to just use normal classes for this, isn't it? Or check the value of the attribute (e.g. hidden/visible or true/false).
Obviously there's ways to workaround, but it's not intuitive. This is how you disable attributes/props on Vuejs in general.
Appreciate the work you put on Halfmoon, loving it.