import type { FunctionalComponent } from 'preact';
import { h, Fragment } from 'preact';
import { useState, useEffect } from 'preact/hooks';

const MenuToggle: FunctionalComponent = () => {
	const [sidebarShown, setSidebarShown] = useState(false);

	useEffect(() => {
		const body = document.getElementsByTagName('body')[0];
		if (sidebarShown) {
			body.classList.add('mobile-sidebar-toggle');
		} else {
			body.classList.remove('mobile-sidebar-toggle');
		}
	}, [sidebarShown]);

	return (
		<button
			type="button"
			aria-pressed={sidebarShown ? 'true' : 'false'}
			id="menu-toggle"
			onClick={() => setSidebarShown(!sidebarShown)}
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				width="1em"
				height="1em"
				fill="none"
				viewBox="0 0 24 24"
				stroke="currentColor"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M4 6h16M4 12h16M4 18h16"
				/>
			</svg>
			<span className="sr-only">Toggle sidebar</span>
		</button>
	);
};

export default MenuToggle;
'/ansg191/v2/refs/?id=487852f07eb191ef56967b7b7d7f01537a55eabd'>refs</a><a class='active' href='/ansg191/v2/log/integration/nunuxkeeper?follow=1'>log</a><a href='/ansg191/v2/tree/integration/nunuxkeeper?id=487852f07eb191ef56967b7b7d7f01537a55eabd'>tree</a><a href='/ansg191/v2/commit/integration/nunuxkeeper?id=487852f07eb191ef56967b7b7d7f01537a55eabd&amp;follow=1'>commit</a><a href='/ansg191/v2/diff/integration/nunuxkeeper?id=487852f07eb191ef56967b7b7d7f01537a55eabd&amp;follow=1'>diff</a></td><td class='form'><form class='right' method='get' action='/ansg191/v2/log/integration/nunuxkeeper'>
<input type='hidden' name='id' value='487852f07eb191ef56967b7b7d7f01537a55eabd'/><select name='qt'>
<option value='grep'>log msg</option>
<option value='author'>author</option>
<option value='committer'>committer</option>
<option value='range'>range</option>
</select>
<input class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/ansg191/v2/log/?id=487852f07eb191ef56967b7b7d7f01537a55eabd&amp;follow=1'>root</a>/<a href='/ansg191/v2/log/integration?id=487852f07eb191ef56967b7b7d7f01537a55eabd&amp;follow=1'>integration</a>/<a href='/ansg191/v2/log/integration/nunuxkeeper?id=487852f07eb191ef56967b7b7d7f01537a55eabd&amp;follow=1'>nunuxkeeper</a> (<a href='/ansg191/v2/log/integration/nunuxkeeper?id=487852f07eb191ef56967b7b7d7f01537a55eabd'>unfollow</a>)</div><div class='content'><table class='list nowrap'><tr class='nohover'><th class='left'>Age</th><th class='left'>Commit message (<a href='/ansg191/v2/log/integration/nunuxkeeper?id=487852f07eb191ef56967b7b7d7f01537a55eabd&amp;showmsg=1&amp;follow=1'>Expand</a>)</th><th class='left'>Author</th><th class='left'>Files</th><th class='left'>Lines</th></tr>
<tr><td><span title='2018-11-11 11:47:41 -0800'>2018-11-11</span></td><td><a href='/ansg191/v2/commit/ui/user_update.go?id=ca45765c46de3b00c3b22936c885b57c37186e3d&amp;follow=1'>Improve logging messages in ui package</a></td><td><img src='//www.gravatar.com/avatar/b2896c513e42a4573a23580a1278bf01?s=13&amp;d=retro' width='13' height='13' alt='Gravatar' /> Frédéric Guillot
</td><td>13</td><td><span class='deletions'>-24</span>/<span class='insertions'>+22</span></td></tr>
<tr><td><span title='2018-11-11 11:29:12 -0800'>2018-11-11</span></td><td><a href='/ansg191/v2/commit/ui/user_update.go?id=5a69a61d4841a35d7ddcb761a688db8c688314d6&amp;follow=1'>Move UI middlewares and routes to ui package</a></td><td><img src='//www.gravatar.com/avatar/b2896c513e42a4573a23580a1278bf01?s=13&amp;d=retro' width='13' height='13' alt='Gravatar' /> Frédéric Guillot
</td><td>70</td><td><span class='deletions'>-769</span>/<span class='insertions'>+739</span></td></tr>
<tr><td><span title='2018-11-11 10:22:47 -0800'>2018-11-11</span></td><td><a href='/ansg191/v2/commit/daemon/routes.go?id=0925899cee9362cf09e982487bd480e2b09041f4&amp;follow=1'>Move API middleware and routes to api package</a></td><td><img src='//www.gravatar.com/avatar/b2896c513e42a4573a23580a1278bf01?s=13&amp;d=retro' width='13' height='13' alt='Gravatar' /> Frédéric Guillot
</td><td>12</td><td><span class='deletions'>-139</span>/<span class='insertions'>+132</span></td></tr>
<tr><td><span title='2018-11-11 09:54:32 -0800'>2018-11-11</span></td><td><a href='/ansg191/v2/commit/fever/response.go?id=a9f98adb0739f78495af745d30839a8aaf2f6979&amp;follow=1'>Move Fever middleware and routes to fever package</a></td><td><img src='//www.gravatar.com/avatar/b2896c513e42a4573a23580a1278bf01?s=13&amp;d=retro' width='13' height='13' alt='Gravatar' /> Frédéric Guillot
</td><td>4</td><td><span class='deletions'>-167</span>/<span class='insertions'>+187</span></td></tr>
<tr><td><span title='2018-11-11 14:51:54 +0100'>2018-11-11</span></td><td><a href='/ansg191/v2/commit/README.md?id=25c12053a6253f4a129016f8b5ef2638395f960f&amp;follow=1'>Typo in README.md</a></td><td><img src='//www.gravatar.com/avatar/06abbb18a81b06d1bfe8fe6b610bb5ad?s=13&amp;d=retro' width='13' height='13' alt='Gravatar' /> Piotr Kubisa
</td><td>1</td><td><span class='deletions'>-1</span>/<span class='insertions'>+1</span></td></tr>
<tr><td><span title='2018-11-10 11:18:40 -0800'>2018-11-10</span></td><td><a href='/ansg191/v2/commit/README.md?id=36564ffbcdee24d043b44b556d5dda7662a255de&amp;follow=1'>Add link to HTML man page</a></td><td><img src='//www.gravatar.com/avatar/b2896c513e42a4573a23580a1278bf01?s=13&amp;d=retro' width='13' height='13' alt='Gravatar' /> Frédéric Guillot
</td><td>1</td><td><span class='deletions'>-1</span>/<span class='insertions'>+1</span></td></tr>
