App

SketchSystems.spec

App
  Click Logo -> menuIndex null
  Menu
    clickMenuIndex 0 -> menuIndex 0
    clickMenuIndex 1 -> menuIndex 1
    clickMenuIndex 2 -> menuIndex 2
    Inactive Menu
      menuIndex null*
    Active Menu&
      Menu Options
        menuIndex 0
        menuIndex 1
        menuIndex 2

      Sections
        Active Sections
          onEscape -> levelIndex null
          levelIndex 0
            clickLevel 0 -> levelIndex 1
          levelIndex 1
            clickLevel 0 -> levelIndex 1
            clickLevel 1 -> levelIndex 2
          levelIndex 2
            clickLevel 0 -> levelIndex 1
            clickLevel 1 -> levelIndex 2
            clickLevel 2 -> levelIndex 3
          levelIndex 3
            clickLevel 0 -> levelIndex 1
            clickLevel 1 -> levelIndex 2
            clickLevel 2 -> levelIndex 3
            clickLevel 3 -> levelIndex null

        Inactive Sections 
          levelIndex null

SketchSystems_prototype.js

function menu() {
  const liStyle = {
    fontFamily: '"Roboto", sans-serif',
    height: '44px',
    background: 'blue',
    color: 'white',
    display: 'inline-flex',
    alignItems: 'center',
    padding: '0 16px',
    cursor: 'pointer',
  }

  return (
    <ul>
      <li style={ liStyle }>Groceries</li>
      <li style={ liStyle }>Favourites</li>
      <li style={ liStyle }>Account</li>
    </ul>
  )
}

function render(model){
  const states = model.active_states.map((state) => state.name)
  
  return menu()
}