<!-- BEGIN SIDEBAR -->
<div class="sidebar">
  <div class="logopanel">
    <h1>
      <a href="dashboard.html"></a>
    </h1>
  </div>
  <div class="sidebar-inner">
    <div class="sidebar-top">
      <form action="search-result.html" method="post" class="searchform">
        <input type="text" class="form-control" name="keyword" placeholder="Search here...">
      </form>
      <div class="userlogged clearfix">
        <i class="icon icons-faces-users-01"></i>
        <div class="user-details">
          <h4>Mike Mayers</h4>
          <div class="dropdown user-login">
            <button class="btn btn-xs dropdown-toggle btn-rounded" type="button" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" data-delay="300">
            <i class="online"></i><span>Available</span><i class="fa fa-angle-down"></i>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#"><i class="busy"></i><span>Busy</span></a></li>
              <li><a  href="#"><i class="turquoise"></i><span>Invisible</span></a></li>
              <li><a href="#"><i class="away"></i><span>Away</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="menu-title">
      Navigation 
      <div class="pull-right menu-settings">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" data-delay="300"> 
        <i class="icon-settings"></i>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#" id="reorder-menu" class="reorder-menu">Reorder menu</a></li>
          <li><a href="#" id="remove-menu" class="remove-menu">Remove elements</a></li>
          <li><a href="#" id="hide-top-sidebar" class="hide-top-sidebar">Hide user &amp; search</a></li>
        </ul>
      </div>
    </div>
    <ul class="nav nav-sidebar">
      <li><a href="dashboard.html"><i class="icon-home"></i><span data-translate="dashboard">Dashboard</span></a></li>
      <li class="nav-parent">
        <a href="#"><i class="icon-puzzle"></i><span data-translate="builder">Builder</span> <span class="fa arrow"></span></a>
        <ul class="children collapse">
          <li><a target="_blank" href="../builder/admin-builder/index.html"> Admin</a></li>
          <li><a href="../builder/page-builder/index.html"> Page</a></li>
          <li><a href="../builder/email-builder/index.html"> Email</a></li>
          <li><a href="ecommerce-pricing-table.html"> Pricing Table</a></li>
        </ul>
      </li>
      <li class="nav-parent">
        <a href="#"><i class="icon-bulb"></i><span data-translate="Mailbox">Mailbox</span> <span class="fa arrow"></span></a>
        <ul class="children collapse">
          <li><a href="mailbox.html"> Inbox</a></li>
          <li><a href="mailbox-send.html"> Send Email</a></li>
        </ul>
      </li>
      <li class="nav-parent">
        <a href=""><i class="icon-screen-desktop"></i><span data-translate="ui elements">UI Elements</span> <span class="fa arrow"></span></a>
        <ul class="children collapse">
          <li><a href="ui-buttons.html"  data-translate="buttons"> Buttons</a></li>
          <li><a href="ui-components.html" data-translate="components"> Components</a></li>
          <li><a href="ui-tabs.html" data-translate="tabs"> Tabs</a></li>
          <li><a href="ui-animations.html" data-translate="animations css3"> Animations CSS3</a></li>
          <li><a href="ui-icons.html" data-translate="icons"> Icons</a></li>
          <li><a href="ui-portlets.html" data-translate="portlets"> Portlets</a></li>
          <li><a href="ui-nestable-list.html"  data-translate="nestable list"> Nestable List</a></li>
          <li><a href="ui-tree-view.html" data-translate="tree view"> Tree View</a></li>
          <li><a href="ui-modals.html" data-translate="modals"> Modals</a></li>
          <li><a href="ui-notifications.html" data-translate="notifications"> Notifications</a></li>
          <li><a href="ui-typography.html" data-translate="typography"> Typography</a></li>
          <li><a href="ui-helper.html" data-translate="helper"> Helper Classes</a></li>
        </ul>
      </li>
      <li class="nav-parent">
        <a href=""><i class="icon-layers"></i><span data-translate="layouts">Layouts</span><span class="fa arrow"></span></a>
        <ul class="children collapse">
          <li><a href="layouts-api.html" data-translate=""> API</a></li>
          <li><a href="layout-collapsed-sidebar.html" data-translate=""> Collapsed Sidebar</a></li>
          <li><a href="layout-topbar-menu.html" data-translate=""> Horizontal Mega Menu</a></li>
          <li><a href="layout-topbar-menu-dark.html" data-translate=""> Horizontal Mega Menu Dark</a></li>
          <li><a href="layout-sidebar-top.html" data-translate=""> Sidebar on Top</a></li>
          <li><a href="layout-right-sidebar.html" data-translate=""> Right Sidebar</a></li>
          <li><a href="layout-sidebar-hover.html" data-translate=""> Sidebar on Hover</a></li>
          <li><a href="layout-sidebar-condensed.html" data-translate=""> Sidebar Condensed</a></li>
          <li><a href="layout-sidebar-light.html" data-translate=""> Sidebar Light</a></li>
          <li><a href="layout-boxed.html" data-translate=""> Boxed Layout</a></li>
        </ul>
      </li>
      <li class="nav-parent">
        <a href=""><i class="icon-note"></i><span data-translate="forms">Forms </span><span class="fa arrow"></span></a>
        <ul class="children collapse">
          <li><a href="forms.html"> Forms Elements</a></li>
          <li><a href="forms-validation.html"> Forms Validation</a></li>
          <li><a href="forms-plugins.html"> Advanced Plugins</a></li>
          <li><a href="forms-wizard.html"> <span class="pull-right badge badge-danger">low</span> <span data-translate="form-wizard">Form Wizard</span></a></li>
          <li><a href="forms-sliders.html" data-translate="sliders"> Sliders</a></li>
          <li><a href="forms-editors.html" data-translate="text editors"> Text Editors</a></li>
          <li><a href="forms-input-masks.html" data-translate="input masks"> Input Masks</a></li>
        </ul>
      </li>
      <li class="nav-parent">
        <a href=""><i class="fa fa-table"></i><span data-translate="medias manager">Tables</span><span class="fa arrow"></span></a>
        <ul class="children collapse">
          <li><a href="tables.html" data-translate="tables styling"> Tables Styling</a></li>
          <li><a href="tables-dynamic.html" data-translate="tables dynamic"> Tables Dynamic</a></li>
          <li><a href="tables-filter.html" data-translate="tables filter"> Tables Filter</a></li>
          <li><a href="tables-editable.html" data-translate="tables editable"> Tables Editable</a></li>
        </ul>
      </li>
      <li class="nav-parent">
        <a href=""><i class="icon-bar-chart"></i><span data-translate="charts">Charts </span><span class="fa arrow"></span></a>
        <ul class="children collapse">
          <li><a href="charts.html" data-translate="image croping"> Charts</a></li>
          <li><a href="charts-finance.html" data-translate="gallery sortable"> Financial Charts</a></li>
        </ul>
      </li>
      <li class="nav-parent">
        <a href=""><i class="icon-picture"></i><span data-translate="medias manager">Medias</span><span class="fa arrow"></span></a>
        <ul class="children collapse">
          <li><a href="medias-image-croping.html" data-translate="image croping"> Images Croping</a></li>
          <li><a href="medias-gallery-sortable.html" data-translate="gallery sortable"> Gallery Sortable</a></li>
          <li><a href="medias-hover-effects.html" data-translate="hover effects"> <span class="pull-right badge badge-primary">12</span> Hover Effects</a></li>
          <li><a href="medias-manager.html"> <span class="pull-right badge badge-success">low</span> <span data-translate="medias manager">Medias Manager</span></a></li>
        </ul>
      </li>
      <li class="nav-parent">
        <a href=""><i class="icon-docs"></i><span data-translate="pages">Pages </span><span class="fa arrow"></span></a>
        <ul class="children collapse">
          <li><a href="page-timeline.html"> Timeline</a></li>
          <li><a href="page-404.html"> Error 404</a></li>
          <li><a href="page-500.html"> Error 500</a></li>
          <li><a href="page-blank.html"> Blank Page</a></li>
          <li><a href="page-contact.html"> Contact</a></li>
          <li><a href="page-search-results.html"> Search Results</a></li>
        </ul>
      </li>
      <li class="nav-parent">
        <a href=""><i class="icon-user"></i><span data-translate="pages">User </span><span class="fa arrow"></span></a>
        <ul class="children collapse">
          <li><a href="user-profil.html"> <span class="pull-right badge badge-danger">Hot</span> Profil</a></li>
          <li><a href="user-lockscreen.html"> Lockscreen</a></li>
          <li><a href="user-login-v1.html"> Login / Register</a></li>
          <li><a href="user-login-v2.html"> Login / Register v2</a></li>
          <li><a href="user-session-timeout.html"> Session Timeout</a></li>
        </ul>
      </li>
      <li class="nav-parent">
        <a href=""><i class="icon-basket"></i><span data-translate="pages">eCommerce </span><span class="fa arrow"></span></a>
        <ul class="children collapse">
          <li><a href="ecommerce-dashboad.html"> Dashboard</a></li>
          <li><a href="ecommerce-cart.html"> Shopping Cart</a></li>
          <li><a href="ecommerce-invoice.html"> Invoice</a></li>
          <li><a href="ecommerce-pricing-table.html"><span class="pull-right badge badge-success">5</span> Pricing Tables</a></li>
        </ul>
      </li>
      <li class="nav-parent">
        <a href=""><i class="icon-cup"></i><span>Extra </span><span class="fa arrow"></span></a>
        <ul class="children collapse">
          <li><a href="extra-widgets.html"> Widgets</a></li>
          <li><a href="page-coming-soon.html"> Coming Soon</a></li>
                <li><a href="extra-sliders.html"> Sliders</a></li>
          <li><a href="maps-google.html"> Google Maps</a></li>
          <li><a href="maps-vector.html"> Vector Maps</a></li>
          <li><a href="extra-intro.html"> Intro</a></li>
        </ul>
      </li>
    </ul>
    <!-- SIDEBAR WIDGET BAR CHARTS -->
    <div class="sidebar-widgets">
      <p class="menu-title widget-title">Statistics 
        <span class="pull-right">
          <a href="#" class="hide-widget"><i class="icons-office-52"></i></a>
        </span>
      </p>
      <div class="charts-sidebar">
        <div class="sidebar-charts-inner">
          <div class="sidebar-charts-left">
            <div class="sidebar-chart-title">Orders</div>
            <div class="sidebar-chart-number">1,256</div>
          </div>
          <div class="sidebar-charts-right" data-type="bar">
            <span class="dynamicbar1"></span>
          </div>
        </div>
        <hr class="divider">
        <div class="sidebar-charts-inner">
          <div class="sidebar-charts-left">
            <div class="sidebar-chart-title">Income</div>
            <div class="sidebar-chart-number">$47,564</div>
          </div>
          <div class="sidebar-charts-right" data-type="bar">
            <span class="dynamicbar2"></span>
          </div>
        </div>
        <hr class="divider">
        <div class="sidebar-charts-inner">
          <div class="sidebar-charts-left">
            <div class="sidebar-chart-title">Visits</div>
            <div class="sidebar-chart-number" id="number-visits">147,687</div>
          </div>
          <div class="sidebar-charts-right" data-type="bar">
            <span class="dynamicbar3"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="sidebar-footer clearfix">
      <a class="pull-left footer-settings" href="#" data-rel="tooltip" data-placement="top" data-original-title="Settings">
      <i class="icon-settings"></i></a>
      <a class="pull-left toggle_fullscreen" href="#" data-rel="tooltip" data-placement="top" data-original-title="Fullscreen">
      <i class="icon-size-fullscreen"></i></a>
      <a class="pull-left" href="#" data-rel="tooltip" data-placement="top" data-original-title="Lockscreen">
      <i class="icon-lock"></i></a>
      <a class="pull-left btn-effect" href="#" data-modal="modal-1" data-rel="tooltip" data-placement="top" data-original-title="Logout">
      <i class="icon-power"></i></a>
    </div>
  </div>
</div>
<!-- END SIDEBAR -->