Validate value from data-sidebar-hidden

[rafaberaldo]

Problem

I'm trying to toggle sidebar with Vuejs:

<template>
  <div
      class="page-wrapper with-navbar with-sidebar"
      data-sidebar-type="full-height overlayed-sm-and-down"
      :data-sidebar-hidden="isHidden">
      <div class="sidebar-overlay"></div>
      <aside class="sidebar"></div>
  </div>
</template>

<script>
export default {
  data() { return { isHidden: false } }
}
</script>

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.

[halfmoonui]

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.

[rafaberaldo]

No I'm not using the built-in js, forgot to mention that.

[halfmoonui]

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).

[jimkring]

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