Navigation Item

SketchSystems.spec

Navigation Item
  Default
    click -> Focused & Selected
  Selected
    click -> Focused & Selected
    click away -> Default
  Focused
    click -> Current & Selected
    click away -> Default
  Current
    click -> Current & Selected & Focused
    click away -> Current
  Focused & Selected
    click -> Current & Selected & Focused
    click away -> Selected
  Current & Selected & Focused
    click away -> Current
  Current & Selected
    click -> Current & Selected & Focused
    click away -> Current

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}