persianturtle

.App {
  min-height: 100vh;

  &:after {
    content: '';
    transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms;
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(0, 0, 0, 0.33);
    transform: translateX(-100%);

persianturtle

.App:after {
  content: '';
  transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms;
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0, 0, 0, 0.33);
  transform: translateX(-100%);
  opacity: 0;
  z-index: 1;
}

persianturtle

[@bs.val] [@bs.scope "performance"] external now : unit => float = "";

...

| TouchStart(clientX) =>
  if (state.nav.isOpen) {
    state.nav.isSwiping := true;
  };
  ReasonReact.Update({
    ...state,

persianturtle

[@bs.val] [@bs.scope "performance"] external now : unit => float = "";

persianturtle

let x = List.hd(List.rev(self.state.nav.position));
let x' = List.hd(self.state.nav.position);

...

<nav
  className=(self.state.nav.isOpen ? "active" : "")
  onClick=(event => ReactEventRe.Mouse.stopPropagation(event))
  style=(
    self.state.nav.isSwiping^ ?

persianturtle

| TouchStart(clientX) =>
  if (state.nav.isOpen) {
    state.nav.isSwiping := true;
  };
  ReasonReact.Update({
    ...state,
    nav: {
      ...state.nav,
      position: [clientX]
    }

persianturtle

let component = ReasonReact.statelessComponent("Page1");

let make = _children => {
  ...component,
  render: _self =>
    <div className="Page1">
      <h1> (ReasonReact.stringToElement("Page1")) </h1>
    </div>
};

persianturtle

[@bs.val] [@bs.scope "document"] external documentElement : Dom.element = "";

...

reducer: (action, state) =>
  switch action {
  | Navigate(_routeWithTitle) => ReasonReact.NoUpdate
  | ToggleMenu(isOpen) =>
    ReasonReact.UpdateWithSideEffects(
      {

persianturtle

reducer: (action, state) =>
    switch action {
    | Navigate(_routeWithTitle) => ReasonReact.NoUpdate
    | ToggleMenu(isOpen) =>
      ReasonReact.UpdateWithSideEffects(
        {
          ...state,
          nav: {
            isOpen: isOpen
          }

persianturtle

render: self => {
  let (route, title) = self.state.routeWithTitle;
  <div
    className=("App" ++ (self.state.nav.isOpen ? " overlay" : ""))
    onClick=(_event => self.send(ToggleMenu(false)))>
    <header>
      <a
        onClick=(
          event => {
            ReactEventRe.Mouse.stopPropagation(event);