【ハンバーガーメニュー】 領域外をクリックしてもメニューが閉じるようにしたい

実現したいこと

ハンバーガーメニューの領域外をクリックしてもメニューが閉じるようにしたいです。

参考サイトをいろいろ見てみたのですが、今一つ理解できず、自分のデザインにいちばん近いと思われるサイトのコードを真似てみようとしましたが、やはりうまくいきません。

【参考にしたいページ】
https://style01.net/1049/

このページのような動作をさせるために、自分のjsにどう書き加えたらよいのかアドバイスをいただければ幸いです。
よろしくお願いいたします。

該当のソースコード

HTML

1<header class="header"> 2<div class="header__inner"> 3<nav class="header-nav"> 4<div class="drawer"> 5<h1 class="header-logo"> 6<a href="index.html"> 7<img src="common/btn_logo.jpg" alt="ロゴ" title="トップページに戻る"> 8</a> 9</h1> 10<!-- /.drawer --></div> 11<div class="header-menu"> 12<ul class="main-menu"> 13 <li><a href="">Home</a></li> 14 <li><a href="">メニュー01</a></li> 15 <li><a href="">メニュー02</a></li> 16 <li><a href="">メニュー03</a></li> 17 <li><a href="">メニュー04</a></li> 18 <li><a href="">メニュー05</a></li> 19</ul> 20<!-- /.menu --></div> 21</nav> 22<button type="button" class="nav-Toggle"> 23 <span></span> 24 <span></span> 25 <span></span> 26</button> 27<!-- /.header__inner --></div> 28</header> 29 30<main class="main"> 31コンテンツ 32</main>

CSS

1.header {2 position: fixed;3 z-index: 999;4 top: 0;5 left: 0;6 width: 100%;7 min-width: 100%;8 height: 100px;9 background-color: #fff;10 border-bottom: 3px solid var(--key-color);11}12.header-nav {13 width: 100%;14 height: 100px;15 position: relative;16}17.drawer { height: 100px; }18.header-logo {19 margin-left: 20px; 20 padding-top:7px;21}22.header-logo img { width: 120px; }23 24/***----- header-menu -----***/25.header-menu {26 text-align: center;27 background-color: rgba(255,255,255,.9);28 transition: .5s ease;29 -webkit-transform: translateX(-105%);30 transform: translateX(-105%);31}32.main-menu li { font-family: var(--font-title); }33.main-menu li:first-of-type { font-family: var(--font-gothic); }34.main-menu li a {35 display: block;36 padding: 1.15em;37 border-bottom: 1px dotted #333;38 color: var(--font-color);39 text-decoration: none;40}41.main-menu li a:hover {42 background-color: var(--key-color);43 color: #fff;44}45 46 47/***----- OPEN時の動き -----***/48.header-menu.open {49 -webkit-transform: translateX(0%);50 transform: translateX(0%);51}52 53/***----- トグルボタンのスタイルを指定 -----***/54.nav-Toggle {55 display: block;56 position: absolute;57 width: 42px;58 height: 42px;59 z-index: 3;60 top: 20px;61 right: 20px;62 padding: 10px;63 background-color: transparent;64 border: none;65 appearance: none;66 -moz-appearance: none;67 -webkit-appearance: none;68 cursor: pointer;69}70.nav-Toggle span {71 display: block;72 position: absolute;73 width: 40px;74 border-bottom: solid 3px var(--key-color);75 -webkit-transition: .35s ease-in-out;76 -moz-transition: .35s ease-in-out;77 transition: .35s ease-in-out;78 border-radius: 3px;79}80.nav-Toggle span:nth-child(1) { top: 5px; }81.nav-Toggle span:nth-child(2) { top: 15px; }82.nav-Toggle span:nth-child(3) { top: 26px; }83 84/***----- .nav-Toggleがactiveの時 -----***/85.nav-Toggle.active span:nth-child(1) {86 top: 15px;87 -webkit-transform: rotate(-45deg);88 -moz-transform: rotate(-45deg);89 transform: rotate(-45deg);90}91.nav-Toggle.active span:nth-child(2),92.nav-Toggle.active span:nth-child(3) {93 top: 15px;94 -webkit-transform: rotate(45deg);95 -moz-transform: rotate(45deg);96 transform: rotate(45deg);97}98 99 100/** media Queries 101===================================================================================*/102@media only screen and (min-width: 1025px) {103 104.header { 105 position: fixed;106 z-index: 999;107 top: 0;108 left: 0;109 width: 100%;110 height: 100px;111 min-width: 1200px;112 border-bottom: none;113 box-shadow: 0 2px 8px 0 rgba( 0, 0, 0, 0.15);114}115.header__inner {116 width: 1200px;117 padding: 0;118 margin: 0 auto;119}120.header-nav { display: flex; }121.drawer {}122.header-logo { margin-top: 4px; }123 124.header-menu {125 display: flex;126 justify-content: flex-end; 127 width: 100%;128 height: 100px;129 background-color: transparent;130 -webkit-transform: translateX(0);131 transform: translateX(0);132}133.main-menu {134 display: flex;135 margin: 0;136 height: 100px;137}138.main-menu li a {139 text-decoration: none;140 font-size: 1.6rem;141 line-height: 1.2;142 color: var(--font-color);143 border-bottom: none;144 padding: 0 15px;145 position: relative;146 width: 100%;147 height: 100px;148 display: flex;149 justify-content: center;150 align-items: center;151}152.main-menu li a:hover {153 background-color: var(--key-color-lighter);154 color: var(--font-color);155}156.nav-Toggle{ display: none; }157 158}159 160 161/** media Queries 162===================================================================================*/163@media only screen and (max-width: 1024px) {164 165.header,166.header-nav,167.drawer {168 width: 100%;169 min-width: 100%;170}171}

js

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>2<!-- humburger menu -->3<script>4 $(function() {5 $('.nav-Toggle').click(function() {6 $(this).toggleClass('active');7 $('.header-menu').toggleClass('open');8 });9});10</script>