Search results

Fixed Sidebar in React Sidebar component

15 Oct 2021 / 1 minute to read

The Sidebar does not require any specific style to make it as a fixed one. By default, the Sidebar position will be in fixed state. The following example demonstrates that the Sidebar is rendered with a fixed position. The position of the Sidebar will not change when scrolling the main content area.

Source
Preview
App.tsx
index.tsx
index.html
style.css
App.jsx
index.jsx
Copied to clipboard
import * as React from 'react';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
export default class App extends React.Component<{}, {}> {
    public sidebarobj: SidebarComponent;
    private width: string = '260px';
    constructor(props: any) {
        super(props);
        this.toggleClick = this.toggleClick.bind(this);
        this.onCreate = this.onCreate.bind(this);
    }
    public toggleClick():void {
        this.sidebarobj.toggle();
    }
    public onCreate(): void {
        this.sidebarobj.element.style.visibility = '';
    }
    render() {
        return (
            // Sidebar Element Declaration
            <div className="control-section">
                <SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarobj = Sidebar as SidebarComponent}  style={{visibility:"hidden"}} width={this.width} created={this.onCreate}>
                    <div className="sidebar-header header-cover" style={{backgroundColor:'#0378d5'}}>
                        <div className="image-container">
                            <div className="sidebar-image">
                            </div>
                        </div>
                        <div style={{padding:'0 0 5px 0'}}>
                            <a className="sidebar-brand" href="#settings-dropdown">
                                john.doe@gmail.com
                            </a>
                            <span className="sf-icon-down icon"></span>
                        </div>
                    </div>
                    <ul className="nav sidebar-nav">
                        <li>
                            <a href="#">
                                <i className="sf-icon-sidebar sf-icon-file"></i>
                                <span className="e-text"> Inbox</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i className="sf-icon-sidebar sf-icon-starred"></i>
                                <span className="e-text"> Starred</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i className="sf-icon-sidebar sf-icon-recent"></i>
                                <span className="e-text">Snoozed</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i className="sf-icon-sidebar sf-icon-important"></i>
                                <span className="e-text">Important</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i className="sf-icon-sidebar sf-icon-offline"></i>
                                <span className="e-text"> Sent</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i className="sf-icon-sidebar sf-icon-backup"></i>
                                <span className="e-text"> Draft</span>
                            </a>
                        </li>
                    </ul>
                </SidebarComponent>
                {/* End of Sidebar Declaration */}
                {/* Main Content Declaration */}
                <div>
                    <div className="content">
                        <div id="left">
                            <span id="hamburger" onClick={this.toggleClick}className="e-icons menu default"></span>
                        </div>
                        <div id="center">
                            <span>Inbox</span>
                        </div>
                        <div id="right">
                            <span className="sf-icon-search"></span>
                        </div>
                    </div>
                    <div>
                        <div className="e-control e-listview e-list-template e-touch">
                            <ul className="e-list-parent e-ul ">
                                <li className="e-list-group-item e-level-1" role="group" data-uid="group-list-item-Today"
                                    >
                                    <div className="e-text-content" role="presentation"><span  style={{width: '100%', marginLeft: '2%', marginTop: '-2%'}}>Today</span></div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">Albert Lives</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Opening for Sales Manager</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Hello Uta Morgan,</span></span>
                                    </div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">
                                                Ila Russo</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Business dinner invitation
                                        </span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Hello Jelani Moreno,</span></span>
                                    </div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">
                                                Garth Owen</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Application for Job Title</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Hello Ila Russo,</span></span>
                                    </div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">Ursula Patterson</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Hello Kerry Best,</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Programmer Position Application</span></span>
                                    </div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">
                                                Nichole Rivas</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Annual Conference</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Hi Igor Mccoy,</span></span>
                                    </div>
                                </li>
                                <li>
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">
                                                Nichole Rivas</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Annual Conference</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Hi Igor Mccoy,</span></span>
                                    </div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">
                                                Nichole Rivas</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Annual Conference</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Hi Igor Mccoy,</span></span>
                                    </div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">
                                                Nichole Rivas</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Annual Conference</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Hi Igor Mccoy,</span></span>
                                    </div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">
                                                Nichole Rivas</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Annual Conference</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Hi Igor Mccoy,</span></span>
                                    </div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">Ursula Patterson</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Hello Kerry Best,</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Programmer Position Application</span></span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!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-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-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-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-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>
Copied to clipboard
.control-section {        
  overflow: hidden;
}

.e-listview .e-list-parent {
  margin: 0 ;
  padding: 15px 0 15px 0 ;
}

.e-listview .e-list-group-item {
  background-color: #ffffff ;
}

.e-second-heading {
  color: rgba(0, 0, 0, 0.64) ;
  display: block;
  font-size: 15px ;
  font-weight: 500 ;
}

.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
  top: 1.5666em;
  border-radius: 50%;
  border-color: #4f4b4b ;
  border: 1px solid #BADA55;
}

.e-listview {
  overflow: initial;
}


.sf-icon-profile:before {
  float: right;
  content: '\e717';
  font-size: 25px;
  padding-top:8px;
  padding-right: 4px;
  padding-bottom: 3px;
  padding-left: 3px;
}

.e-avatar {
  background: none;
  color: #000;
}

.e-today {
  height: 50px;
  padding: 15px;
}

.e-today span {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  font-size: 15px;
  font-weight: 600;
  height: 36px;
}

.content {
  height: 47px;
  background: #0378d5;
  width: 100%;
}

#left {
  float: left;
  width: 30px;
  height: 47px;
}

#center {
  display: inline-block;
  margin: 0 auto;
  width: 0px;
  height: 47px;
  padding: 9px 0 12px 0;
  font-size: 18px;
  color: #ffff;
  float: left;
  text-align: center;
  padding-left: 40px;
}

#right {
  float: right;
  width: 28px;
  height: 47px;
  padding: 16px 0 0 0;
  color: #ffff;

}

.sf-icon-file:before {
  content: '\e701';

}

.sf-icon-share:before {
  content: '\e70b';
}


.sf-icon-starred:before {
  content: '\e708';
}

.sf-icon-star:before {
  content: '\e707';
  font-size: 15px;
  color: #000;
  float: right;

}

.sf-icon-recent:before {
  content: '\e70c';
}

.sf-icon-important:before {
  content: '\e713';
}

.e-sidebar.e-left {
  border: none;
}

.sf-icon-offline:before {
  content: '\e714';
  font-size: 30px;
}

.sf-icon-backup:before {
  content: '\e712';

}

.sf-icon-down:before {
  content: '\e709';

}

.sf-icon-search:before {
  content: '\e711';
  font-size: 18px;

}

.sf-icon-sidebar {
  content: '\e701';
  color: #000000;
  display: inline-block;
  margin-right: 16px;
  width: 40px;
  text-align: left;
  font-size: 20px ;
  vertical-align: middle;
}

ul.nav.sidebar-nav {
  padding: 5px 0 5px 0;
  margin: 0px;
  max-height:200px;
  overflow-y: auto;
}

.sidebar-nav {
  list-style: none;
  padding: 5px 0 5px 0;
}

a.sidebar-brand {
  color: #ffffff;
  font-size: 15px;
  text-decoration: none;
}

.nav.sidebar-nav li:hover {
  text-decoration: none;
  background-color: #eee;
}

span.sf-icon-down.icon {
  font-size: 12px;
}

.sidebar-nav li a {
  position: relative;
  cursor: pointer;
  user-select: none;
  display: block;
  height: 48px;
  line-height: 48px;
  width:241px;
  padding: 0 56px 0 20px;
  text-decoration: none;
  font-weight: 500;
  overflow: hidden;
  font-size: 14px;

}

/* sample-level styles */
.image-container {
  padding: 18px 0 0 16px;
}

.sidebar-image {
  background: url(https://ej2.syncfusion.com/showcase/angular/expensetracker/assets/images/user.svg) no-repeat scroll 0 0 transparent;
  background-position-x: left;
  height: 85px;
  width: 100%;
  background-size: 85px;
  /* margin-left: 20px; */
}

.sidebar-brand {
  height: 48px;
  line-height: 48px;
  padding-left: 20px;
  padding-right: 40px;
  text-decoration: none;
  font-weight: 500;
  overflow: hidden;
  display: inline-flex;
}

.sidebar-image img {
  width: 54px;
  height: 54px;
  margin: 16px;
  border-radius: 50%;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#default-sidebar {
  color: #ffffff;
}

/* sample-level styles */

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

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

#hamburger.menu.e-rtl {
  position: relative;
  float: right;
}

@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;
}

@font-face {
  font-family: 'e-sb-icons';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,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AAATMzUjBSElByclMzUjNTM1IwUXEQE3JwUBIQLIyAESAs/+/mVm/ezIyMjIAvfx/Sry8gFoAWf9MQGBIXycUVEsIUwhnZMBU/6tk8D3AR8ABAAAAAADzgPqAA8AIAAvADsAACUjJzcjFwcjAwYCFyEuAQcBHgEXPgE3LgEnNDY1JiMOASUzMhYdARQGKwEVLwE3FQceARc+ATcuAScOAQJeJjsvZDI2Lj+tjgMDryP1EP5EA5Rvb5MFY38CAxMTb5QCA3QKDAwKdzs4d5ACWUFDWAECWUFDWCuHV1SKARAm/v4Rv4sEASJxkwICkm8FgmAJEAcDA5OiDAooCgwpLChMIy9DVwICWUFDWAICWAAAAgAAAAAD3QPqAA0AGQAANxUhNS4BJw4BIiYnDgETHgEXPgE3LgEnDgEQA84DknEvc39zL3GS1AOac3SaAwOadHOahIKCdaMRJCgoJBGjAeF0mgMDmnR0mgICmgAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAoAAQABAAAAAAACAAcACwABAAAAAAADAAoAEgABAAAAAAAEAAoAHAABAAAAAAAFAAsAJgABAAAAAAAGAAoAMQABAAAAAAAKACwAOwABAAAAAAALABIAZwADAAEECQAAAAIAeQADAAEECQABABQAewADAAEECQACAA4AjwADAAEECQADABQAnQADAAEECQAEABQAsQADAAEECQAFABYAxQADAAEECQAGABQA2wADAAEECQAKAFgA7wADAAEECQALACQBRyBlLXNiLWljb25zUmVndWxhcmUtc2ItaWNvbnNlLXNiLWljb25zVmVyc2lvbiAxLjBlLXNiLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAC0AcwBiAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAZQAtAHMAYgAtAGkAYwBvAG4AcwBlAC0AcwBiAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAC0AcwBiAC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPARABEQESARMBFAEVARYBFwEYARkBGgEbAAltYWlsLXNlbmQLaW5ib3gtMDItd2YLaW5ib3gtMDEtd2YFaW5ib3gPb3Blbi1tZXNzYWdlLXdmDGFycm93aGVhZC0wMRBhcnJvd2hlYWQtdG9wLXdmCXJhdGluZy13ZgtyYXRpbmctLS0wMxFhcnJvd2hlYWQtZG93bi0wMQlmb2xkZXItMDMIdXNlcnMtd2YIY2xvY2stMDIGdXBsb2FkCG9uZWRyaXZlEWNsb3VkLWRvd25sb2FkLXdmD3dvcmstb2ZmbGluZS13ZglzZWFyY2gtd2YPbm90ZS1tZW1vLTAxLXdmDGltcG9ydGFudC13ZglzZW50LW1haWwIaW5ib3gtd2YLbWFpbC0tLXNlbnQJdXNlci1iYWNrDHVzZXItcHJvZmlsZQAAAAA=) format('truetype');
  font-weight: normal;
  font-style: normal;
}

