ハンバーガーメニューをボタンクリック以外でも閉じたい

Question

ハンバーガーボタンクリック以外でもメニューが閉じる動きにしたい

cssとjQueryでハンバーガーメニューを作っています。
ボタンの動き、メニューの表示までは上手くいったのですが、ボタン以外でメニューを閉じる事ができません。メニュー項目のクリックまたはボタン以外の場所をクリックした時にメニューが隠れるようにしたいのですが、お分かりになる方がいましたらご教示下さい。

発生している問題・エラーメッセージ

メニューがボタンクリック以外で閉じない

該当のソースコード

  <header class="page-header">
    <nav id="g-nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#link01">Portfolio</a></li>
        <li><a href="#link02">About</a></li>
        <li><a href="#link03">Contact</a></li>
      </ul>
    </nav>
    <div id="hamburger">
      <span class="inner_line" id="line1"></span>
      <span class="inner_line" id="line2"></span>
      <span class="inner_line" id="line3"></span>
    </div><!-- /.hamburger -->
  </header><!-- /.page-header -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
//humberger-menuの設定
function hamburger() {
  document.getElementById('line1').classList.toggle('line_1');
  document.getElementById('line2').classList.toggle('line_2');
  document.getElementById('line3').classList.toggle('line_3');
  document.getElementById('g-nav').classList.toggle('in');
}
document.getElementById('hamburger').addEventListener('click' , function () {
  hamburger(); 
} );
  </script>

  #g-nav{
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100vh;
  background: rgba(255, 47, 158, 0.7);
  position: fixed;
  transition: .7s;
}
#g-nav ul{
  padding-top: 80px;
}
#g-nav li:nth-of-type(1){
  margin-top: 70px;
}
#g-nav ul li{
  font-size: 40px;
  text-align: center;
  margin-bottom: 40px; 
}
#g-nav a{
  display: block;
  text-decoration: none;
  color: var(--txt02-color);
  margin: 0 15px;
  padding: 10px;
  transition: .5s;
}
#hamburger {
  display: block;
  position: absolute;
  top: 20px;
  left: 30px;
  width: 50px;
  height: 44px;
  cursor: pointer;
  transition: 1s;
  position: fixed;
}
.inner_line {
  display: block;
  position: absolute;
  left: 0;
  width: 55px;
  height: 3px;
  background-color: var(--txt01-color);
  transition: 1s;
  border-radius: 4px;
}
#line1 {
  top: 0;
}
#line2 {
  top: 20px;
}
#line3 {
  bottom: 0px;
}

.in{
  transform: translateX(100%);
}
.line_1,.line_2,.line_3{
  background: #000000;
}
.line_1 {
  transform: translateY(20px) rotate(-45deg);
  top: 0;
}
.line_2 {
  opacity: 0;
}
.line_3 {
  transform: translateY(-20px) rotate(45deg);
  bottom: 0;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

VS-code

Answer 1

現状の Script の最後に下記のコードを追加すればいいでしょう。

document.getElementById('g-nav').addEventListener('click' , function () {
  hamburger(); 
} );

jQuery を読み込んでますが、提示されているコードでは使用していないので削除してもいいのでは。
他で使っているなら別ですが。

Comments

[momo.a]

hatena19様
お教え頂いたコードの追加で無事解決致しました！
ありがとうございます。ハンバーガーはjavascですね（汗　失礼しました。
jQueryはMixitupの為読み込んでおります、こちらもご指摘ありがとうございました。