Search results

Fixed Sidebar in React Sidebar component

The following example demonstrates how to render sidebar with fixed position. When scroll the main content area, the position of the sidebar will not change.

Source
Preview
App.tsx
index.tsx
index.html
style.css
App.jsx
index.jsx
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>
        )
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

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

<head>
    <title>Syncfusion React Sidebar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-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>
.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;
  position:fixed; 
  overflow: hidden;
}

/* 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;
}
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>);
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));