ハンバーガーメニューを×をクリックして閉じる方法

前提・実現したいこと

前提・実現したいこと :
Bootstrapを使ってハンバーガーメニューを作る

発生している問題・エラーメッセージ：
ハンバーガーメニューが開いた後、×をクリックしても閉じない
該当のソースコード：

自分で調べたことや試したこと：
Google検索
JSを使ってみたが解決しない

使っているツールのバージョンなど補足情報：
Sublimeテキストを利用

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
	<title>Estonia</title>
	<link rel="stylesheet" type="text/css" href="Estonia.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
   <!-- Fontawesome -->
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<!-- practice for tab and pills using Bootstrap v3
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>  -->
   </head>
   <body>
    <!-- Repuroducing humburger menue in nav bar -->
    <nav id="humberger" class="navbar navbar-light bg-light nabvar-dark fixed-top" >
      <button class="navbar-toggler text-center" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expended="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <span class="menu-icon"> 
        <button class="menu-toggle">
        <span>Menu</span> 
        </button>
      </span>
      <a href="#"><img src="https://www.solosophie.com/wp-content/uploads/2017/05/Solo-Sophie-logo-est.-2015-5.jpg"></a>
      <form class="searchbox">
      	<a href="#"><i class="fas fa-search"></i></a>
      </form>
             <!-- ナビゲーションメニュー -->
      <div class="collapse navbar-collapse" id="navbarNav">
        <div class="sidr-inner data-state=closed">
          <a href="#" id="close-mobile-menu"></a> 
          <a id="close" class="close">&times;</a>
          <a class="normal-logo" href="https://www.solosophie.com/">
          <img src="https://www.solosophie.com/wp-content/uploads/2017/05/Solo-Sophie-logo-est.-2015-5.jpg" alt="solosophie"></a>
        <div class="five-lists">
          <ul class="navbar-nav">
            <li class="nav-item active menu-item" id="border">
              <a class="nav-link" href="#">Travel</a>
            <li class="nav-item menu-item">
              <a class="nav-link" href="#">Lifestyle</a>
            </li>
            <li class="nav-item menu-item">
              <a class="nav-link" href="#">Culture</a>
            </li>
            <li class="nav-item menu-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item menu-item">
              <a class="nav-link" href="#">Subscribe</a>
            </li>
          </ul>
        </div><!-- five-lists -->
        </div>
      </div>

    </nav>

      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>


      <script type="text/javascript">
        $('a#close-mobile-menu').on('click', function(event) {
          console.log("test")
        $('.close').trigger('click');
        });
      </script>

CSS
body{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
form{
	width: 900px;
}

.dropdown_practice{
  background-color: #F8F8F8;
  width: 820px;
  height: 56px;
  margin: 0 auto;
  font-weight: 400;
  line-height: 20px;
  color: #555;
}

.dropdown_practice > nav{
  border: 1px solid blue;
  border-radius: 4px;
}
.dropdown_practice  ul{
  margin-top: 18px;
  }

.dropdown_practice li {
  display: inline-block;
}
.dropdown-item:nth-last-child( 2 ) {
  margin-bottom: 10px;
}

.dropdown-item:last-child {
  border-top: 1px solid lightgray; 
  height:50px;
  line-height:50px;
}


.nav-tabs > li{
  padding:0 20px;
  height: 66px;
  line-height: 66px;
}

.panel{
height: 66px;
background-color: #F2DEDE;
}

.navbar-dark .navbar-toggler-icon{
  /* 三本線 */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(212, 108, 228, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nabvar-dark {
    background-color:#fff!important;
    width: 100%;
    height: 70px;
    border: 1px red solid;
    margin: 0 auto;
}
.navbar-dark .navbar-toggler-icon{
  /* 三本線 */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(212, 108, 228, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-dark .navbar-toggler{
  /* 枠線 */
  border-color: rgba(212, 108, 228, 1);
}

img{
	width: 150px;
    margin: 0 auto;
    display: block;
}
.searchbox{
    width: 30px;
    height: 30px;
    text-align: right;
    border: blue solid 1px;
    /* display: inline-block!important; */
}

.menu-icon{
    position: absolute;
    left: 58px;
    cursor: pointer;
}

.menu-icon:hover {
  opacity:.5;
}

.menu-toggle{
  border: none;
}

.navbar-dark .navbar-toggler-icon{
  /* 三本線 */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-dark .navbar-toggler{
  /* 枠線 color */
  border-color: rgba(0, 0, 0, 0.55);
}

/* Delete hamberger menu outline */
.navbar-light .navbar-toggler { 
    border: none;

}

/*  Size smaller of hamberger menu */
.navbar-light .navbar-toggler-icon {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
    width: 20px;
    height: 14px;
}

#navbarNav{
    display: block;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 999999;
    width: 340px;
    overflow-x: hidden;
    overflow-y: auto;
    color: black;
    background-color: lightyellow;
}

#navbarNav ul.navbar-nav li a {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000;

}

.menu-item{
    width: 280px;
    height: 43px;
}

#border{
    border-bottom: gray;
}


.sidr-inner{
  position: relative;
}

.normal-logo{
    position: absolute;
    right: 80px;
    top: 15px;
}

#close{
    position: absolute;
    display: block;
    border: 1px solid red;
    font-size: 20px;
    right: 0;
    top: 15px;
}
#close-mobile-menu{
  display: block;
  border: 1px solid blue;
}

.five-lists{
  margin-top: 100px;
}

試したこと

Google検索
JSを使ってみたが解決しない

行動規範の内容に同意します

回答1件

公式サイトにハンバーガーメニューのサンプルコードが載ってますよー
サンプルコードからカスタマイズされてみては如何でしょうか。
下にURL貼っておきますね。

参考URL　bootstrap公式 v5.0.0-beta1
https://getbootstrap.jp/docs/5.0/components/navbar/#external-content

以下蛇足です。
jsの部分ですが、$('a#close-mobile-menu').on('click',となっていますが、
Ｘにクリックイベントを付与するのであればセレクタは単純に#closeで良いと思います。
余談ですが、書き換えて試すと無限クリックが発生して800overくらいで止まります。

投稿2021/05/17 00:45