Я скопировал шаблон из https://github.com/BlackrockDigital/startbootstrap-stylish-portfolio, но раскрывающееся меню не работает на моем компьютере. Файлы javascript и таблицы стилей не были затронуты или отредактированы, код домашней страницы можно просмотреть по адресу https://github.com/BlackrockDigital/startbootstrap-stylish-portfolio/blob/master/index.html. Ниже мой код:
APP / VIEWS / LAYOUT / APPLICATION. HTML
<!DOCTYPE html>
<html>
<head>
<title>TestApp</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic', media: 'all', 'data-turbolinks-track': 'reload' %>
<script src="vendor/assets/vendor/jquery/jquery.min.js" ></script>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'custom', 'vendor' %>
</head>
<body id="page-top">
<%= yield %>
</body>
</html>
APP / VIEWS / MAIN / _NAVIGATION. HTML .ERB
<!-- Navigation -->
<a class="menu-toggle rounded" href="#">
<i class="fas fa-bars"></i>
</a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a class="js-scroll-trigger" href="#page-top">Start Bootstrap</a>
</li>
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#page-top">Home</a>
</li>
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#about">About</a>
</li>
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#services">Services</a>
</li>
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#portfolio">Portfolio</a>
</li>
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</nav>
CONFIG / WEBPACK / ENVIROMENT. JS
const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("provide", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment
APP / JAVASCRIPT / PACKS / APPLICATION. JS
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap")
require("jquery/jquery.min.js")
require.context('../images', true)
document.addEventListener("turbolink:load", () => {
$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="popover"]').popover()
})
APP / JAVASCRIPT / PACKS / CUSTOM. JS
import "../../../vendor/assets/javascript/stylish-portfolio.min.js"
APP / JAVASCRIPT / PACKS / VENDOR. JS
import "../../../vendor/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"
import "../../../vendor/assets/vendor/jquery-easing/jquery.easing.min.js"
Любая помощь приветствуется, спасибо.