App.re

let render = ({ state }) => {
  let { viewport, page } = state;
  let { width, height } = viewport;
  
  let content =
    switch (page) {
    | Overview => <Welcome />
    | ShowUsers(users) => <UserTable users />
    | NewUser(userForm) => <AddUser user=userForm />
    };
  
  let body =
    if (width < 768)
      <Col> <Nav /> <PageContent content /> <HelpLinks /> </Col>
  
    else if (width < 1024)
      <Row spacing=20>
        <Nav />
        <Col width=Fill>
          <PageContent content />
          <HelpLinks />
        </Col>
      </Row>
  
    else
      <Row spacing=30> <Nav /> <PageContent content /> <HelpLinks /> </Row>;
  
  <Col>
    <AppHeader />
    { body }
  </Col>
};

Nav.re

let render = _state =>
  <Col>
    <NavLink icon=House label="Overview" />
    <NavLink icon=Grid label="All Users" />
    <NavLink icon=Person label="Add User" />
  </Col>

NavLink.re

let render = ({ icon, label }) => {
  let decoration = [
    Style.text(rgb(0, 120, 240)),
    Style.bg(Solid(rgb(240, 240, 250))),
    Style.fontWeight(Bold),
    Style.letterSpacing(Tight)
  ];
  
  <Row decoration padding=20 spacing=10 onClick={...}>
    <Icon size=24 icon />
    <Text width=Fill text=label>
  </Row>
};