Use case scenarios in React Menu component
30 Jan 202324 minutes to read
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.
import { closest, enableRipple } from '@syncfusion/ej2-base';
import { MenuComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
// Menu items definition
let menuItems = [
{
items: [
{
items: [
{ text: 'Electric Cookers' },
{ text: 'Coffee Makers' },
{ text: 'Blenders' },
{ text: 'Microwave Ovens' }
],
text: 'Kitchen'
},
{
items: [
{ text: 'Our Exclusive TVs' },
{ text: 'Smart TVs' },
{ text: 'Big Screen TVs' }
],
text: 'Television'
},
{
text: 'Washing Machine'
},
{
text: 'Refrigerators'
},
{
items: [
{ text: 'Inverter ACs' },
{ text: 'Split ACs' },
{ text: 'Window ACs' },
],
text: 'Air Conditioners'
},
{
text: 'Water Purifiers'
},
{
text: 'Air Purifiers'
},
{
text: 'Chimneys'
},
{
text: 'Inverters'
},
{
text: 'Healthy Living'
},
{
text: 'Vacuum Cleaners'
},
{
text: 'Room Heaters'
},
{
text: 'New Launches'
}
],
text: 'Appliances'
},
{
items: [
{
items: [
{ text: 'Headphones' },
{ text: 'Memory Cards' },
{ text: 'Power Banks' },
{ text: 'Mobile Cases' },
{ text: 'Screen Protectors' }
],
text: 'Mobile'
},
{
text: 'Laptops'
},
{
items: [
{ text: 'Pendrives' },
{ text: 'External Hard Disks' },
{ text: 'Monitors' },
{ text: 'Keyboards' }
],
text: 'Desktop PC'
},
{
items: [
{ text: 'Lens' },
{ text: 'Tripods' }
],
text: 'Camera'
}
],
text: 'Accessories'
},
{
items: [
{
text: 'Men'
},
{
text: 'Women'
}
],
text: 'Fashion'
},
{
items: [
{
text: 'Furniture'
},
{
text: 'Decor'
},
{
text: 'Smart Home Automation'
},
{
text: 'Dining & Serving'
}
],
text: 'Home & Living'
},
{
items: [
{
text: 'Televisions'
},
{
text: 'Home Theatres'
},
{
text: 'Gaming Laptops'
}
],
text: 'Entertainment'
},
{
text: 'Contact Us'
},
{
text: 'Help'
}
];
function onBeforeOpen(args) {
// Restricting sub menu wrapper height
if (args.parentItem.text === 'Appliances') {
closest(args.element, '.e-menu-wrapper').style.height = '230px';
}
}
return (<MenuComponent items={menuItems} cssClass='e-scrollable-menu' enableScrolling={true} beforeOpen={onBeforeOpen}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));import { closest, enableRipple } from '@syncfusion/ej2-base';
import { BeforeOpenCloseMenuEventArgs, MenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
// Menu items definition
let menuItems: MenuItemModel[] = [
{
items: [
{
items: [
{ text: 'Electric Cookers' },
{ text: 'Coffee Makers' },
{ text: 'Blenders' },
{ text: 'Microwave Ovens' }
],
text: 'Kitchen'
},
{
items: [
{ text: 'Our Exclusive TVs' },
{ text: 'Smart TVs' },
{ text: 'Big Screen TVs' }
],
text: 'Television'
},
{
text: 'Washing Machine'
},
{
text: 'Refrigerators'
},
{
items: [
{ text: 'Inverter ACs' },
{ text: 'Split ACs' },
{ text: 'Window ACs' },
],
text: 'Air Conditioners'
},
{
text: 'Water Purifiers'
},
{
text: 'Air Purifiers'
},
{
text: 'Chimneys'
},
{
text: 'Inverters'
},
{
text: 'Healthy Living'
},
{
text: 'Vacuum Cleaners'
},
{
text: 'Room Heaters'
},
{
text: 'New Launches'
}
],
text: 'Appliances'
},
{
items: [
{
items: [
{ text: 'Headphones' },
{ text: 'Memory Cards' },
{ text: 'Power Banks' },
{ text: 'Mobile Cases' },
{ text: 'Screen Protectors' }
],
text: 'Mobile'
},
{
text: 'Laptops'
},
{
items: [
{ text: 'Pendrives' },
{ text: 'External Hard Disks' },
{ text: 'Monitors' },
{ text: 'Keyboards' }
],
text: 'Desktop PC'
},
{
items: [
{ text: 'Lens' },
{ text: 'Tripods' }
],
text: 'Camera'
}
],
text: 'Accessories'
},
{
items: [
{
text: 'Men'
},
{
text: 'Women'
}
],
text: 'Fashion'
},
{
items: [
{
text: 'Furniture'
},
{
text: 'Decor'
},
{
text: 'Smart Home Automation'
},
{
text: 'Dining & Serving'
}
],
text: 'Home & Living'
},
{
items: [
{
text: 'Televisions'
},
{
text: 'Home Theatres'
},
{
text: 'Gaming Laptops'
}
],
text: 'Entertainment'
},
{
text: 'Contact Us'
},
{
text: 'Help'
}
];
function onBeforeOpen(args: BeforeOpenCloseMenuEventArgs) {
// Restricting sub menu wrapper height
if (args.parentItem.text === 'Appliances') {
(closest(args.element, '.e-menu-wrapper') as HTMLElement).style.height = '230px';
}
}
return (
<MenuComponent items={menuItems} cssClass='e-scrollable-menu' enableScrolling={true} beforeOpen={onBeforeOpen}/>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));Menu in toolbar
The following example demonstrates how to integrate Menu with Toolbar component.
import { enableRipple } from '@syncfusion/ej2-base';
import { ItemDirective, ItemsDirective, MenuComponent, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
let tbObj;
// Menu items definition
let data = [
{
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' }
];
let menuFields = {
children: ['subItems', 'options'],
text: ['header', 'text', 'value']
};
let animation = { effect: 'None' };
function menuTemplate() {
return (<MenuComponent id="menu" items={data} fields={menuFields} animationSettings={animation}/>);
}
function onCreated() {
tbObj.refreshOverflow();
}
return (<div className="toolbar-menu-control">
<ToolbarComponent id="toolbar" created={onCreated} ref={(scope) => { tbObj = scope; }}>
<ItemsDirective>
<ItemDirective template={menuTemplate}/>
<ItemDirective prefixIcon='em-icons e-shopping-cart' align='Right'/>
</ItemsDirective>
</ToolbarComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));import { enableRipple } from '@syncfusion/ej2-base';
import { FieldSettingsModel, ItemDirective, ItemsDirective, MenuComponent, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
let tbObj: ToolbarComponent;
// Menu items definition
let data: Array<{[key: string]: any }> = [
{
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' }
];
let menuFields: FieldSettingsModel = {
children: ['subItems', 'options'],
text: ['header', 'text', 'value']
};
let animation: any = { effect: 'None' };
function menuTemplate(): JSX.Element {
return (
<MenuComponent id="menu" items={data} fields={menuFields} animationSettings={animation} />
);
}
function onCreated(): void {
tbObj.refreshOverflow();
}
return (
<div className="toolbar-menu-control">
<ToolbarComponent id="toolbar" created={onCreated} ref={(scope) => { tbObj = scope as ToolbarComponent; }} >
<ItemsDirective>
<ItemDirective template={menuTemplate} />
<ItemDirective prefixIcon='em-icons e-shopping-cart' align='Right' />
</ItemsDirective>
</ToolbarComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));Hamburger menu
The following example demonstrates the use case of menu with Accordion component integrated in SideBar.
import { enableRipple } from '@syncfusion/ej2-base';
import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective, SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
let sidebarObj;
let accordionObj;
let nestedAccordionObj;
let width = '200px';
let type = 'Over';
function clicked(e) {
const target = (e.originalEvent).target;
if (!e.item && !(target.closest('.e-acrdn-item')).getElementsByClassName('e-tgl-collapse-icon').length) {
sidebarObj.hide();
}
}
function appliancesAccordion() {
return ReactDom.render(
<AccordionComponent ref={scope => nestedAccordionObj = scope} expanding={nestedExpand} clicked={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"));
}
function kitchenAccordion() {
return ReactDom.render(
<AccordionComponent clicked={clicked}>
<AccordionItemsDirective>
<AccordionItemDirective header='Electric Cookers' />
<AccordionItemDirective header='Coffee Makers' />
<AccordionItemDirective header='Blenders' />
</AccordionItemsDirective>
</AccordionComponent>,
document.getElementById("Appliances_Kitchen_Items"));
}
function acAccordion() {
return ReactDom.render(
<AccordionComponent clicked={clicked}>
<AccordionItemsDirective>
<AccordionItemDirective header='Inverter ACs' />
<AccordionItemDirective header='Split ACs' />
<AccordionItemDirective header='Window ACs' />
</AccordionItemsDirective>
</AccordionComponent>,
document.getElementById("Appliances_Conditioners_Items"));
}
function washingAccordian() {
return ReactDom.render(
<AccordionComponent clicked={clicked}>
<AccordionItemsDirective>
<AccordionItemDirective header='Fully Automatic' />
<AccordionItemDirective header='Semi Automatic' />
</AccordionItemsDirective>
</AccordionComponent>,
document.getElementById("Appliances_Washing_Items"));
}
function accessoriesAccordion() {
return ReactDom.render(
<AccordionComponent clicked={clicked}>
<AccordionItemsDirective>
<AccordionItemDirective header='Mobile' />
<AccordionItemDirective header='Computer' />
</AccordionItemsDirective>
</AccordionComponent>,
document.getElementById("Accessories_Items"));
}
function homeAccordion() {
return ReactDom.render(
<AccordionComponent clicked={clicked}>
<AccordionItemsDirective>
<AccordionItemDirective header='Furniture' />
<AccordionItemDirective header='Decor' />
</AccordionItemsDirective>
</AccordionComponent>,
document.getElementById("Home_Living_Items"));
}
function fashionAccordion() {
return ReactDom.render(
<AccordionComponent clicked={clicked}>
<AccordionItemsDirective>
<AccordionItemDirective header='Men' />
<AccordionItemDirective header='Women' />
</AccordionItemsDirective>
</AccordionComponent>,
document.getElementById("Fashion_Items"));
}
function entertainmentAccordion() {
return ReactDom.render(
<AccordionComponent clicked={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.
function expand(e) {
if (e.isExpanded && [].indexOf.call(accordionObj.items, e.item) === 0) {
if ((e.element).querySelectorAll('.e-accordion').length > 0) {
return;
}
appliancesAccordion();
} else if (e.isExpanded && [].indexOf.call(accordionObj.items, e.item) === 1) {
if ((e.element).querySelectorAll('.e-accordion').length > 0) {
return;
}
accessoriesAccordion();
} else if (e.isExpanded && [].indexOf.call(accordionObj.items, e.item) === 2) {
if ((e.element).querySelectorAll('.e-accordion').length > 0) {
return;
}
fashionAccordion();
} else if (e.isExpanded && [].indexOf.call(accordionObj.items, e.item) === 3) {
if ((e.element).querySelectorAll('.e-accordion').length > 0) {
return;
}
homeAccordion();
} else if (e.isExpanded && [].indexOf.call(accordionObj.items, e.item) === 4) {
if ((e.element).querySelectorAll('.e-accordion').length > 0) {
return;
}
entertainmentAccordion();
}
}
// Expanding Event function for nested Accordion component.
function nestedExpand(e) {
if (e.isExpanded && [].indexOf.call(nestedAccordionObj.items, e.item) === 0) {
if ((e.element).querySelectorAll('.e-accordion').length > 0) {
return;
}
kitchenAccordion();
} else if (e.isExpanded && [].indexOf.call(nestedAccordionObj.items, e.item) === 1) {
if ((e.element).querySelectorAll('.e-accordion').length > 0) {
return;
}
washingAccordian();
} else if (e.isExpanded && [].indexOf.call(nestedAccordionObj.items, e.item) === 2) {
if ((e.element).querySelectorAll('.e-accordion').length > 0) {
return;
}
acAccordion();
}
}
function hamburgerClick() {
sidebarObj.show();
accordionObj.refresh();
}
function close() {
sidebarObj.hide();
}
return (
<div>
<div className="header">
<span id="hamburger" className="e-icons menu default" onClick={hamburgerClick}/>
<div className="content">Header content</div>
</div>
<SidebarComponent id='default-sidebar' width={width} type={type} ref={scope => sidebarObj = scope}>
<div className="title-header">
<div style={{display:'inline-block'}}>Menu</div>
<span id="close" className="e-icons" onClick={close}/>
</div>
<div className="content-area">
<AccordionComponent ref={scope => accordionObj = scope} expanding={expand} clicked={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'));import { enableRipple } from '@syncfusion/ej2-base';
import { AccordionClickArgs, AccordionComponent, AccordionItemDirective, AccordionItemsDirective, ExpandEventArgs, SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
let sidebarObj: SidebarComponent;
let accordionObj: AccordionComponent;
let nestedAccordionObj: AccordionComponent;
let width: string = '200px';
let type: SidebarType = 'Over';
function clicked(e: AccordionClickArgs): void {
const target = (e.originalEvent as Event).target as HTMLElement;
if (!e.item && !(target.closest('.e-acrdn-item') as HTMLElement).getElementsByClassName('e-tgl-collapse-icon').length) {
sidebarObj.hide();
}
}
function appliancesAccordion(): void {
return ReactDom.render(
<AccordionComponent ref={scope => nestedAccordionObj = scope as AccordionComponent} expanding={nestedExpand} clicked={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"));
}
function kitchenAccordion(): void {
return ReactDom.render(
<AccordionComponent clicked={clicked}>
<AccordionItemsDirective>
<AccordionItemDirective header='Electric Cookers' />
<AccordionItemDirective header='Coffee Makers' />
<AccordionItemDirective header='Blenders' />
</AccordionItemsDirective>
</AccordionComponent>,
document.getElementById("Appliances_Kitchen_Items"));
}
function acAccordion(): void {
return ReactDom.render(
<AccordionComponent clicked={clicked}>
<AccordionItemsDirective>
<AccordionItemDirective header='Inverter ACs' />
<AccordionItemDirective header='Split ACs' />
<AccordionItemDirective header='Window ACs' />
</AccordionItemsDirective>
</AccordionComponent>,
document.getElementById("Appliances_Conditioners_Items"));
}
function washingAccordian(): void {
return ReactDom.render(
<AccordionComponent clicked={clicked}>
<AccordionItemsDirective>
<AccordionItemDirective header='Fully Automatic' />
<AccordionItemDirective header='Semi Automatic' />
</AccordionItemsDirective>
</AccordionComponent>,
document.getElementById("Appliances_Washing_Items"));
}
function accessoriesAccordion(): void {
return ReactDom.render(
<AccordionComponent clicked={clicked}>
<AccordionItemsDirective>
<AccordionItemDirective header='Mobile' />
<AccordionItemDirective header='Computer' />
</AccordionItemsDirective>
</AccordionComponent>,
document.getElementById("Accessories_Items"));
}
function homeAccordion(): void {
return ReactDom.render(
<AccordionComponent clicked={clicked}>
<AccordionItemsDirective>
<AccordionItemDirective header='Furniture' />
<AccordionItemDirective header='Decor' />
</AccordionItemsDirective>
</AccordionComponent>,
document.getElementById("Home_Living_Items"));
}
function fashionAccordion(): void {
return ReactDom.render(
<AccordionComponent clicked={clicked}>
<AccordionItemsDirective>
<AccordionItemDirective header='Men' />
<AccordionItemDirective header='Women' />
</AccordionItemsDirective>
</AccordionComponent>,
document.getElementById("Fashion_Items"));
}
function entertainmentAccordion(): void {
return ReactDom.render(
<AccordionComponent clicked={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.
function expand(e: ExpandEventArgs): void {
if (e.isExpanded && [].indexOf.call(accordionObj.items, e.item) === 0) {
if ((e.element as Element).querySelectorAll('.e-accordion').length > 0) {
return;
}
appliancesAccordion();
} else if (e.isExpanded && [].indexOf.call(accordionObj.items, e.item) === 1) {
if ((e.element as Element).querySelectorAll('.e-accordion').length > 0) {
return;
}
accessoriesAccordion();
} else if (e.isExpanded && [].indexOf.call(accordionObj.items, e.item) === 2) {
if ((e.element as Element).querySelectorAll('.e-accordion').length > 0) {
return;
}
fashionAccordion();
} else if (e.isExpanded && [].indexOf.call(accordionObj.items, e.item) === 3) {
if ((e.element as Element).querySelectorAll('.e-accordion').length > 0) {
return;
}
homeAccordion();
} else if (e.isExpanded && [].indexOf.call(accordionObj.items, e.item) === 4) {
if ((e.element as Element).querySelectorAll('.e-accordion').length > 0) {
return;
}
entertainmentAccordion();
}
}
// Expanding Event function for nested Accordion component.
function nestedExpand(e: ExpandEventArgs): void {
if (e.isExpanded && [].indexOf.call(nestedAccordionObj.items, e.item) === 0) {
if ((e.element as Element).querySelectorAll('.e-accordion').length > 0) {
return;
}
kitchenAccordion();
} else if (e.isExpanded && [].indexOf.call(nestedAccordionObj.items, e.item) === 1) {
if ((e.element as Element).querySelectorAll('.e-accordion').length > 0) {
return;
}
washingAccordian();
} else if (e.isExpanded && [].indexOf.call(nestedAccordionObj.items, e.item) === 2) {
if ((e.element as Element).querySelectorAll('.e-accordion').length > 0) {
return;
}
acAccordion();
}
}
function hamburgerClick(): void {
sidebarObj.show();
accordionObj.refresh();
}
function close(): void {
sidebarObj.hide();
}
return (
<div>
<div className="header">
<span id="hamburger" className="e-icons menu default" onClick={hamburgerClick}/>
<div className="content">Header content</div>
</div>
<SidebarComponent id='default-sidebar' width={width} type={type} ref={scope => sidebarObj = scope as SidebarComponent}>
<div className="title-header">
<div style={{display:'inline-block'}}>Menu</div>
<span id="close" className="e-icons" onClick={close}/>
</div>
<div className="content-area">
<AccordionComponent ref={scope => accordionObj = scope as AccordionComponent} expanding={expand} clicked={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'));Mobile view
The following example demonstrates the use case of Menu in Mobile mode by using ListView component with hamburger.
import { Animation, enableRipple } from '@syncfusion/ej2-base';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
let listObj;
let listViewDisplay = { display: 'none' };
let closeSpanDisplay = { display: 'none' };
let dataSource = [
{
child: [
{
child: [
{ id: 'list1_1_1', text: 'Electric Cookers' },
{ id: 'list1_1_2', text: 'Coffee Makers' },
{ id: 'list1_1_3', text: 'Blenders' },
],
id: 'list1_1',
text: 'Kitchen'
},
{
child: [
{ id: 'list1_2_1', text: 'Fully Automatic' },
{ id: 'list1_2_2', text: 'Semi Automatic' }
],
id: 'list1_2',
text: 'Washing Machine'
},
{
child: [
{ id: 'list1_3_1', text: 'Inverter ACs' },
{ id: 'list1_3_2', text: 'Split ACs' },
{ id: 'list1_3_3', text: 'Window ACs' },
],
id: 'list1_3',
text: 'Air Conditioners'
}
],
id: 'list1',
text: 'Appliances'
},
{
child: [
{
child: [
{ id: 'list2_1_1', text: 'Headphones' },
{ id: 'list2_1_2', text: 'Memory Cards' },
{ id: 'list2_1_3', text: 'Power Banks' }
],
id: 'list2_1',
text: 'Mobile'
},
{
child: [
{ id: 'list2_2_1', text: 'Pendrives' },
{ id: 'list2_2_2', text: 'External Hard Disks' },
{ id: 'list2_2_3', text: 'Monitors' }
],
id: 'list2_2',
text: 'Computer'
}
],
id: 'list2',
text: 'Accessories'
},
{
child: [
{ id: 'list3_1', text: 'Men' },
{ id: 'list3_2', text: 'Women' }
],
id: 'list3',
text: 'Fashion'
},
{
child: [
{ id: 'list4_1', text: 'Furniture' },
{ id: 'list4_2', text: 'Decor' }
],
id: 'list4',
text: 'Home & Living'
},
{
child: [
{ id: 'list5_1', text: 'Televisions' },
{ id: 'list5_2', text: 'Home Theatres' },
{ id: 'list5_3', text: 'Gaming Laptops' }
],
id: 'list5',
text: 'Entertainment'
}
];
function onSelect(e) {
if (e.data && !e.data.child) {
listViewDisplay = { display: 'none' };
closeSpanDisplay = { display: 'none' };
listObj.refresh();
}
}
function onClick() {
listViewDisplay = { display: 'none' };
closeSpanDisplay = { display: 'none' };
}
function hamburgerClick() {
const animation = new Animation({ duration: 500 });
animation.animate(listObj.element, {
begin: () => {
listViewDisplay = { display: 'block' };
closeSpanDisplay = { display: 'block' };
},
name: 'SlideDown'
});
}
return (<div className='layoutWrapper'>
<div className='speaker'>
<div className='camera'/>
</div>
<div className='layout'>
<div id='container'>
<div id='header'>
<span id='hamburger' onClick={hamburgerClick} className='e-icons menu default'/>
<div className='content'>Header</div>
</div>
<ListViewComponent id='listview' ref={scope => listObj = scope} dataSource={dataSource} showHeader={true} headerTitle='Menu' select={onSelect}/>
<span id='close' onClick={onClick} className='e-icons' style={closeSpanDisplay}/>
</div>
</div>
<div className='outerButton'/>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));import { Animation, enableRipple } from '@syncfusion/ej2-base';
import { ListViewComponent, SelectEventArgs } from '@syncfusion/ej2-react-lists';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
let listObj: ListViewComponent;
let listViewDisplay: any = { display: 'none' };
let closeSpanDisplay: any = { display: 'none' };
let dataSource: Array<{ [key: string]: any }> = [
{
child: [
{
child: [
{ id: 'list1_1_1', text: 'Electric Cookers' },
{ id: 'list1_1_2', text: 'Coffee Makers' },
{ id: 'list1_1_3', text: 'Blenders' },
],
id: 'list1_1',
text: 'Kitchen'
},
{
child: [
{ id: 'list1_2_1', text: 'Fully Automatic' },
{ id: 'list1_2_2', text: 'Semi Automatic' }
],
id: 'list1_2',
text: 'Washing Machine'
},
{
child: [
{ id: 'list1_3_1', text: 'Inverter ACs' },
{ id: 'list1_3_2', text: 'Split ACs' },
{ id: 'list1_3_3', text: 'Window ACs' },
],
id: 'list1_3',
text: 'Air Conditioners'
}],
id: 'list1',
text: 'Appliances'
},
{
child: [
{
child: [
{ id: 'list2_1_1', text: 'Headphones' },
{ id: 'list2_1_2', text: 'Memory Cards' },
{ id: 'list2_1_3', text: 'Power Banks' }
],
id: 'list2_1',
text: 'Mobile'
},
{
child: [
{ id: 'list2_2_1', text: 'Pendrives' },
{ id: 'list2_2_2', text: 'External Hard Disks' },
{ id: 'list2_2_3', text: 'Monitors' }
],
id: 'list2_2',
text: 'Computer'
}],
id: 'list2',
text: 'Accessories'
},
{
child: [
{ id: 'list3_1', text: 'Men' },
{ id: 'list3_2', text: 'Women' }
],
id: 'list3',
text: 'Fashion'
},
{
child: [
{ id: 'list4_1', text: 'Furniture' },
{ id: 'list4_2', text: 'Decor' }
],
id: 'list4',
text: 'Home & Living'
},
{
child: [
{ id: 'list5_1', text: 'Televisions' },
{ id: 'list5_2', text: 'Home Theatres' },
{ id: 'list5_3', text: 'Gaming Laptops' }
],
id: 'list5',
text: 'Entertainment'
}
];
function onSelect(e: SelectEventArgs): void {
if (e.data && !(e.data as { child: object }).child) {
listViewDisplay = { display: 'none' };
closeSpanDisplay = { display: 'none' };
listObj.refresh();
}
}
function onClick(): void {
listViewDisplay = { display: 'none' };
closeSpanDisplay = { display: 'none' };
}
function hamburgerClick(): void {
const animation = new Animation({ duration: 500 });
animation.animate(listObj.element, {
begin: () => {
listViewDisplay = { display: 'block' };
closeSpanDisplay = { display: 'block' };
},
name: 'SlideDown'
});
}
return (
<div className='layoutWrapper'>
<div className='speaker'>
<div className='camera'/>
</div>
<div className='layout'>
<div id='container'>
<div id='header'>
<span id='hamburger' onClick={hamburgerClick} className='e-icons menu default'/>
<div className='content'>Header</div>
</div>
<ListViewComponent id='listview' ref={scope => listObj = scope as ListViewComponent} dataSource={dataSource} showHeader={true} headerTitle='Menu' select={onSelect}/>
<span id='close' onClick={onClick} className='e-icons' style={closeSpanDisplay}/>
</div>
</div>
<div className='outerButton'/>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));