[BUG] Main sidebar is not collapsing on click outside of it

Describe the bug Main sidebar is not collapsing, when I click outside of it in mobile devices

To Reproduce Steps to reproduce the behavior:

1. Add import '../node_modules/admin-lte/dist/js/adminlte.min.js' to my entrypoint (I use webpack)
2. Add data-widget="pushmenu" to a button to activate the plugin. In my case

<li class="nav-item">
    <a class="nav-link" data-widget="pushmenu" href="#" role="button">
    <i class="fas fa-bars"></i></a>
</li>

1. Add sidebar:

<aside class="main-sidebar sidebar-dark-primary elevation-4">
        <a href="" class="brand-link text-center" target="_blank">
            <span class="brand-text font-weight-light">Company name</span>
        </a>

        <div class="sidebar">
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="tree" role="menu" data-accordion="false">
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            <i class="nav-icon far fa-file-alt"></i>
                            First Item
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            <i class="nav-icon far fa-edit"></i>
                            Second Item
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            <i class="nav-icon fas fa-id-card"></i>
                            Third Item
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </aside>

1. npm run start
2. Go to responsive design mode in browser.
3. Choose device with <992px screen width.
4. Click on button to show sidebar.
5. Click outside of sidebar

Expected behavior Main sidebar is collapsing on click outside of it

Environment (please complete the following information):

• AdminLTE Version: [e.g. v3.0.0]
• Operating System: Win 10
• Browser (Version): Chrome (Latest)

Additional context This is my entrypoint file

import $ from 'jquery'
import popper from 'popper.js';
import bootstrap from 'bootstrap';
import '../node_modules/admin-lte/dist/js/adminlte.min.js'

import './scss/style.scss';

And this is my webpack.config.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        babelrc: true
                    }
                }
            },
            {
                test: /\.(sass|scss)$/,
                use:  ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
            },
            {
                test: /\.(svg|eot|woff|woff2|ttf)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new MiniCssExtractPlugin({
            filename: 'bundle.css',
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        }),
        new HtmlWebpackPlugin({
            template: './src/operator.html',
            filename: 'operator.html'
        }),
    ]
};

[msaltieri]

Sorry guys, just because I had the exact same problem, I drop the solution here since it is not reported in this thread.

In case someone did it, the <div id="sidebar-overlay"> must not be created manually within the <div class="wrapper"> element. As @REJack reported, this prevents the function to be applied on click.

[agussudarmanto]

Oh, it was my mistake 😄 Thank you very much for you time!

wheres the solution? i got the same problem here too …but base on comments the solution never posted. it was ended like magic. you posted the repo then tada !

As mention from @msaltieri here https://github.com/ColorlibHQ/AdminLTE/issues/2680#issuecomment-639049137 i just comment sidebar-overlay element, thanks