[class^="sf-icon-"],
[class*=" sf-icon-"] {
  font-family: 'e-sb-icons' ;
  speak: none;
  font-size: 55px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

span.e-text {
  color: #000000;
}

.title {
  text-align: center;
  font-size: 20px;
  padding: 15px;
}

.sub-title {
  text-align: center;
  font-size: 16px;
  padding: 10px;
}

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

[class^="sf-icon-"],
[class*=" sf-icon-"] {
  font-family: 'e-sb-icons' ;
  font-size: 15px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



/* end of newTab support */
li.e-list-item {
  border-bottom: 0.5px solid #80808070 !important;
  cursor: pointer;
}

.e-content-animation{
  border-bottom: 0.5px solid #80808070;
  height: 477px;
}
Copied to clipboard
import * as React from 'react';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.width = '260px';
        this.toggleClick = this.toggleClick.bind(this);
        this.onCreate = this.onCreate.bind(this);
    }
    toggleClick() {
        this.sidebarobj.toggle();
    }
    onCreate() {
        this.sidebarobj.element.style.visibility = '';
    }
    render() {
        return (
        // Sidebar Element Declaration
        <div className="control-section">
                <SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarobj = Sidebar} style={{ visibility: "hidden" }} width={this.width} created={this.onCreate}>
                    <div className="sidebar-header header-cover" style={{ backgroundColor: '#0378d5' }}>
                        <div className="image-container">
                            <div className="sidebar-image">
                            </div>
                        </div>
                        <div style={{ padding: '0 0 5px 0' }}>
                            <a className="sidebar-brand" href="#settings-dropdown">
                                john.doe@gmail.com
                            </a>
                            <span className="sf-icon-down icon"></span>
                        </div>
                    </div>
                    <ul className="nav sidebar-nav">
                        <li>
                            <a href="#">
                                <i className="sf-icon-sidebar sf-icon-file"></i>
                                <span className="e-text"> Inbox</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i className="sf-icon-sidebar sf-icon-starred"></i>
                                <span className="e-text"> Starred</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i className="sf-icon-sidebar sf-icon-recent"></i>
                                <span className="e-text">Snoozed</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i className="sf-icon-sidebar sf-icon-important"></i>
                                <span className="e-text">Important</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i className="sf-icon-sidebar sf-icon-offline"></i>
                                <span className="e-text"> Sent</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i className="sf-icon-sidebar sf-icon-backup"></i>
                                <span className="e-text"> Draft</span>
                            </a>
                        </li>
                    </ul>
                </SidebarComponent>
                
                
                <div>
                    <div className="content">
                        <div id="left">
                            <span id="hamburger" onClick={this.toggleClick} className="e-icons menu default"></span>
                        </div>
                        <div id="center">
                            <span>Inbox</span>
                        </div>
                        <div id="right">
                            <span className="sf-icon-search"></span>
                        </div>
                    </div>
                    <div>
                        <div className="e-control e-listview e-list-template e-touch">
                            <ul className="e-list-parent e-ul ">
                                <li className="e-list-group-item e-level-1" role="group" data-uid="group-list-item-Today">
                                    <div className="e-text-content" role="presentation"><span style={{ width: '100%', marginLeft: '2%', marginTop: '-2%' }}>Today</span></div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">Albert Lives</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Opening for Sales Manager</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Hello Uta Morgan,</span></span>
                                    </div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">
                                                Ila Russo</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Business dinner invitation
                                        </span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Hello Jelani Moreno,</span></span>
                                    </div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">
                                                Garth Owen</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Application for Job Title</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Hello Ila Russo,</span></span>
                                    </div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">Ursula Patterson</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Hello Kerry Best,</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Programmer Position Application</span></span>
                                    </div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">
                                                Nichole Rivas</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Annual Conference</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Hi Igor Mccoy,</span></span>
                                    </div>
                                </li>
                                <li>
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">
                                                Nichole Rivas</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Annual Conference</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Hi Igor Mccoy,</span></span>
                                    </div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">
                                                Nichole Rivas</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Annual Conference</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Hi Igor Mccoy,</span></span>
                                    </div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">
                                                Nichole Rivas</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Annual Conference</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Hi Igor Mccoy,</span></span>
                                    </div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">
                                                Nichole Rivas</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Annual Conference</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Hi Igor Mccoy,</span></span>
                                    </div>
                                </li>
                                <li className="e-list-item">
                                    <div className="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span className="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span className="e-list-item-header e-name">Ursula Patterson</span>
                                        </div>
                                        <span className="received e-list-content e-second-heading">Hello Kerry Best,</span>
                                        <span className="e-list-item-header sf-icon-star">
                                            <span className="e-list-text">Programmer Position Application</span></span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>);
    }
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));