bootstrapのハンバーガーメニューが閉じない事に困っています。

Rails(Rails6.0.3 )でアプリを作っています。そしてビューのheader部分を作っているのですが、上記のような問題点が発生しました。
bootstrapは4.0を使っています。
ハンバーガーメニューを開けることは可能です。しかし開いた後に、ハンバーガー部分をクリックしても閉じることができません。
調べてみたところ、「turbolinks」の機能が原因のようです。以下は自分なりに原因を具体化した文章ですが、初学者なため、説明が正確ではない部分があると思います。

<navbar navbar-collapse show>は「ハンバーガーメニューが開いている状態」のようです。一方で「ハンバーガーメニューが閉じている状態」は<navbar navbar-collapse>みたいです（つまりshowがあるかどうかの違い）。
しかし、turbolinksによってどうやらメニューを閉じようとしても「show」が復活するようです。
実際に検証ツールで確認したところ、やはりそのようになっていました。

したがって、（その原因の考察が正しいと仮定すると）turbolinksの機能をオフにするのが解決策となるのかなと思います。
しかし、その方法がわからないというのが実際に自分が解決したいことです。

turbolinksのgem自体を消すことが一つの選択肢のようですが、できれば部分的に無効化させたいなと思っています。

（また、そもそも原因の考察そのものが間違っている可能性があるので、もしそうであればご指摘いただけると幸いです。）

該当のソースコード

[header部分]

<header>
    <nav class="navbar navbar-expand-lg navbar-light " style="background: linear-gradient(#F89174,#FFC778);" >
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar" aria-controls="Navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="Navbar">

      
      <%= link_to "MM_APLI", home_path, id: "logo" , class:"navbar-brand mr-5" %>

        <ul class="navbar-nav mr-auto mt-2">
          <li class="nav-item active mr-5">
            <%= link_to "トップ",   home_path, {class: "nav-link"}  %>
          </li>
          
       
          <% if logged_in? %>
          
            <li class="nav-item active mr-5">
            <%= link_to "新規メモ",   new_memo_path, {class: "nav-link"}  %>
            </li>
          
            <li class="nav-item dropdown mr-5">
              <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                プロフィール
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <%= link_to "メモ一覧", current_user, {class: "dropdown-item"}%>
                <%= link_to "設定", edit_user_path(current_user) , {class: "dropdown-item"}%>
                <div class="dropdown-divider"></div>
                <%= link_to "ログアウト", logout_path, class: 'dropdown-item',  method: :delete,
                                       data: { confirm: "ログアウトしますか" } %>
              </div>
            </li>

          <% else %>
            <li class="nav-item mr-5">
              <%= link_to "ログイン", login_path, {class: "nav-link"} %>
            </li>
            <li class="nav-item mr-5">
              <%= link_to "新規登録",   signup_path, {class: "nav-link"}  %>
            </li>
          <% end %>
          
          <li class="nav-item mr-5">
             <a href="https://youtu.be/2Q_ZzBGPdqE" class="nav-link" target="_blank">HELP!</a>
          </li>
          
        </ul>
      </div>
    </nav>
  
</header>

headの読み込み部分は以下のようになっています。しかし、Railsの読み込みの仕様への理解が浅いため、アセットパイプラインの読み込みと、ウェブパッカーの読み込みが混合しています。読みにくくて申し訳ありません。
[html head部分]

<head>
    <title><%= yield(:title) %> | みんなのMEMORYアプリ</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    
    <%= javascript_pack_tag    'application',
                               'data-turbolinks-track': 'reload' %>
                               
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
                               
    
    <%= stylesheet_pack_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
                               
    <%= render'layouts/shim' %>
    
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    
    


  </head>

試したこと

2点試してみました。
①
headの
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
の部分を…
<%= javascript_pack_tag 'application' %>
に変えてみましたが、結果は変わりませんでした。

②
[app/javascript/packs/application.js]に

<script>
$('.navbar-nav>li>a , .dropdown-menu>a').on('click', function(){
    if(this.id != 'navbarDropdown'){
      $('.navbar-collapse').collapse('hide');
    }
});
</script>

を追記してみましたが、結果は変わらなかったです。

以上が自分が実現したいことと現在の状況の説明でした。何かしらのアドバイス等いただけると幸いです。

不足している情報があれば指摘していただければすぐに追記いたします。