Javascript Structure

Here is the general Javascript structure of the template:

<!-- Library Bundle Script -->
<script src="<?= base_url('build/assets/js/core/libs.min.js')?>"></script>
<!-- Plugin Scripts -->
<?= $this->include('components/partials/plugins-scripts') ?>
<!-- Lodash Utility -->
<script src="<?= base_url('assets/vendor/lodash/lodash.min.js')?>"></script>
<!-- Utilities Functions -->
<script src="<?= base_url('build/assets/js/iqonic-script/utility.min.js')?>"></script>
<!-- Settings Script -->
<script src="<?= base_url('build/assets/js/iqonic-script/setting.min.js')?>"></script>
<!-- Settings Init Script -->
<script src="<?= base_url('assets/js/setting-init.js')?>"></script>
<!-- External Library Bundle Script -->
<script src="<?= base_url('build/assets/js/core/external.min.js')?>"></script>
<!-- Widgetchart Script -->
<script src="<?= base_url('assets/js/charts/widgetcharts.js?v=1.0.1')?>" defer></script>
<!-- Dashboard Script -->
<script src="<?= base_url('assets/js/charts/dashboard.js?v=1.0.1')?>" defer></script>
<!-- App Script -->
<script src="<?= base_url('assets/js/hope-ui.js?v=1.0.1')?>" defer></script>
<script src="<?= base_url('assets/js/hope-uipro.js?v=1.0.1')?>" defer></script>
<?= $this->renderSection("scripts"); ?>

Here, is the landing pages Javascript structure of the template:

<script src="<?= base_url('build/assets/js/app-landing.js')?>" defer></script>
<script src="<?= base_url('assets/vendor/swiperSlider/swiper-bundle.min.js')?>"></script>
<script src="<?= base_url('build/assets/js/core/libs.min.js')?>"></script>

<script>
document.querySelector('.btn-close').addEventListener('click', function () {
    var offcanvas = document.getElementById('navbar_main');
    offcanvas.classList.remove('show');
});
</script>