Search results

Types and Positions in React Sidebar component

The Sidebar component’s expand behavior 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. When dataBind is invoked, this applies the pending property changes immediately to the component.

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
App.tsx
index.tsx
index.html
style.css
App.jsx
index.jsx
import { ButtonComponent, ChangeEventArgs ,RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';

export default class App extends React.Component<{}, {}> {
    public sidebarObj: SidebarComponent;
    public btnObj: ButtonComponent;
    private type: SidebarType = "Push";
    private target: string = '.content';
    constructor(props: any) {
        super(props);
        this.onChange = this.onChange.bind(this);
        this.btnClick = this.btnClick.bind(this);
        this.closeClick = this.closeClick.bind(this);
        this.onCreate = this.onCreate.bind(this);
    }
    public onCreate(): void  {
        this.sidebarObj.element.style.visibility='';
    }
    // Toggle button click event handler
    public btnClick(): void {
        if (this.btnObj.content === 'Open') {
            this.btnObj.content = 'Close';
            this.sidebarObj.show();
        } else {
            this.btnObj.content = 'Open';
            this.sidebarObj.hide();
        }
    }
     // function to handle the CheckBox change event
    public onChange(args: ChangeEventArgs): void {
        if ((args as any).event.target.id === "over") {
            this.sidebarObj.type = "Over";
            this.sidebarObj.dataBind();
        } else if ((args as any).event.target.id === "push") {
            this.sidebarObj.type = "Push";
            this.sidebarObj.dataBind();
        } else if ((args as any).event.target.id === "slide") {
            this.sidebarObj.type = "Slide";
            this.sidebarObj.dataBind();
        } else {
            this.sidebarObj.type = "Auto";
            this.sidebarObj.dataBind();
        }
    }
    // Toggle(Open/Close) the Sidebar
    public toggleClick(): void {
        this.sidebarObj.toggle();
    }
    // Close the Sidebar
    public closeClick(): void {
        this.sidebarObj.hide();
        this.btnObj.content = 'Open';
    }

    public render() {
        return (
            <div className="control-section">
                <div id="wrapper">
                    {/* Initializing the Sidebar component */}
                    <SidebarComponent id="default-sidebar" target={this.target} type={this.type} showBackdrop={true} created={this.onCreate} style={{visibility:"hidden"}} ref={sidebar => this.sidebarObj = sidebar as SidebarComponent}>
                        <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} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                        </div>
                    </SidebarComponent>
                    <div id="head">
                        <ButtonComponent id="toggle" ref={(scope) => { this.btnObj = scope as ButtonComponent }} iconCss='e-icons burg-icon'
                      isToggle={true} onClick={ this.btnClick} className="e-btn e-info" content='Open' />
                    </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}/>
                                </div>
                                <div className='row'>
                                    <RadioButtonComponent id="push" label='Push' name='type' change={this.onChange} />
                                </div>
                                <div className='row'>
                                    <RadioButtonComponent id="slide" label='Slide' name='type' change={this.onChange }/>
                                </div>
                                <div className='row'>
                                    <RadioButtonComponent id="auto" label='Auto' name='type' change={this.onChange }/>
                                </div>
                            </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;
}

#head {
    border: 1px solid #424242;
    border-bottom-color: transparent;
    background: #00897B;
}

#toggle,
#toggle:hover,
#toggle:focus {
    /* csslint allow: adjoining-classes*/
    background: #00695C;
    box-shadow: none;
    border-radius: 0;
    height: 39px;
}

.burg-icon:before {
    content: '\e10d';
    font-size: 16px;
}

.content {
    height: 325px;
    border: 1px solid grey;
}

#closebtn {
    top: 15px;
    line-height: 33px;
    height: 42px;
    color: black;
    position: absolute;
    right: 10px;
}

.e-normal,
.e-normal:hover,
.e-noraml:active {
    background: transparent;
    box-shadow: none;
}

.radiobutton {
    text-align: center;
}

.listdiv {
    width: 100%;
}

.e-listview .e-list-item {
    text-align: center;
    font-size: 14px;
    padding: 0;
    background: rgb(20, 118, 210);
    color: white;
}

#listview {
    width: 30%;
    margin: 0 auto;
}

.control-section .content .radiobutton .row {
    padding: 10px;
    display: inline-block;
    margin: 0;
}

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

#default-sidebar {
    background-color: #26A69A;
    color: #ffffff;
}

#wrapper {
    display: block;
}

.right {
    float: right;
}

body {
    margin: 0;
}

.close-btn:hover,
.close-btn:active,
.close-btn:focus {
    background: #fafafa;
}

@font-face {
    font-family: 'e-icons';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}
import { ButtonComponent, RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.type = "Push";
        this.target = '.content';
        this.onChange = this.onChange.bind(this);
        this.btnClick = this.btnClick.bind(this);
        this.closeClick = this.closeClick.bind(this);
        this.onCreate = this.onCreate.bind(this);
    }
    onCreate() {
        this.sidebarObj.element.style.visibility = '';
    }
    // Toggle button click event handler
    btnClick() {
        if (this.btnObj.content === 'Open') {
            this.btnObj.content = 'Close';
            this.sidebarObj.show();
        }
        else {
            this.btnObj.content = 'Open';
            this.sidebarObj.hide();
        }
    }
    // function to handle the CheckBox change event
    onChange(args) {
        if (args.event.target.id === "over") {
            this.sidebarObj.type = "Over";
            this.sidebarObj.dataBind();
        }
        else if (args.event.target.id === "push") {
            this.sidebarObj.type = "Push";
            this.sidebarObj.dataBind();
        }
        else if (args.event.target.id === "slide") {
            this.sidebarObj.type = "Slide";
            this.sidebarObj.dataBind();
        }
        else {
            this.sidebarObj.type = "Auto";
            this.sidebarObj.dataBind();
        }
    }
    // Toggle(Open/Close) the Sidebar
    toggleClick() {
        this.sidebarObj.toggle();
    }
    // Close the Sidebar
    closeClick() {
        this.sidebarObj.hide();
        this.btnObj.content = 'Open';
    }
    render() {
        return (<div className="control-section">
                <div id="wrapper">
                    
                    <SidebarComponent id="default-sidebar" target={this.target} type={this.type} showBackdrop={true} created={this.onCreate} style={{ visibility: "hidden" }} 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} 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={true} onClick={this.btnClick} className="e-btn e-info" content='Open'/>
                    </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}/>
                                </div>
                                <div className='row'>
                                    <RadioButtonComponent id="push" label='Push' name='type' change={this.onChange}/>
                                </div>
                                <div className='row'>
                                    <RadioButtonComponent id="slide" label='Slide' name='type' change={this.onChange}/>
                                </div>
                                <div className='row'>
                                    <RadioButtonComponent id="auto" label='Auto' name='type' change={this.onChange}/>
                                </div>
                            </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'));

See Also