Auto Close in React Sidebar component

03 Aug 2021 / 1 minute to read

Sidebar often behaves differently on mobile display and differently on desktop display. It has an effective feature that offers to set it in opened or closed state depending on the specified resolution. This is achieved through mediaQuery property that allows you to set the Sidebar in an expanded state or collapsed state only in user-defined resolution.

Source

Preview

App.tsx

index.tsx

index.html

style.css

App.jsx

index.jsx

import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';

export default class App extends React.Component<{}, {mediaQuery: MediaQueryList}> {
    public sidebarobj: SidebarComponent;
    constructor(props: any) {
        super(props);
        this.state = { mediaQuery: window.matchMedia('(min-width: 600px)')}
        this.onCreate = this.onCreate.bind(this);
    }
    public onCreate() {
        this.sidebarobj.element.style.visibility='';
    }
    public render() {
        return (
            <div className="control-section">
                <div id="wrapper">
                    <div className="col-lg-12 col-sm-12 col-md-12">
                        {/* Initializing the Sidebar component */}
                        <SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarobj = Sidebar as SidebarComponent} created={this.onCreate} style={{visibility:"hidden"}} mediaQuery={this.state.mediaQuery} width="248px">
                            <div className="title"> Sidebar content</div>
                        </SidebarComponent>
                        <div>
                            <div className="title">Main content</div>
                            <div className="sub-title"> * Sidebar will collapse in mobile mode automatically</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('sample'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Sidebar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-navigations/styles/material.css";

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

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

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

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

#wrapper {
    display: block;
}

#close:hover,#close:active,#close:focus{
  background:white;
  color:black;
}

.right {
    float: right;
}

body {
    margin: 0;
}

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

.close-btn:hover {
    color: #fafafa;
}

import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { mediaQuery: window.matchMedia('(min-width: 600px)') };
        this.onCreate = this.onCreate.bind(this);
    }
    onCreate() {
        this.sidebarobj.element.style.visibility = '';
    }
    render() {
        return (<div className="control-section">
                <div id="wrapper">
                    <div className="col-lg-12 col-sm-12 col-md-12">
                        
                        <SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarobj = Sidebar} created={this.onCreate} style={{ visibility: "hidden" }} mediaQuery={this.state.mediaQuery} width="248px">
                            <div className="title"> Sidebar content</div>
                        </SidebarComponent>
                        <div>
                            <div className="title">Main content</div>
                            <div className="sub-title"> * Sidebar will collapse in mobile mode automatically</div>
                        </div>
                    </div>
                </div>
            </div>);
    }
}

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));

In this sample,the Sidebar will be in expanded state only in resolution below 400px.