virtual-sidebar

Nested sidebar for virtual-dom. Takes an array and turns it into nested HTML.

Features

• sensible: creates text nodes by default which are ideal to get started
• flexible: easily extensible to create more complicated elements
• small: minimal code size providing minimal overhead
• reliable: transforms data into nodes without any internal state

Usage

const vsidebar = require('virtual-sidebar')
const vdom = require('virtual-dom')
const hyperx = require('hyperx')
 
const hx = hyperx(vdom.h)
 
const data = [
  'main-section',
  [ 'sub-section-1', [ 'item-1', 'item-2' ] ],
  'footer-section'
]
 
const tree = hx`
  <section>
    ${vsidebar(vdom.h, data, { className: 'sidebar' })}
  </section>
`
console.log(vdom.create(tree).toString())

yields

<section>
  <aside class="sidebar">
    <ul>
      <li><a href="/main-section">
        main-section
      </a></li>
      <li>
        <ul>
          <li><a href="/sub-section-1">
            sub-section-1
          </a></li>
          <li><a href="/sub-section-1/item-1">
            item-1
          </a></li>
          <li><a href="/sub-section-1/item-2">
            item-2
          </a></li>
        </ul>
      </li>
      <li><a href="/footer-section">
        footer-section
      </a></li>
    </ul>
  </aside>
</section>

API

virtualSidebar(h, opts?, data)

Create a new sidebar based on an array of data.

• opts.map(h, name): use a map function that takes raw node data and returns an element. Useful to create more intricate nodes

Installation

$ npm install virtual-sidebar

License

MIT