Search results

Design in React AppBar component

31 Jan 2023 / 6 minutes to read

Spacer

Spacer is used to provide spacing between the AppBar contents which gives additional space to the content layout.

The following example depicts the code to provide spacing between the home and pan buttons in the AppBar:

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<div className='control-container'>
      <AppBarComponent colorMode="Primary">
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-home"></ButtonComponent>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-cut"></ButtonComponent>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-pan"></ButtonComponent>
      </AppBarComponent>
    </div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Carousel</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/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/material.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>
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
  return (
    <div className='control-container'>
      <AppBarComponent colorMode="Primary">
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-home"></ButtonComponent>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-cut"></ButtonComponent>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-pan"></ButtonComponent>
      </AppBarComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

Separator

Separator shows a vertical line to visually group or separate the AppBar contents.

The following example depicts the code to provide a vertical line between a group of buttons in the AppBar.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<div className='control-container'>
      <AppBarComponent colorMode="Primary">
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-cut"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-copy"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-paste"></ButtonComponent>
        <div className="e-appbar-separator"></div>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-bold"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-underline"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-italic"></ButtonComponent>
        <div className="e-appbar-separator"></div>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-align-left"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-align-right"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-align-center"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-justify"></ButtonComponent>
      </AppBarComponent>
    </div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Carousel</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/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/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>
Copied to clipboard
.control-container .e-btn.e-inherit {
	margin: 0 3px;
}
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
  return (
    <div className='control-container'>
      <AppBarComponent colorMode="Primary">
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-cut"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-copy"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-paste"></ButtonComponent>
        <div className="e-appbar-separator"></div>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-bold"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-underline"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-italic"></ButtonComponent>
        <div className="e-appbar-separator"></div>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-align-left"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-align-right"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-align-center"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-justify"></ButtonComponent>
      </AppBarComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

Media Query

Media Query is used to adjusting the AppBar for different screen sizes. Resize the screen to observe the responsive layout of the AppBar.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<div className='control-container'>
      <AppBarComponent colorMode="Primary">
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit">Home</ButtonComponent>
        <ButtonComponent cssClass="e-inherit">About</ButtonComponent>
        <ButtonComponent cssClass="e-inherit">Products</ButtonComponent>
        <ButtonComponent cssClass="e-inherit">Contacts</ButtonComponent>
        <div className="e-appbar-spacer"></div>
        <div className="e-appbar-separator"></div>
        <ButtonComponent cssClass="e-inherit">Login</ButtonComponent>
      </AppBarComponent>
    </div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Carousel</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/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/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>
Copied to clipboard
.control-container .e-btn.e-inherit {
	margin: 0 3px;
}
@media screen and (max-width: 1024px) {
	.control-container .e-appbar {
		flex-flow: row wrap;
		height: auto;
		gap: 8px;
	}
	.control-container {
		width: 350px;
	}
}
@media screen and (max-width: 480px) {
	.control-container {
		width: 200px;
		margin: 0 2px;
	}
}
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
  return (
    <div className='control-container'>
      <AppBarComponent colorMode="Primary">
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit">Home</ButtonComponent>
        <ButtonComponent cssClass="e-inherit">About</ButtonComponent>
        <ButtonComponent cssClass="e-inherit">Products</ButtonComponent>
        <ButtonComponent cssClass="e-inherit">Contacts</ButtonComponent>
        <div className="e-appbar-spacer"></div>
        <div className="e-appbar-separator"></div>
        <ButtonComponent cssClass="e-inherit">Login</ButtonComponent>
      </AppBarComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

Designing AppBar with Menu

AppBar is rendered with a Menu component in its AppBar header area. Menu component’s styles are inherited from the AppBar component using the e-inherit CSS class.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { AppBarComponent, MenuComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    const companyMenuItems = [
        {
            text: 'Company',
            items: [
                { text: 'About Us' },
                { text: 'Customers' },
                { text: 'Blog' },
                { text: 'Careers' }
            ]
        }
    ];
    const productMenuItems = [
        {
            text: 'Products',
            items: [
                { text: 'Developer' },
                { text: 'Analytics' },
                { text: 'Reporting' },
                { text: 'Help Desk' }
            ]
        }
    ];
    const aboutMenuItems = [
        {
            text: 'About Us'
        }
    ];
    const carrerMenuItems = [
        {
            text: 'Carrers'
        }
    ];
    return (<div className='control-container'>
      <AppBarComponent colorMode="Primary">
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
        <MenuComponent cssClass="e-inherit" items={companyMenuItems}></MenuComponent>
        <MenuComponent cssClass="e-inherit" items={productMenuItems}></MenuComponent>
        <MenuComponent cssClass="e-inherit" items={aboutMenuItems}></MenuComponent>
        <MenuComponent cssClass="e-inherit" items={carrerMenuItems}></MenuComponent>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit">Login</ButtonComponent>
      </AppBarComponent>
    </div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Carousel</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/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/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>
Copied to clipboard
.control-container .e-btn.e-inherit {
	margin: 0 3px;
}
Copied to clipboard
import { AppBarComponent, MenuComponent, MenuItemModel } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
  const companyMenuItems: MenuItemModel[] = [
    {
      text: 'Company',
      items: [
        { text: 'About Us' },
        { text: 'Customers' },
        { text: 'Blog' },
        { text: 'Careers' }
      ]
    }
  ];
  const productMenuItems: MenuItemModel[] = [
    {
      text: 'Products',
      items: [
        { text: 'Developer' },
        { text: 'Analytics' },
        { text: 'Reporting' },
        { text: 'Help Desk' }
      ]
    }
  ];
  const aboutMenuItems: MenuItemModel[] = [
    {
      text: 'About Us'
    }
  ];
  const carrerMenuItems: MenuItemModel[] = [
    {
      text: 'Carrers'
    }
  ];
  return (
    <div className='control-container'>
      <AppBarComponent colorMode="Primary">
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
        <MenuComponent cssClass="e-inherit" items={companyMenuItems}></MenuComponent>
        <MenuComponent cssClass="e-inherit" items={productMenuItems}></MenuComponent>
        <MenuComponent cssClass="e-inherit" items={aboutMenuItems}></MenuComponent>
        <MenuComponent cssClass="e-inherit" items={carrerMenuItems}></MenuComponent>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit">Login</ButtonComponent>
      </AppBarComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

Designing AppBar with Buttons

The AppBar is rendered with a Button and DropDownButton component in its AppBar header area. Button and DropDownButton components’ styles are inherited from the AppBar component using the e-inherit CSS class.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    const productDropDownButtonItems = [
        { text: 'Developer' },
        { text: 'Analytics' },
        { text: 'Reporting' },
        { text: 'E-Signature' },
        { text: 'Help Desk' }
    ];
    return (<div className='control-container'>
      <AppBarComponent colorMode="Primary">
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
        <DropDownButtonComponent cssClass="e-inherit" items={productDropDownButtonItems}>Products</DropDownButtonComponent>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit">Login</ButtonComponent>
      </AppBarComponent>
    </div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Carousel</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/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-splitbuttons/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>
Copied to clipboard
.control-container .e-btn.e-inherit {
  margin: 0 3px;
}
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
  const productDropDownButtonItems: ItemModel[] = [
    { text: 'Developer' },
    { text: 'Analytics' },
    { text: 'Reporting' },
    { text: 'E-Signature' },
    { text: 'Help Desk' }
  ];
  return (
    <div className='control-container'>
      <AppBarComponent colorMode="Primary">
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
        <DropDownButtonComponent cssClass="e-inherit" items={productDropDownButtonItems}>Products</DropDownButtonComponent>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit">Login</ButtonComponent>
      </AppBarComponent>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

Designing AppBar with SideBar

The AppBar is rendered with the SideBar component below the AppBar. Click on the menu icon to expand/collapse the Sidebar. In the following sample, the toggle method has been used to show or hide the Sidebar on the AppBar button click.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { AppBarComponent, TreeViewComponent, SidebarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    let sidebarobj;
    const data = [
        {
            nodeId: '01', nodeText: 'Installation',
        },
        {
            nodeId: '02', nodeText: 'Deployment',
        },
        {
            nodeId: '03', nodeText: 'Quick Start',
        },
        {
            nodeId: '04', nodeText: 'Components',
            nodeChild: [
                { nodeId: '04-01', nodeText: 'Calendar' },
                { nodeId: '04-02', nodeText: 'DatePicker' },
                { nodeId: '04-03', nodeText: 'DateTimePicker' },
                { nodeId: '04-04', nodeText: 'DateRangePicker' },
                { nodeId: '04-05', nodeText: 'TimePicker' },
                { nodeId: '04-06', nodeText: 'SideBar' }
            ]
        }
    ];
    const width = '220px';
    const target = '.main-sidebar-content';
    const mediaQuery = '(min-width: 600px)';
    const fields = { dataSource: data, id: 'nodeId', text: 'nodeText', child: 'nodeChild' };
    function toggle() {
        sidebarobj.toggle();
    }
    return (<div className="control-container" id="responsive-wrapper">
      <div id="reswrapper">
        <div>
          <AppBarComponent>
            <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu" onClick={toggle}></ButtonComponent>
            <div className="e-folder">
              <div className="e-folder-name">Navigation Pane</div>
            </div>
          </AppBarComponent>
        </div>
        <SidebarComponent id="sideTree" className="sidebar-treeview" ref={Sidebar => sidebarobj = Sidebar} width={width} target={target} mediaQuery={mediaQuery} isOpen={true}>
          <div className='res-main-menu'>
            <div className="table-content">
              <TextBoxComponent id="resSearch" placeholder="Search..."></TextBoxComponent>
              <p className="main-menu-header">TABLE OF CONTENTS</p>
            </div>
            <div>
              <TreeViewComponent id='mainTree' cssClass="main-treeview" fields={fields} expandOn='Click'/>
            </div>
          </div>
        </SidebarComponent>
        <div className="main-sidebar-content" id="main-text">
          <div className="sidebar-content">
            <div className="sidebar-heading"> Responsive Sidebar with Treeview</div>
            <p className="paragraph-content">
              This is a graphical aid for visualising and categorising the site, in the style of an expandable and collapsable treeview component.
              It auto-expands to display the node(s), if any, corresponding to the currently viewed title, highlighting that node(s)
              and its ancestors. Load-on-demand when expanding nodes is available where supported (most graphical browsers),
              falling back to a full-page reload. MediaWiki-supported caching, aside from squid, has been considered so that
              unnecessary re-downloads of content are avoided where possible. The complete expanded/collapsed state of
              the treeview persists across page views in most situations.
            </p>
          </div>
        </div>
      </div>
    </div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Carousel</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/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-inputs/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>
Copied to clipboard
.e-appbar .e-folder {
	margin:0 5px;
}
#responsive-wrapper.control-section {
    padding: 0;
}
#responsive-wrapper .sidebar-treeview {
    z-index: 20 !important;
}
#responsive-wrapper .main-sidebar-content {
    height: 380px;
}
.sidebar-treeview .res-main-menu .main-menu-header {
    color: #656a70;
    padding: 15px 15px 15px 0;
    font-size: 14px;
    width: 13em;
    margin: 0;
}
#main-text .sidebar-heading {
    font-size: 16px;
}
.sidebar-treeview .table-content {
    padding: 20px 14px;
	height: 8em;
}
#main-text .sidebar-content .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}
#main-text .sidebar-content {
    padding: 15px;
    font-size: 14px;
}
#main-text .paragraph-content {
    padding: 15px 0;
    font-weight: normal;
    font-size: 14px;
}
.e-folder {
    text-align: center;
    font-weight: 500;
    font-size: 16px
}
.e-folder-name {
    margin-top: 1px;
}
.sidebar-treeview .e-treeview .e-icon-collapsible,
.sidebar-treeview .e-treeview .e-icon-expandable {
    float: right;
    margin: 3px;
}
.sidebar-treeview .e-treeview,
.sidebar-treeview .e-treeview .e-ul {
    padding: 0;
    margin: 0;
}
.sidebar-treeview .e-treeview .e-text-content {
    padding-left: 14px;
}
#responsive-wrapper .e-appbar {
    border-bottom: 1px solid #eaeaeae0;
}
.sidebar-treeview {
    border-right: 1px solid #eaeaeae0;
}
Copied to clipboard
import { AppBarComponent, TreeViewComponent, SidebarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
  let sidebarobj: SidebarComponent;
  const data: { [key: string]: Object }[] = [
    {
      nodeId: '01', nodeText: 'Installation',
    },
    {
      nodeId: '02', nodeText: 'Deployment',
    },
    {
      nodeId: '03', nodeText: 'Quick Start',
    },
    {
      nodeId: '04', nodeText: 'Components',
      nodeChild: [
        { nodeId: '04-01', nodeText: 'Calendar' },
        { nodeId: '04-02', nodeText: 'DatePicker' },
        { nodeId: '04-03', nodeText: 'DateTimePicker' },
        { nodeId: '04-04', nodeText: 'DateRangePicker' },
        { nodeId: '04-05', nodeText: 'TimePicker' },
        { nodeId: '04-06', nodeText: 'SideBar' }
      ]
    }
  ];
  const width: string = '220px';
  const target: string = '.main-sidebar-content';
  const mediaQuery: string = '(min-width: 600px)';
  const fields: object = { dataSource: data, id: 'nodeId', text: 'nodeText', child: 'nodeChild' };
  function toggle() {
    sidebarobj.toggle();
  }
  return (
    <div className="control-container" id="responsive-wrapper">
      <div id="reswrapper">
        <div>
          <AppBarComponent>
            <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu" onClick={toggle}></ButtonComponent>
            <div className="e-folder">
              <div className="e-folder-name">Navigation Pane</div>
            </div>
          </AppBarComponent>
        </div>
        <SidebarComponent id="sideTree" className="sidebar-treeview" ref={Sidebar => sidebarobj = Sidebar} width={width} target={target} mediaQuery={mediaQuery} isOpen={true}>
          <div className='res-main-menu'>
            <div className="table-content">
              <TextBoxComponent id="resSearch" placeholder="Search..."></TextBoxComponent>
              <p className="main-menu-header">TABLE OF CONTENTS</p>
            </div>
            <div>
              <TreeViewComponent id='mainTree' cssClass="main-treeview" fields={fields} expandOn='Click' />
            </div>
          </div>
        </SidebarComponent>
        <div className="main-sidebar-content" id="main-text">
          <div className="sidebar-content">
            <div className="sidebar-heading"> Responsive Sidebar with Treeview</div>
            <p className="paragraph-content">
              This is a graphical aid for visualising and categorising the site, in the style of an expandable and collapsable treeview component.
              It auto-expands to display the node(s), if any, corresponding to the currently viewed title, highlighting that node(s)
              and its ancestors. Load-on-demand when expanding nodes is available where supported (most graphical browsers),
              falling back to a full-page reload. MediaWiki-supported caching, aside from squid, has been considered so that
              unnecessary re-downloads of content are avoided where possible. The complete expanded/collapsed state of
              the treeview persists across page views in most situations.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);