Auto close in React Sidebar component

29 Aug 202312 minutes 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.

app.jsx

import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
function App() {
    let sidebarobj;
    let mediaQueryState = { mediaQuery: window.matchMedia('(min-width: 600px)') };
    function onCreate() {
        sidebarobj.element.style.visibility = '';
    }
    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 => sidebarobj = Sidebar} created={onCreate} style={{ visibility: "hidden" }} mediaQuery={mediaQueryState.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>);
}
export default App;

app.tsx

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

function App() {
    let sidebarobj: SidebarComponent;
    let mediaQueryState={ mediaQuery: window.matchMedia('(min-width: 600px)')}
    function onCreate() {
        sidebarobj.element.style.visibility='';
    }
    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 => sidebarobj = Sidebar as SidebarComponent} created={onCreate} style={{visibility:"hidden"}} mediaQuery={mediaQueryState.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>
    )
}
export default App;

index.jsx

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

index.tsx

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.

app.jsx

import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
function App() {
    let sidebarobj;
    let mediaQueryState = { mediaQuery: window.matchMedia('(max-width: 400px)') };
    function onCreate() {
        sidebarobj.element.style.visibility = '';
    }
    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 => sidebarobj = Sidebar} mediaQuery={mediaQueryState.mediaQuery} style={{ visibility: "hidden" }} created={onCreate} width="248px">
                        <div className="title"> Sidebar content</div>
                    </SidebarComponent>
                    <div>
                        <div className="title">Main content</div>
                        <div className="sub-title"> * Sidebar will expanded in mobile mode automatically</div>
                    </div>
                </div>
            </div>
        </div>);
}
export default App;

app.tsx

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

function App() {
    let sidebarobj: SidebarComponent;
    let mediaQueryState={ mediaQuery: window.matchMedia('(max-width: 400px)')};
    function onCreate(): void  {
        sidebarobj.element.style.visibility='';
    }
    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 => sidebarobj = Sidebar as SidebarComponent} mediaQuery={mediaQueryState.mediaQuery} style={{visibility:"hidden"}} created={onCreate} width="248px">
                        <div className="title"> Sidebar content</div>
                    </SidebarComponent>
                    <div>
                        <div className="title">Main content</div>
                        <div className="sub-title"> * Sidebar will expanded in mobile mode automatically</div>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default App;

index.jsx

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

index.tsx

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

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