I'm trying to integrate the CoreUi Admin Bootstrap template in my first Symfony project.

But I have some issues. First, the sidebar doesn't work. I can't minimize it.

And I have a JS error in my console :

Action

Action in the code :

<button  type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()">
                <i ></i>
            </button>

Error console

This is my project tree :

Project tree

My app.js :

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.scss';

// start the Stimulus application
import './bootstrap';

import '@coreui/coreui';
import '@coreui/icons';

import 'simplebar';

My app.scss :

// @import "~bootstrap/scss/bootstrap";

@import "~@coreui/coreui/scss/coreui";
@import "~@coreui/icons";

$enable-ltr: true; /* stylelint-disable-line scss/dollar-variable-default */
$enable-rtl: true; /* stylelint-disable-line scss/dollar-variable-default */

// If you want to add custom CSS you can put it here.
@import "scss/custom";

I don't really understand whats's missing :(

CodePudding user response：

I solved my issue by putting JS directly in the footer.html.twig...

I don't understand why that don't work with app.js but it's OK now !

app.js :

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.scss';

// start the Stimulus application
import './bootstrap';

app.scss :

// @import "~bootstrap/scss/bootstrap";

// If you want to add custom CSS you can put it here.
@import "../css/coreui.min.css";
@import "custom.css";

@import "../../public/vendors/simplebar/css/simplebar.css";

@import "../../public/vendors/@coreui/icons/css/free.min.css";

And my footer.html.twig :

<footer >
    <div>
        <a href="">text</a>
        © 2022</div>
    <div >
        <a href="">text</a>
    </div>
</footer>
</div>
<script src="/vendors/@coreui/coreui/js/coreui.bundle.min.js"></script>
<script src="/vendors/simplebar/js/simplebar.min.js"></script>
<script src="/vendors/@coreui/utils/js/coreui-utils.js"></script>

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-coreui-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new coreui.Tooltip(tooltipTriggerEl)
})
</script>