<!--Sidebar Component-->
<div class="sidebar-wrapper">
  <div class="sidebar">
      <div class="sidebar__logo">
          <h3> Sidebar </h3>
      </div>
		<ul class="sidebar__nav">
			<li class="active"> <i class="fa fa-home" aria-hidden="true"></i> Home </li>
			<li> <i class="fa fa-female" aria-hidden="true"></i> About Me</li>
			<li> <i class="fa fa-camera-retro" aria-hidden="true"></i> Portfolio</li>
			<li> <i class="fa fa-envelope-open-o" aria-hidden="true"></i> Contact Me</li>
		</ul>
      <div class="sidebar__profile">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/93.jpg" alt="Profile Photo">
        <h4>Linda Hart</h4>
      </div>
  </div>
</div>
body{	
  color: #555;
  background-color: #995BED;
}

.sidebar-wrapper{
	width: 300px;
	margin: 30px auto;
}

.sidebar{
    display: flex;
    flex-direction: column;
    height: 100%;
    height: 500px;
    background-color: #FFF;
    border-radius: 2px;
}

    /*Logo placeholder*/
    .sidebar__logo h3{
        text-transform: uppercase;
        color: #CCC;
        text-align: center;
    }

    /*Sidebar Navigation*/
    .sidebar__nav{
        flex-grow: 1;
        list-style: none;
        padding: 0;
    }
        .sidebar__nav li{
            padding: 15px;
            cursor: pointer;
        }
        .sidebar__nav li.active, .sidebar__nav li:hover{
            background-color: #F7F2FF;
            color: #995BED;
        }
            .sidebar__nav li i{
                width: 25px;
                display: inline-block;
                text-align: center;
            }
    
    /*Sideabr profile*/
    .sidebar__profile{
        text-align: center;
        margin-top: 20px;
    }
        .sidebar__profile img{
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
        .sidebar__profile h4{
            margin-top: 0;
        }

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.