SIDE PANEL

Copy/Paste this code outside of #wrapper container.

<!-- 
	SIDE card 
	
		sidepanel-dark 			= dark color
		sidepanel-light			= light color (white)
		sidepanel-theme-color		= theme color
		
		sidepanel-inverse		= By default, sidepanel is placed on right (left for RTL)
						If you add "sidepanel-inverse", will be placed on left side (right on RTL).
-->
<div id="sidepanel" class="sidepanel-dark">
	<a id="sidepanel_close" href="#"><!-- close -->
		<i class="fa fa-remove"></i>
	</a>

	<div class="sidepanel-content">
		<h2 class="sidepanel-title">Explore Smarty</h2>

		<!-- SIDE NAV -->
		<ul class="list-group">

			<li class="list-group-item">
				<a href="#">
					<i class="ico-category et-heart"></i>  
					ABOUT US
				</a>
			</li>
			<li class="list-group-item list-toggle"><!-- add "active" to stay open on page load -->
				<a data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse-1" class="collapsed"> 
					<i class="ico-dd icon-angle-down"><!-- Drop Down Indicator --></i>
					<i class="ico-category et-strategy"></i>
					PORTFOLIO
				</a>
				<ul id="collapse-1" class="list-unstyled collapse"><!-- add "in" to stay open on page load -->
					<li><a href="#"><i class="fa fa-angle-right"></i> 1 COLUMN</a></li>
					<li class="active">
						<span class="badge">New</span>
						<a href="#"><i class="fa fa-angle-right"></i> 2 COLUMNS</a>
					</li>
					<li><a href="#"><i class="fa fa-angle-right"></i> 3 COLUMNS</a></li>
				</ul>
			</li>
			<li class="list-group-item list-toggle"><!-- add "active" to stay open on page load -->                
				<a data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse-2" class="collapsed"> 
					<i class="ico-dd icon-angle-down"><!-- Drop Down Indicator --></i>
					<i class="ico-category et-trophy"></i>
					PORTFOLIO
				</a>
				<ul id="collapse-2" class="list-unstyled collapse"><!-- add "in" to stay open on page load -->
					<li><a href="#"><i class="fa fa-angle-right"></i> SLIDER</a></li>
					<li class="active"><a href="#"><i class="fa fa-angle-right"></i> HEADERS</a></li>
					<li><a href="#"><i class="fa fa-angle-right"></i> FOOTERS</a></li>
				</ul>
			</li>
			<li class="list-group-item">
				<a href="#">
					<i class="ico-category et-happy"></i>  
					BLOG
				</a>
			</li>
			<li class="list-group-item">
				<a href="#">
					<i class="ico-category et-beaker"></i> 
					FEATURES
				</a>
			</li>
			<li class="list-group-item">
				<a href="#">
					<i class="ico-category et-map-pin"></i> 
					CONTACT
				</a>
			</li>

		</ul>
		<!-- /SIDE NAV -->

		<!-- social icons -->
		<div class="text-center mb-30">

			<a href="#" class="social-icon social-icon-sm social-facebook" data-toggle="tooltip" data-placement="top" title="Facebook">
				<i class="icon-facebook"></i>
				<i class="icon-facebook"></i>
			</a>

			<a href="#" class="social-icon social-icon-sm social-twitter" data-toggle="tooltip" data-placement="top" title="Twitter">
				<i class="icon-twitter"></i>
				<i class="icon-twitter"></i>
			</a>

			<a href="#" class="social-icon social-icon-sm social-linkedin" data-toggle="tooltip" data-placement="top" title="Linkedin">
				<i class="icon-linkedin"></i>
				<i class="icon-linkedin"></i>
			</a>

			<a href="#" class="social-icon social-icon-sm social-rss" data-toggle="tooltip" data-placement="top" title="RSS">
				<i class="icon-rss"></i>
				<i class="icon-rss"></i>
			</a>

		</div>
		<!-- /social icons -->

	</div>

</div>
<!-- /SIDE card -->