React
Demos
Support
Forum
Download
Search results

Auto-close

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
index.tsx
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
class App extends React.Component<{}, {}> {
    public sidebarobj: SidebarComponent;
    private mediaQuery: object = window.matchMedia('(min-width: 600px)');
    private width: string = "248px";
    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}
                         mediaQuery={this.mediaQuery} width={this.width}>
                            <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>
        )
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
  • In this sample,the Sidebar will be in expanded state only in resolution below 400px.
Source
Preview
index.tsx
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
class App extends React.Component<{}, {}> {
    public sidebarobj: SidebarComponent;
    private mediaQuery: object = window.matchMedia('(max-width: 400px)');
    private width: string = "248px";
    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} mediaQuery={this.mediaQuery} width={this.width}>
                            <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>
        )
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
Previous
Next