Primer CSS with Mithril

by ramnathv

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.3/mithril.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/primer/2.7.1/primer.css">
<div class="container" id="main">
  <nav class="menu">
    <span class="menu-heading">Menu heading</span>
    <a class="menu-item selected" href="#">Account</a>
    <a class="menu-item" href="#">Profile</a>
    <a class="menu-item" href="#">Emails</a>
    <a class="menu-item" href="#">Notifications</a>
  </nav>
</div>

CSS

#main{
  width: 30%;
  margin-top: 20px;
  margin-left: 20px;
}

CoffeeScript

Nav = view: (ctrl, props) -> [
  m 'nav.menu',
    m 'span.menu-heading', props.heading
    props.items.map (d, i) ->
      klass = if ctrl.selected() is i 
          'menu-item selected' 
        else 
          'menu-item'
      m 'a', {class: klass}, d
      
Nav.controller = (props) ->
  selected: m.prop(props.selected)

m.mount(
  document.getElementById("main"),
  m Nav, {
    items: ["Home", "Profile", "Account"]
    selected: 0
    heading: "Panel Heading"
  }
)