ドロワーメニューをjavascriptで実装したい

Question

タイトル通りですが、ドロワーメニューをjavascriptで実装したいです。
そこで、以下コードを実装しました。
ひとつだけうまくいかないのが、
画面をクリックした際にドロワーメニューを閉じるようにするのがうまくいかないです。
どなたかご教授頂けないでしょうか。
宜しくお願いいたします。

	<style>
		body {
			margin: 0;
			padding: 0;
		}
		header {
			height: 70px;
			background: #000;
			position: fixed;
			width: 100%;
		}
		ul#navigation {
			list-style-type: none;
			padding: 0;
			margin: 0;
			position: fixed;
			width: 200px;
			background: red;
			height: 100%;
			padding-top: 100px;
			right: -200px;
			transition: all 0.3s ease;
		}
		ul#navigation.active {
			right: 0;
			transition: all 0.3s ease;

		}
		.menu {
			position: fixed;
			width: 70px;
			height: 70px;
			background: gray;
			right: 0;
			z-index: -1;
		}
		.menu span {
			width: 35px;
			height: 1px;
			background: blue;
			display: block;
			text-align: center;
			margin: 0 auto;
			margin-top: 17px;
		}
	</style>
	<header id="hdr">
		<ul id="navigation">
			<div id="batsu">×</div>
			<li><a href="">リスト</a></li>
			<li><a href="">リスト</a></li>
			<li><a href="">リスト</a></li>
		</ul>
		<div id="humber" class="menu">
			<span></span>
			<span></span>
			<span></span>
		</div>
	</header>

	<script>

		var hmbgr = document.getElementById("humber");
		var navi = document.getElementById("navigation");
		hmbgr.addEventListener("click", function () {
			navi.classList.toggle("active");
		});
		var batsu = document.getElementById("batsu");
		batsu.addEventListener("click", function () {
			navi.classList.remove("active");
		});

                //試してみたこと
		var bodys = document.body;
		bodys.addEventListener("click", function () {
			navi.classList.remove("active");
		});
		
	</script>

Answer 1

naviのクラスにactiveがある時のみ処理を実行させれば良いので、原型のコード通りにやると以下のようになると思います。

bodys.addEventListener('click', () => {
  if(navi.classList.contains('active')) {
    navi.classList.toggle('active');
  }
})

ただ、bodyでこれをやるとイベントバブリングを考慮しなければならず、他の実装が面倒くさくなります。
そのためナビゲーションドロワーの下に画面全体を覆うオーバーレイを重ねて、そこをクリックした時にイベントが発火するようにする等、方法を変えたほうがよいかと思います。