Skip to content

Instantly share code, notes, and snippets.

@persianturtle

persianturtle/app.re

Created Feb 13, 2018
Embed
What would you like to do?
Just the render field
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);
self.send(ToggleMenu(! self.state.nav.isOpen));
}
)>
<svg viewBox="0 0 24 24">
<path
d="M21 11h-18c-0.6 0-1 0.4-1 1s0.4 1 1 1h18c0.6 0 1-0.4 1-1s-0.4-1-1-1z"
/>
<path
d="M3 7h18c0.6 0 1-0.4 1-1s-0.4-1-1-1h-18c-0.6 0-1 0.4-1 1s0.4 1 1 1z"
/>
<path
d="M21 17h-18c-0.6 0-1 0.4-1 1s0.4 1 1 1h18c0.6 0 1-0.4 1-1s-0.4-1-1-1z"
/>
</svg>
</a>
<h1> (ReasonReact.stringToElement(title)) </h1>
</header>
<nav
className=(self.state.nav.isOpen ? "active" : "")
onClick=(event => ReactEventRe.Mouse.stopPropagation(event))>
<header>
<a onClick=(_event => self.send(ToggleMenu(false)))>
<svg viewBox="0 0 32 32">
<path
d="M12.586 27.414l-10-10c-0.781-0.781-0.781-2.047 0-2.828l10-10c0.781-0.781 2.047-0.781 2.828 0s0.781 2.047 0 2.828l-6.586 6.586h19.172c1.105 0 2 0.895 2 2s-0.895 2-2 2h-19.172l6.586 6.586c0.39 0.39 0.586 0.902 0.586 1.414s-0.195 1.024-0.586 1.414c-0.781 0.781-2.047 0.781-2.828 0z"
/>
</svg>
(ReasonReact.stringToElement(title))
</a>
<svg viewBox="0 0 32 32">
<path
d="M8 10c0-4.418 3.582-8 8-8s8 3.582 8 8c0 4.418-3.582 8-8 8s-8-3.582-8-8zM24 20h-16c-4.418 0-8 3.582-8 8v2h32v-2c0-4.418-3.582-8-8-8z"
/>
</svg>
<p> (ReasonReact.stringToElement(self.state.user.name)) </p>
<p> (ReasonReact.stringToElement(self.state.user.email)) </p>
</header>
<label> (ReasonReact.stringToElement("home")) </label>
<ul> <li> <Link href="/" label="Home" /> </li> </ul>
<label> (ReasonReact.stringToElement("pages")) </label>
<ul>
<li> <Link href="/page1" label="Page1" /> </li>
<li> <Link href="/page2" label="Page2" /> </li>
<li> <Link href="/page3" label="Page3" /> </li>
</ul>
</nav>
<main>
(
switch route {
| Home => <Home />
| Page1 => <Page1 />
| Page2 => <Page2 />
| Page3 => <Page3 />
}
)
</main>
</div>;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment