QwqLLX

index.html

<div style='margin: 40px auto; width:220px; background: #2b3643;' id='demo1'> 
</div>  

QwqLLX.markdown

QwqLLX

A Pen by Warren Mira on CodePen.

License.

script.js

/** @jsx React.DOM */
React.render(
        <SideNav.Menu path='#' itemHeight="32px" className="sidenav">
            <SideNav.MenuItem itemKey="truck">
                <SideNav.ILeftItem className="fa fa-truck">
                    Truck
                </SideNav.ILeftItem>
            </SideNav.MenuItem>
            <SideNav.MenuItem itemKey="bed">
                <SideNav.ILeftItem className="fa fa-bed">
                    Bed
                </SideNav.ILeftItem>
            </SideNav.MenuItem>
            <SideNav.MenuItem itemKey="camera">
                <SideNav.ILeftItem className="fa fa-camera">
                    Camera
                </SideNav.ILeftItem>
            </SideNav.MenuItem>
        </SideNav.Menu>,
       document.getElementById("demo1")
);

style.css

ul.sidenav li {
    color: #FFF;
}
ul.sidenav li > a {
    padding-left: 6px;
    color: #FFF;
}
ul.sidenav li > a > i {
    padding-right: 8px;
}
ul.sidenav li > a:hover {
    text-decoration: none;
    background: #1caf9a;
    cursor: pointer;
}
ul.sidenav li > a:focus {
    text-decoration: none;
}
li.sidenav-selected {
    background: #1caf9a;

}