Search results

Use case scenarios

Scrollable menu

The menu component supports horizontal and vertical scrolling to render large menus and submenus in an adaptive way. This can be achieved by enabling the enableScrolling property and by restricting the corresponding menu/submenu size.

Source
Preview
index.tsx
index.html
index.css
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { enableRipple, closest } from '@syncfusion/ej2-base';
import { MenuComponent, MenuItemModel, BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-react-navigations';
enableRipple(true);

export default class App extends React.Component<{}, {}> {
    // Menu items definition
    menuItems: MenuItemModel[] = [
        {
            text: 'Appliances',
            items: [
                {
                    text: 'Kitchen',
                    items: [
                        { text: 'Electric Cookers' },
                        { text: 'Coffee Makers' },
                        { text: 'Blenders' },
                        { text: 'Microwave Ovens' }
                    ]
                },
                {
                    text: 'Television',
                    items: [
                        { text: 'Our Exclusive TVs' },
                        { text: 'Smart TVs' },
                        { text: 'Big Screen TVs' }
                    ]
                },
                {
                    text: 'Washing Machine'
                },
                {
                    text: 'Refrigerators'
                },
                {
                    text: 'Air Conditioners',
                    items: [
                        { text: 'Inverter ACs' },
                        { text: 'Split ACs' },
                        { text: 'Window ACs' },
                    ]
                },
                {
                    text: 'Water Purifiers'
                },
                {
                    text: 'Air Purifiers'
                },
                {
                    text: 'Chimneys'
                },
                {
                    text: 'Inverters'
                },
                {
                    text: 'Healthy Living'
                },
                {
                    text: 'Vacuum Cleaners'
                },
                {
                    text: 'Room Heaters'
                },
                {
                    text: 'New Launches'
                }
            ]
        },
        {
            text: 'Accessories',
            items: [
                {
                    text: 'Mobile',
                    items: [
                        { text: 'Headphones' },
                        { text: 'Memory Cards' },
                        { text: 'Power Banks' },
                        { text: 'Mobile Cases' },
                        { text: 'Screen Protectors' }
                    ]
                },
                {
                    text: 'Laptops'
                },
                {
                    text: 'Desktop PC',
                    items: [
                        { text: 'Pendrives' },
                        { text: 'External Hard Disks' },
                        { text: 'Monitors' },
                        { text: 'Keyboards' }
                    ]
                },
                {
                    text: 'Camera',
                    items: [
                        { text: 'Lens' },
                        { text: 'Tripods' }
                    ]
                }
            ]
        },
        {
            text: 'Fashion',
            items: [
                {
                    text: 'Men'
                },
                {
                    text: 'Women'
                }
            ]
        },
        {
            text: 'Home & Living',
            items: [
                {
                    text: 'Furniture'
                },
                {
                    text: 'Decor'
                },
                {
                    text: 'Smart Home Automation'
                },
                {
                    text: 'Dining & Serving'
                }
            ]
        },
        {
            text: 'Entertainment',
            items: [
                {
                    text: 'Televisions'
                },
                {
                    text: 'Home Theatres'
                },
                {
                    text: 'Gaming Laptops'
                }
            ]
        },
        {
            text: 'Contact Us'
        },
        {
            text: 'Help'
        }
    ];

    onBeforeOpen(args: BeforeOpenCloseMenuEventArgs) {
        // Restricting sub menu wrapper height
        if (args.parentItem.text === 'Appliances') {
            (closest(args.element, '.e-menu-wrapper') as HTMLElement).style.height = '230px';
        }
    }

    render() {
        return (
            <MenuComponent items={this.menuItems} cssClass='e-scrollable-menu' enableScrolling={true} beforeOpen={this.onBeforeOpen.bind(this)}></MenuComponent>
        );
    }
}

ReactDom.render(<App />,document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ContextMenu</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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.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='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

body {
	margin-top: 100px;
	text-align: center;
}

/* Restricting the parent menu wrapper size */
.e-menu-wrapper.e-scrollable-menu:not(.e-menu-popup) {
	width: 492px;
  }

The following example demonstrates how to integrate Menu with Toolbar component.

Source
Preview
index.tsx
index.html
index.css
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { enableRipple } from '@syncfusion/ej2-base';
import { FieldSettingsModel, ItemDirective, ItemsDirective, MenuAnimationSettings, MenuComponent, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
enableRipple(true);

export default class App extends React.Component<{}, {}> {
    public tbObj: ToolbarComponent;

    // Menu items definition
    public data: { [key: string]: Object }[] = [
        {
            header: 'Events',
            subItems: [
                { text: 'Conferences' },
                { text: 'Music' },
                { text: 'Workshops' }
            ]
        },
        {
            header: 'Movies',
            subItems: [
                { text: 'Now Showing' },
                { text: 'Coming Soon' }
            ]
        },
        {
            header: 'Directory',
            subItems: [
                { text: 'Media Gallery' },
                { text: 'Newsletters' }
            ]
        },
        {
            header: 'Queries',
            subItems: [
                { text: 'Our Policy' },
                { text: 'Site Map'},
                { text: '24x7 Support'}
            ]
        },
        { header: 'Services' }
    ];

    public menuFields: FieldSettingsModel = {
        text: ['header', 'text', 'value'],
        children: ['subItems', 'options']
    };

    public animation: MenuAnimationSettings = { effect: 'None' };

    public menuTemplate(): JSX.Element {
        return (
            <MenuComponent id="menu" items={this.data} fields={this.menuFields} animationSettings={this.animation} />
        );
    }

    public onCreated(): void {
        this.tbObj.refreshOverflow();
    }

    render() {
        return (
            <div className="toolbar-menu-control">
                <ToolbarComponent id="toolbar" created={this.onCreated.bind(this)} ref={(scope) => { this.tbObj = scope; }} >
                    <ItemsDirective>
                        <ItemDirective template={this.menuTemplate.bind(this)} />
                        <ItemDirective prefixIcon='em-icons e-shopping-cart' align='Right' />
                    </ItemsDirective>
                </ToolbarComponent>
            </div>
        );
    }
}

ReactDom.render(<App />,document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ContextMenu</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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.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='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

body {
    margin-top: 100px;
    text-align: center;
}

@font-face {
    font-family: 'e-menu';
    src:
    url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.em-icons {
    font-family: 'e-menu';
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-transform: none;
    line-height: 2;
}

.toolbar-menu-control .e-toolbar-items .e-toolbar-item .e-tbar-btn .e-btn-icon.e-shopping-cart {
    font-size: 20px;
    margin-right: 1px;
}

.toolbar-menu-control .e-shopping-cart::before {
    content: '\e7e8';
}

.toolbar-menu-control .e-menu-wrapper .e-menu {
    border: none;
}

.toolbar-menu-control {
    margin: 45px auto 0;
    max-width: 950px;
}

.toolbar-menu-control .e-toolbar .e-toolbar-left .e-toolbar-item.e-template {
    padding: 0;
}

.toolbar-menu-control .e-toolbar {
    overflow: visible !important;
}

.toolbar-menu-control .e-menu-wrapper {
    margin-right: 160px;
}    

.toolbar-menu-control .e-hscroll .e-hscroll-content {
    position: static;
}

@media only screen and (max-width: 1300px) {
    .toolbar-menu-control {
        width: auto;
    }
}

Hamburger menu

The following example demonstrates the use case of menu with Accordion component integrated in SideBar.

Source
Preview
index.tsx
index.html
index.css
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { AccordionClickArgs, AccordionComponent, AccordionItemDirective, AccordionItemsDirective, ExpandEventArgs, SidebarComponent } from '@syncfusion/ej2-react-navigations';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default class App extends React.Component<{}, {}> {
    public sidebarObj: SidebarComponent;
    public accordionObj: AccordionComponent;
    public nestedAccordionObj: AccordionComponent;

    public width: string = '200px';
    public type: string = 'Over';

    constructor(props: any) {
        super(props);
        this.close = this.close.bind(this);
        this.expand = this.expand.bind(this);
        this.nestedExpand = this.nestedExpand.bind(this);
        this.clicked = this.clicked.bind(this);
        this.hamburgerClick = this.hamburgerClick.bind(this);
    }

    public clicked(e: AccordionClickArgs): void {
        if (!e.item && !(e.originalEvent.target as HTMLElement).closest('.e-acrdn-item').getElementsByClassName('e-tgl-collapse-icon').length) {
            this.sidebarObj.hide();
        }
    }

    public appliancesAccordion(): void {
        return ReactDom.render(
            <AccordionComponent ref={scope => this.nestedAccordionObj = scope} expanding={this.nestedExpand} clicked={this.clicked}>
                <AccordionItemsDirective>
                    <AccordionItemDirective header='Kitchen' content='<div id="Appliances_Kitchen_Items"></div>' />
                    <AccordionItemDirective header='Washing Machine' content='<div id="Appliances_Washing_Items"></div>' />
                    <AccordionItemDirective header='Air Conditioners' content='<div id="Appliances_Conditioners_Items"></div>' />
                </AccordionItemsDirective>
            </AccordionComponent>,
            document.getElementById("Appliances_Items"));
    }

    public kitchenAccordion(): void {
        return ReactDom.render(
            <AccordionComponent clicked={this.clicked}>
                <AccordionItemsDirective>
                    <AccordionItemDirective header='Electric Cookers' />
                    <AccordionItemDirective header='Coffee Makers' />
                    <AccordionItemDirective header='Blenders' />
                </AccordionItemsDirective>
            </AccordionComponent>,
            document.getElementById("Appliances_Kitchen_Items"));
    }

    public acAccordion(): void {
        return ReactDom.render(
            <AccordionComponent clicked={this.clicked}>
                <AccordionItemsDirective>
                    <AccordionItemDirective header='Inverter ACs' />
                    <AccordionItemDirective header='Split ACs' />
                    <AccordionItemDirective header='Window ACs' />
                </AccordionItemsDirective>
            </AccordionComponent>,
            document.getElementById("Appliances_Conditioners_Items"));
    }

    public washingAccordian(): void {
        return ReactDom.render(
            <AccordionComponent clicked={this.clicked}>
                <AccordionItemsDirective>
                    <AccordionItemDirective header='Fully Automatic' />
                    <AccordionItemDirective header='Semi Automatic' />
                </AccordionItemsDirective>
            </AccordionComponent>,
            document.getElementById("Appliances_Washing_Items"));
    }

     public accessoriesAccordion(): void {
        return ReactDom.render(
            <AccordionComponent clicked={this.clicked}>
                <AccordionItemsDirective>
                    <AccordionItemDirective header='Mobile' />
                    <AccordionItemDirective header='Computer' />
                </AccordionItemsDirective>
            </AccordionComponent>,
            document.getElementById("Accessories_Items"));
    }

    public homeAccordion(): void {
        return ReactDom.render(
            <AccordionComponent clicked={this.clicked}>
                <AccordionItemsDirective>
                    <AccordionItemDirective header='Furniture' />
                    <AccordionItemDirective header='Decor' />
                </AccordionItemsDirective>
            </AccordionComponent>,
            document.getElementById("Home_Living_Items"));
    }

    public fashionAccordion(): void {
        return ReactDom.render(
            <AccordionComponent clicked={this.clicked}>
                <AccordionItemsDirective>
                    <AccordionItemDirective header='Men' />
                    <AccordionItemDirective header='Women' />
                </AccordionItemsDirective>
            </AccordionComponent>,
            document.getElementById("Fashion_Items"));
    }

    public entertainmentAccordion(): void {
        return ReactDom.render(
            <AccordionComponent clicked={this.clicked}>
                <AccordionItemsDirective>
                    <AccordionItemDirective header='Televisions' />
                    <AccordionItemDirective header='Home Theatres' />
                    <AccordionItemDirective header='Gaming Laptops' />
                </AccordionItemsDirective>
            </AccordionComponent>,
            document.getElementById("Entertainment_Items"));
    }

    // Expanding Event function for main Accordion component.
    public expand(e: ExpandEventArgs): void {
        if (e.isExpanded && [].indexOf.call(this.accordionObj.items, e.item) === 0) {
            if ((e.element as Element).querySelectorAll('.e-accordion').length > 0) {
                return;
            }
            this.appliancesAccordion();
        } else if (e.isExpanded && [].indexOf.call(this.accordionObj.items, e.item) === 1) {
            if ((e.element as Element).querySelectorAll('.e-accordion').length > 0) {
                return;
            }
            this.accessoriesAccordion();
        } else if (e.isExpanded && [].indexOf.call(this.accordionObj.items, e.item) === 2) {
            if ((e.element as Element).querySelectorAll('.e-accordion').length > 0) {
                return;
            }
            this.fashionAccordion();
        } else if (e.isExpanded && [].indexOf.call(this.accordionObj.items, e.item) === 3) {
            if ((e.element as Element).querySelectorAll('.e-accordion').length > 0) {
                return;
            }
            this.homeAccordion();
        } else if (e.isExpanded && [].indexOf.call(this.accordionObj.items, e.item) === 4) {
            if ((e.element as Element).querySelectorAll('.e-accordion').length > 0) {
                return;
            }
            this.entertainmentAccordion();
        }
    }

    // Expanding Event function for nested Accordion component.
    public nestedExpand(e: ExpandEventArgs): void {
        if (e.isExpanded && [].indexOf.call(this.nestedAccordionObj.items, e.item) === 0) {
            if ((e.element as Element).querySelectorAll('.e-accordion').length > 0) {
                return;
            }
            this.kitchenAccordion();
        } else if (e.isExpanded && [].indexOf.call(this.nestedAccordionObj.items, e.item) === 1) {
            if ((e.element as Element).querySelectorAll('.e-accordion').length > 0) {
                return;
            }
            this.washingAccordian();
        } else if (e.isExpanded && [].indexOf.call(this.nestedAccordionObj.items, e.item) === 2) {
            if ((e.element as Element).querySelectorAll('.e-accordion').length > 0) {
                return;
            }
            this.acAccordion();
        }
    }

    public hamburgerClick(): void {
        this.sidebarObj.show();
        this.accordionObj.refresh();
    }

    public close(): void {
        this.sidebarObj.hide();
    }

    public render() {
        return (
            <div>
                <div className="header">
                    <span id="hamburger" className="e-icons menu default" onClick={this.hamburgerClick}></span>
                    <div className="content">Header content</div>
                </div>
                <SidebarComponent id='default-sidebar' width={this.width} type={this.type} ref={scope => this.sidebarObj = scope}>
                    <div className="title-header">
                        <div style={{display:'inline-block'}}>Menu</div>
                        <span  id="close" className="e-icons" onClick={this.close}></span>
                    </div>
                    <div className="content-area">
                        <AccordionComponent ref={scope => this.accordionObj = scope} expanding={this.expand} clicked={this.clicked}>
                            <AccordionItemsDirective>
                                <AccordionItemDirective header='Appliances' content='<div id="Appliances_Items"></div>' />
                                <AccordionItemDirective header='Accessories' content='<div id="Accessories_Items"></div>' />
                                <AccordionItemDirective header='Fashion' content='<div id="Fashion_Items"></div>' />
                                <AccordionItemDirective header='Home & Living' content='<div id="Home_Living_Items"></div>' />
                                <AccordionItemDirective header='Entertainment' content='<div id="Entertainment_Items"></div>' />
                            </AccordionItemsDirective>
                        </AccordionComponent>
                    </div>
                </SidebarComponent>
                <div>
                    <div className="main-content">Main content</div>
                </div>
            </div>
        );
    }
}
ReactDom.render(<App />,document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ContextMenu</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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.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='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

body {
    margin: 0;
}

.header {
    width: 100%;
    background-color: #7b8cfb;
}

#default-sidebar,
.header .content {
    background-color: #7b8cfb;
    color: white;
    border: none;
}

.header .content {
    font-size: 20px;
    line-height: 50px;
    text-align: center;
}

.main-content {
    text-align: center;
    font-size: 20px;
    padding: 100px 15px;
}

#default-sidebar .close-btn:hover {
    color: rgba(0, 0, 0, .87);
    background-color: #fafafa;
}

#hamburger.menu {
    font-size: 25px;
    cursor: pointer;
    float: left;
    line-height: 50px;
    position: absolute;
    z-index: 1000;
    left: 25px;
    color: white;
}

#hamburger.menu:before {
    content: '\e99a';
}

#close:before {
    content: "\e945";
}

.title-header {
    text-align: center;
    font-size: 18px;
    padding: 15px 15px 35px;
}

.e-sidebar .title-header #close {
    cursor: pointer;
    line-height: 25px;
    float: right;
}

Mobile view

The following example demonstrates the use case of Menu in Mobile mode by using ListView component with hamburger.

Source
Preview
index.tsx
index.html
index.css
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { enableRipple, Animation, AnimationOptions } from '@syncfusion/ej2-base';
import { ListViewComponent, SelectEventArgs } from '@syncfusion/ej2-react-lists';
enableRipple(true);

export default class App extends React.Component<{}, {}> {
    public listObj: ListViewComponent;
    public listViewDisplay: Object = { display: 'none' };
    public closeSpanDisplay: Object = { display: 'none' };

    constructor(props: any) {
        super(props);
        this.onSelect = this.onSelect.bind(this);
        this.onClick = this.onClick.bind(this);
        this.hamburgerClick = this.hamburgerClick.bind(this);
    }

    public dataSource: { [key: string]: Object }[] = [
        {
            text: 'Appliances',
            id: 'list1',
            child: [
            {
                text: 'Kitchen',
                id: 'list1_1',
                child: [
                    { id: 'list1_1_1', text: 'Electric Cookers' },
                    { id: 'list1_1_2', text: 'Coffee Makers' },
                    { id: 'list1_1_3', text: 'Blenders' },
                ]
            },
            {
                text: 'Washing Machine',
                id: 'list1_2',
                child: [
                    { id: 'list1_2_1', text: 'Fully Automatic' },
                    { id: 'list1_2_2', text: 'Semi Automatic' }
                ]
            },
            {
                text: 'Air Conditioners',
                id: 'list1_3',
                child: [
                    { id: 'list1_3_1', text: 'Inverter ACs' },
                    { id: 'list1_3_2', text: 'Split ACs' },
                    { id: 'list1_3_3', text: 'Window ACs' },
                ]
            }]
        },
        {
            text: 'Accessories',
            id: 'list2',
            child: [
            {
                text: 'Mobile',
                id: 'list2_1',
                child: [
                    { id: 'list2_1_1', text: 'Headphones' },
                    { id: 'list2_1_2', text: 'Memory Cards' },
                    { id: 'list2_1_3', text: 'Power Banks' }
                ]
            },
            {
                text: 'Computer',
                id: 'list2_2',
                child: [
                    { id: 'list2_2_1', text: 'Pendrives' },
                    { id: 'list2_2_2', text: 'External Hard Disks' },
                    { id: 'list2_2_3', text: 'Monitors' }
                ]
            }]
        },
        {
            text: 'Fashion',
            id: 'list3',
            child: [
                { id: 'list3_1', text: 'Men' },
                { id: 'list3_2', text: 'Women' }
            ]
        },
        {
            text: 'Home & Living',
            id: 'list4',
            child: [
                { id: 'list4_1', text: 'Furniture' },
                { id: 'list4_2', text: 'Decor' }
        ]
        },
        {
            text: 'Entertainment',
            id: 'list5',
            child: [
                { id: 'list5_1', text: 'Televisions' },
                { id: 'list5_2', text: 'Home Theatres' },
                { id: 'list5_3', text: 'Gaming Laptops' }
            ]
        }
    ];

    public onSelect(e: SelectEventArgs): void {
        if (e.data && !(e.data as { child: object }).child) {
            this.listViewDisplay = { display: 'none' };
            this.closeSpanDisplay = { display: 'none' };
            this.listObj.refresh();
        }
    }

    public onClick(): void {
        this.listViewDisplay = { display: 'none' };
        this.closeSpanDisplay = { display: 'none' };
    }

    public hamburgerClick(): void {
        let animation: Animation = new Animation({ duration: 500 });
        animation.animate(this.listObj.element, {
            name: 'SlideDown',
            begin: (args: AnimationOptions) => {
                this.listViewDisplay = { display: 'block' };
                this.closeSpanDisplay = { display: 'block' };
            }
        });
    }

    public render() {
        return (
            <div className='layoutWrapper'>
                <div className='speaker'>
                    <div className='camera'></div>
                </div>
                <div className='layout'>
                    <div id='container'>
                        <div id='header'>
                            <span id='hamburger' onClick={this.hamburgerClick} className='e-icons menu default'></span>
                            <div className='content'>Header</div>
                        </div>
                        <ListViewComponent id='listview' ref={scope => this.listObj = scope} dataSource={this.dataSource} showHeader={true} headerTitle='Menu' select={this.onSelect}></ListViewComponent>
                        <span id='close' onClick={this.onClick} className='e-icons' style={this.closeSpanDisplay}></span>
                    </div>
                </div>
                <div className='outerButton'> </div>
            </div>
        );
    }
}
ReactDom.render(<App />,document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ContextMenu</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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="index.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='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

.layoutWrapper {
    line-height: initial;
    border: 1px solid black;
    width: 285px;
    height: 505px;
    margin: auto;
    margin-bottom: 15px;
    border-radius: 28px;
    position: relative;
    background-image: linear-gradient(to top, #ffffff, #f5f5f5);
  }
  
  .layoutWrapper .speaker {
    border: 1px solid black;
    border-radius: 5px;
    width: 33.33333333%;
    height: 5px;
    margin: 15px auto 0px auto;
    position: relative;
  }
  
  .layoutWrapper .outerButton {
    width: 30px;
    height: 30px;
    border: 1px solid black;
    border-radius: 50%;
    position: absolute;
    bottom: calc(0% + 10px);
    left: calc(50% - 15px);
  }
  
  .layoutWrapper .camera {
    position: absolute;
    left: calc(-15% - 10px);
    top: -100%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid black;
  }
  
  .layoutWrapper .layout {
    border: 1px solid black;
    margin: 20px 13px 0px 13px;
  }
  
  .layout #container {
    height: 405px;
    background-color: white;
  }
  
  #header {
    width: 100%;
    background-color: #7b8cfb;
  }
  
  .layout .e-listview .e-list-header,
  .layout .e-listview .e-but-back {
    background-color: #7b8cfb;
    color: white;
  }
  
  #header .content {
    background-color: #7b8cfb;
    color: white;
    border: none;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
  }
  
  #hamburger.menu {
    font-size: 25px;
    cursor: pointer;
    float: left;
    line-height: 50px;
    position: absolute;
    z-index: 1000;
    left: 25px;
    color: white;
  }
  
  #hamburger.menu:before {
    content: '\e99a';
  }
  
  #listview {
    position: absolute;
    width: 257px;
    overflow: hidden;
    top: 43px;
    left: 14px;
    z-index: 1000;
  }
  
  #close:before {
    content: "\e945";
  }
  
  #close {
    position: absolute;
    right: 25px;
    color: white;
    top: 60px;
    z-index: 1000;
  }