Auto close in EJ2 TypeScript Sidebar control

3 Mar 202512 minutes to read

The Sidebar often behaves differently on mobile displays compared to desktop displays. It features a functionality that allows it to be opened or closed based on the specified resolution. This behavior is controlled through the mediaQuery property, allowing you to keep the Sidebar in an expanded or collapsed state only in user-defined resolutions.

In the following sample, mediaQuery is used to close and open the Sidebar based on a specific resolution.

import { Sidebar } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

let defaultSidebar: Sidebar = new Sidebar({
    mediaQuery: window.matchMedia('(min-width: 600px)'), width: "280px",
});
defaultSidebar.appendTo('#default');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Sidebar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <!-- Sidebar element declaration -->
        <aside id="default">
            <div class="title"> Sidebar </div>
        </aside>
        <!-- end of Sidebar element -->
        <!-- main content declaration -->
        <div>
            <div class="title">Main content</div>
            <div class="sub-title">* Sidebar will collapse in mobile mode automatically</div>
        </div>
    </div>
    <style>
        .header {
            width: 100%;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            font-weight: 500;
            background: #eee;
            display: inline-block;
        }

        .center-align {
            text-align: center;
            padding: 20px;
        }

        .title {
            text-align: center;
            font-size: 20px;
            padding: 15px;
        }

        .sub-title {
            text-align: center;
            font-size: 14px;
            padding: 10px;
        }

        .center {
            text-align: center;
            display: none;
            font-size: 13px;
            font-weight: 400;
            margin-top: 20px;
        }

        #default {
            background-color: rgb(25, 118, 210);
            color: #ffffff;
        }

        .close-btn:hover {
            color: #fafafa;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

  • In the following sample, the Sidebar will be in an expanded state only in resolutions below 400px.
import { Sidebar } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

//start of Sidebar initialization
let defaultSidebar: Sidebar = new Sidebar({
    mediaQuery: window.matchMedia('(max-width: 400px)'), width: "280px",
});
defaultSidebar.appendTo('#default');
//end of Sidebar initialization
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Sidebar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <!-- Sidebar element -->
        <aside id="default">
            <div class="title"> Sidebar </div>
        </aside>
        <!-- end of Sidebar element -->
        <!-- main content declaration -->
        <div>
            <div class="title">Main content</div>
            <div class="sub-title"> * Sidebar will open in mobile mode automatically</div>
        </div>
        <!-- end of main content -->
    </div>
    <style>
        .header {
            width: 100%;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            font-weight: 500;
            background: #eee;
            display: inline-block;
        }

        .center-align {
            text-align: center;
            padding: 20px;
        }

        .title {
            text-align: center;
            font-size: 20px;
            padding: 15px;
        }

        .sub-title {
            text-align: center;
            font-size: 14px;
            padding: 10px;
        }

        .center {
            text-align: center;
            display: none;
            font-size: 13px;
            font-weight: 400;
            margin-top: 20px;
        }

        #default {
            background-color: rgb(25, 118, 210);
            color: #ffffff;
        }

        .close-btn:hover {
            color: #fafafa;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}