Search results

Types

The Sidebar component’s expand behaviour can be modified based on the purpose of use.

  • Expanding types of the Sidebar

Expanding types of Sidebar

Sidebar can be set to initialize based on four different types that are consistent with the main component as explained below.

Item Description
Over Sidebar floats over the main content area.
Push Sidebar pushes the main content area to appear side-by-side, and shrinks the main content within the screen width.
Slide Sidebar translates the x and y positions of main content area based on the Sidebar width. The main content area will not be adjusted within the screen width.
Auto Sidebar with Over type in mobile resolution, and Push type in other higher resolutions.

Auto is the default expand mode.

In the following sample, the types of Sidebar are demonstrated.

Source
Preview
index.tsx
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent,RadioButtonComponent,ChangeEventArgs  } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';


class App extends React.Component<{}, {}> {
    public sidebarobj: SidebarComponent;
    public RadiobtnObj: RadioButtonComponent;
    private type: string = "Push";
    private showBackdrop: boolean = true;
    private target: string = '.content';
    public btnobj: ButtonComponent;

    //Toggle button click event handler
    btnClick(): void {
        let proxy: any = this;
        if (proxy.btnobj.element.classList.contains('e-active')) {
            proxy.btnobj.content = 'Close';
            proxy.btnobj.iconCss = 'e-icons burg-icon';
            this.sidebarobj.show();
        }else {
            proxy.btnobj.content = 'Open';
            proxy.btnobj.iconCss = 'e-icons burg-icon';
            this.sidebarobj.hide();
        }
    }
     // function to handle the CheckBox change event
   onChange(args: ChangeEventArgs): void {
        if (args.event.target.id == "over") {
            this.sidebarobj.type = "Over"
        } else if (args.event.target.id == "push") {
            this.sidebarobj.type = "Push"
        } else if (args.event.target.id == "slide") {
            this.sidebarobj.type = "Slide"
        } else {
            this.sidebarobj.type = "Auto"
        }
    }

    render() {
        return (
         <div className="control-section">
                <div id="wrapper">
                    <SidebarComponent id="default-sidebar" target={this.target} type={this.type} showBackdrop={this.showBackdrop} ref={sidebar => this.sidebarobj = sidebar}>
                        <div className="title"> Sidebar content</div>
                        <div className="sub-title">
                            Click the button to close the Sidebar.
                         </div>
                        <div className="center-align">
                            <ButtonComponent onClick={this.closeClick.bind(this)} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                        </div>
                    </SidebarComponent>
                  <div id="head">
                  <ButtonComponent id="toggle" ref={(scope) => { this.btnobj = scope; }} iconCss='e-icons burg-icon'
                            isToggle onClick={ this.btnClick.bind(this)} className="e-btn e-info">Open</ButtonComponent>
                  </div>
                  <div id="maincontent" className="content">
                    <div>
                       <div className="title">Main content</div>
                        <div className="sub-title"> Click the button to open/close the Sidebar.</div>
                       <div className="radiobutton" >
                        <div className='row'>
                            <RadioButtonComponent id="over" checked={true} label='Over' name='type' change={ this.onChange.bind(this)}></RadioButtonComponent>
                        </div>
                        <div className='row'>
                            <RadioButtonComponent id="push" label='Push' name='type' change={ this.onChange.bind(this)} ></RadioButtonComponent>
                        </div>
                        <div className='row'>
                            <RadioButtonComponent id="slide" label='Slide' name='type' change={ this.onChange.bind(this) }></RadioButtonComponent>
                        </div>
                        <div className='row'>
                            <RadioButtonComponent id="auto" label='Auto' name='type' change={ this.onChange.bind(this) }></RadioButtonComponent>
                        </div>
                       </div>
                    </div>
                  </div>
                </div>
            </div>
        )
    }
   toggleClick(): void {
        this.sidebarobj.toggle();
    }
    closeClick(): void {
        this.sidebarobj.hide();
        this.btnobj.content= 'Open';
    }
}

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