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 -->