sidebar.html

<section>
	<h1 class="blue" data-id="#basics/sidebar"><i class="ace-icon fa fa-desktop grey"></i> Sidebar</h1>

	<div class="hr hr-double hr32"></div>
	
	<!-- #section:basics/sidebar -->
	<h2 class="blue lighter help-title" data-id="#basics/sidebar.layout">
		Sidebar Basics
	</h2>
	<div class="space-4"></div>

	<!-- #section:basics/sidebar.layout -->
	<div class="help-content">
		<h3 class="info-title smaller">1. Layout</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Default HTML layout used for sidebar is:
				<div>
				 <span class="thumbnail inline">
					<img src="images/sidebar.png" />
				 </span>
				</div>
				<ol>
					<li>
						<b>shortcut buttons</b>: optional
					</li>
					<li>
						<b>.nav-list</b>: contains sidebar items
					</li>
					<li>
						<b>expand/collapse button</b>: optional
					</li>
				</ol>
				
				<div class="space-4"></div>
<pre data-language="html">
<div class="sidebar responsive" id="sidebar">
 <div class="sidebar-shortcuts" id="sidebar-shortcuts">
   ...
 </div>
 
 <ul class="nav nav-list">
   ...
 </ul>
 
 <div class="sidebar-toggle sidebar-collapse">
   ...
 </div>
</div><!-- /.sidebar -->
</pre>
				Please note that for most Javascript functions to perform without problem,
				you should specify <b>id</b> attribute of elements, for example, sidebar element can have
				<code>#sidebar</code> id attribute.
			</li>

			<li>
				Starting with the following file you can find more details:
				<br />
				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>sidebar.mustache</code>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->


		<h3 class="info-title smaller" data-id="#basics/sidebar.layout.item">2. Menu item</h3>
		<!-- #section:basics/sidebar.layout.item -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				First level menu item has the following markup:
				<pre data-language="html">
<li>
  <a href="#">
    <i class="menu-icon fa fa-leaf"></i>
    <span class="menu-text">
      Item text
    </span>
    <b class="arrow fa fa-angle-down"></b>
    <!-- arrow down icon if there's a submenu -->
  </a>
 
  <b class="arrow"></b>
  <!-- optional arrow for minimized menu & hover submenu -->

  <ul class="submenu">
   ....
  </ul>
</li>
				</pre>

				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/sidebar/</span>item.mustache</code>
			</li>
			
			<li>
				Icons should have <code>.menu-icon</code> class.
				<br />
				First level menu item's text should be inside <code>.menu-text</code> element,
				but this isn't needed for deeper levels:
				<pre data-language="html">
<!-- first level item -->
<li>
  <a href="#">
    <i class="menu-icon fa fa-caret-right"></i>
    <span class="menu-text">level 2 item text</span>
    <b class="arrow fa fa-angle-down"></b>
  </a>
</li>

<!-- second level item -->
<li>
  <a href="#">
    <i class="menu-icon fa fa-caret-right"></i>
    level 2 item text
    <b class="arrow fa fa-angle-down"></b>
  </a>
</li>
				</pre>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/sidebar.layout.item -->
		
		
		<h3 class="info-title smaller" data-id="#basics/sidebar.layout.shortcuts">3. Shortcut Buttons</h3>
		<!-- #section:basics/sidebar.layout.shortcuts -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				It consists of <code>.sidebar-shortcuts-large</code> and
				<code>.sidebar-shortcuts-mini</code> which is displayed when sidebar is minimized (collapsed)
			</li>
			<li>
<pre data-language="html">
<div class="sidebar-shortcuts" id="sidebar-shortcuts">

  <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
    <button class="btn btn-success"><i class="ace-icon fa fa-signal"></i></button>
    <button class="btn btn-info"><i class="ace-icon fa fa-pencil"></i></button>
    <button class="btn btn-warning"><i class="ace-icon fa fa-users"></i></button>
    <button class="btn btn-danger"><i class="ace-icon fa fa-cogs"></i></button>
  </div>

  <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
    <span class="btn btn-success"></span>
    <span class="btn btn-info"></span>
    <span class="btn btn-warning"></span>
    <span class="btn btn-danger"></span>
  </div>

</div>
</pre>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/sidebar.layout.shortcuts -->
		
		
		<h3 class="info-title smaller" data-id="#basics/sidebar.layout.minimize">4. Minimize Button</h3>
		<!-- #section:basics/sidebar.layout.minimize -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Sidebar collapse/expand button is used to minimize/restore sidebar.
				<br />
				<div class="alert alert-info">
					It should have a <code>data-target</code> attribute which points to sidebar ID.
				</div>
<pre data-language="html">
  <div class="sidebar responsive" id="sidebar">
  .
  .
  .
  <div data-target="#sidebar" id="sidebar-collapse" class="sidebar-toggle sidebar-collapse">
     <i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
  </div>
 </div><!-- /.sidebar -->
</pre>
			</li>
			
			<li>
				There is also another <code>.sidebar-expand</code> button for sidebar in <a href="#basics/sidebar.mobile.style2" class="help-more">2nd mobile view style</a>.
				<br />
				In that case, sidebar is automatically minimized and the button is used to expand it.
				<br />
				Also it should have a <code>data-target</code> attribute which points to sidebar ID.
<pre data-language="html">
 <div class="sidebar responsive-min" id="sidebar">
   .
   .
   .
   <div data-target="#sidebar" id="sidebar-expand" class="sidebar-toggle sidebar-expand">
     <i class="ace-icon fa fa-angle-double-right" data-icon1="ace-icon fa fa-angle-double-right" data-icon2="ace-icon fa fa-angle-double-left"></i>
   </div>
 </div><!-- /.sidebar -->
</pre>
			</li>
		
			<li>
				You can use <code>data-icon1</code>
				and <code>data-icon2</code> attributes to specify icons to use in collapsed/expanded state
			</li>
			
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/sidebar.layout.minimize -->

		
		<h3 class="info-title smaller" data-id="#basics/sidebar.layout.badge">5. Other notes</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				<!-- #section:basics/sidebar.layout.badge -->
				To add a badge or label inside menu items, you should put it inside <code>.menu-text</code> element:
<pre data-language="html">
 <span class="menu-text">
   Menu Text
   <span class="badge badge-info">4</span>
 </span>
</pre>

You can also include a tooltip:
<pre data-language="html">
 <span class="menu-text">
   Menu Text
   <span class="label label-transparent tooltip-error" title="some title for tooltip!">
     <i class="red ace-icon fa fa-exclamation-triangle"></i>
   </span>
 </span>
</pre>
				<!-- /section:basics/sidebar.layout.badge -->
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		
		
		<h3 class="info-title smaller">6. Sidebar options</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				See <a href="#basics/sidebar.options" class="help-more">sidebar options section</a> for more info.
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		
	</div><!-- /.help-content -->
	<!-- /section:basics/sidebar.layout -->

	
	
	
	
	<div class="hr hr-double hr32"></div>
	<h2 class="blue lighter help-title" data-id="#basics/sidebar.functions">
		Sidebar functions
	</h2>
	<div class="space-4"></div>

	<!-- #section:basics/sidebar.functions -->
	<div class="help-content">
		<h3 class="info-title smaller">Basic functions</h3>
		<div class="info-section">
			<ul class="info-list list-unstyled">
				<li>
					To enable sidebar functions on an element you should use the following piece of code:
<pre data-language="javascript">
 $('.sidebar').ace_sidebar();
 //or
 $('#my-specific-sidebar').ace_sidebar();
</pre>
				</li>

				<li>
				By default all <code>.sidebar</code> elements are initiliazed on page load.
				</li>
				
				<li>
				The following functions are available for sidebar:
					<ul>
						<li><b>toggleMenu:</b> collapses or expands sidebar.
<pre data-language="javascript">
 $('.sidebar').ace_sidebar('toggleMenu');
 $('.sidebar').ace_sidebar('toggleMenu', toggleButton);
 //if there is an optional toggleButton element, its icons will be flipped

 $('.sidebar').ace_sidebar('toggleMenu', false);
 //optional false value means don't save changes to cookies

 $('.sidebar').ace_sidebar('toggleMenu', [toggleButton , false/true ]);
 //optional second value means save or don't save changes to cookies
</pre>
						</li>
						
						<li>
							<b>collapse</b> collapses sidebar and <b>expand</b> expands sidebar:
<pre data-language="javascript">
 $('#my-sidebar').ace_sidebar('collapse');
 $('#my-sidebar').ace_sidebar('collapse', toggleButton);
 //if there is an optional toggleButton element, its icons will be flipped
</pre>
							<div class="alert alert-info">
							Please note that if you want to have minimized sidebar by default you should
							make the changes using CSS classes as described in <a href="#settings.sidebar" class="help-more">sidebar settings</a>
							</div>
						</li>
						
						<li>
							<b>toggle</b>, <b>hide</b> or <b>show</b>
							are used for submenus:
<pre data-language="javascript">
 $('#my-sidebar').ace_sidebar('toggle', [sub, 300]);
 //first parameter is submenu to toggle and second is duration in milliseconds.
</pre>
						</li>
					</ul>
				
				</li>
			</ul>
		</div><!-- /.info-section -->
		
		
		<h3 class="info-title smaller">Sidebar scrollbars</h3>
		<div class="info-section">
			<ul class="info-list list-unstyled">
				<li>
					There are two approaches for sidebar scrollbars which you can choose
					by using custom JS builder tool.
				</li>
				<li>
					First approach is used by default and works only for fixed sidebar.
					<br />
					There is no cropping of elements because of <em>overflow:hidden</em> CSS property.
				</li>
				<li>
					Second approach can be used both by fixed and normal sidebars and
					uses <em>overflow:hidden</em> CSS property.
				
				<li>				
					To add scrollbars to sidebar you should use the following function:
<pre data-language="javascript">
 $('.sidebar').ace_sidebar_scroll({
    //options here
 });
</pre>
					By default all <code>.sidebar</code> elements have scrollbars enabled on page load
					and activated when appropriate.
				</li>
				
				<li>
					The following options are available for first approach:
					<ul>
						<li><code>scroll_to_active</code> scroll to active item on page load</li>
						<li><code>include_shortcuts</code> include shortcut buttons in scroll area</li>
						<li><code>include_toggle</code> include toggle button in scroll area or not</li>
						<!-- <li><code>scrollbars_outside</code> whether scrollbars should be outside of sidebar area or not</li> -->
						<li><code>scroll_style</code> scrollbar style as described in custom scrollbars section</li>
						<li><code>mousewheel_lock</code> whether to lock mouse wheel on sidebar even if it hasn't scrollbars or not</li>
						
						<li><code>only_if_fixed</code> used in 2nd approach only</li>
						<li><code>smooth_scroll</code> used in first approach only. Specify a number to enable smooth scrolling or false to disable</li>
					</ul>
				</li>
				
				<li>
					The following functions are also available:
					<ul>
						<li><code>reset</code> reset scrollbars</li>
						<li><code>updateStyle</code> updates scrollbars style class:
<pre data-language="javascript">
 $('#my-sidebar').ace_sidebar_scroll('updateStyle', 'scroll-dark no-track');
 //for example such update is done which switching to another skin in Ace's demo
</pre>
						</li>
					</ul>
				</li>
			</ul>
		</div><!-- /.info-section -->
		
		
		<h3 class="info-title smaller">Submenu positioning and scrollbars</h3>
		<div class="info-section">
			<ul class="info-list list-unstyled">
				<li>
					To enable submenu adjustment, hiding delay and scrollbar feature you should use the following function:
<pre data-language="javascript">
 $('.sidebar').ace_sidebar_hover({
    //options here
 });
</pre>
					By default all <code>.sidebar</code> elements have this feature enabled on page load
					and activated when appropriate.
				</li>
				
				<li>
					The following options are available:
					<ul>
						<li><code>sub_hover_delay</code> time in milliseconds to hide a submenu after mouse leaves it. Default is 750</li>
						<li><code>sub_scroll_style</code> scrollbar style as described in custom scrollbars section</li>
					</ul>
				</li>
				
				<li>
					The following functions are also available:
					<ul>
						<li><code>reset</code> reset scrollbars</li>
						<li><code>updateStyle</code> updates submenu scrollbars style class:
<pre data-language="javascript">
 $('#my-sidebar').ace_sidebar_hover('updateStyle', 'scroll-dark no-track');
 //for example it can be done when switching to another skin dynamically
</pre>
						</li>
						<li><code>changeDir</code> changes scrollbars direction (left) for example if you are using RTL:
<pre data-language="javascript">
 $('#my-sidebar').ace_sidebar_hover('changeDir', 'left');
</pre>
						</li>
					</ul>
				</li>
				
			</ul>
		</div><!-- /.info-section -->

	</div><!-- /.help-content -->
	<!-- /section:basics/sidebar.functions -->
	
	
	
	
	
	<div class="hr hr-double hr32"></div>
	<h2 class="blue lighter help-title" data-id="#basics/sidebar.mobile">
		Responsive Sidebar
	</h2>
	<div class="space-4"></div>

	<!-- #section:basics/sidebar.mobile -->
	<div class="help-content">
		<h3 class="info-title smaller">Mobiles Views</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				There are 3 styles of responsive (mobile view) sidebar when screen size is below <b>992px</b>.
				<br />
				<i class="fa fa-hand-o-right"></i> You can change this value by changing
				Bootstrap <code>@grid-float-breakpoint-max</code> variable
				and	recompiling LESS files.
				<br />
				See <a href="#files/css" class="help-more">CSS section</a>
			</li>
			</ul>
		</div>
		
		
		<h3 class="info-title smaller" data-id="#basics/sidebar.mobile.style1">1. Default mobile menu style</h3>
		<!-- #section:basics/sidebar.mobile.style1 -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				<h4 class="grey lighter" >Default mobile menu style</h4>
				<div>
				  <span class="thumbnail inline">
					<img src="images/sidebar-mobile1.png" />
				  </span>
				</div>
				You should add <code>.responsive</code> class to <code>.sidebar</code> element.
			</li>
			
			<li>
				You can also add <code>.push_away</code> class to <code>.sidebar</code> to push content when sidebar is shown:
<pre data-language="html">
 <div id="sidebar" class="sidebar responsive push_away">
 </div>
</pre>
			</li>
			
			<li>
				You can add <code>data-auto-hide=true</code> attribute for sidebar to automatically hide when 
				user clicks outside of its area:
<pre data-language="html">
 <div id="sidebar" class="sidebar responsive" data-auto-hide="true">
 </div>
</pre>
			</li>
		  </ul>
		</div>
		<!-- /section:basics/sidebar.mobile.style1 -->
		 
		 
		 
		<h3 class="info-title smaller" data-id="#basics/sidebar.mobile.style2">2. Automatically minimized menu style</h3>
		<!-- #section:basics/sidebar.mobile.style2 -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				<div>
						  <span class="thumbnail inline">
							<img src="images/sidebar-mobile2.png" />
						  </span>
						</div>

						You should add <code>.responsive-min</code> class to <code>.sidebar</code> element
						and there should also be an <b>invisible toggle button</b> present, right before sidebar.
						
						<br />
						An additional <code>.sidebar-toggle.sidebar-expand</code> button, expands sidebar in mobile view:
						(<a href="#basics/sidebar.layout.minimize" class="help-more">More info</a>)
						<br />
						<div class="alert alert-info">
							It should have a <code>data-target</code> attribute which points to sidebar ID.
						</div>
						<div class="space-4"></div>
<pre data-language="html">
<a href="#" class="menu-toggler invisible" id="menu-toggler"></a>
<div id="sidebar" class="sidebar responsive-min">
  .
  .
  .
  .
 <div class="sidebar-toggle sidebar-collapse">
    ...
 </div>
 
 <div data-target="#sidebar" class="sidebar-toggle sidebar-expand">
    ...
 </div>
</div>
</pre>
			</li>
			<li>
				You can add <code>data-auto-hide=true</code> attribute for sidebar to automatically become minimized when 
				user clicks outside of its area:
<pre data-language="html">
 <div id="sidebar" class="sidebar responsive-min" data-auto-hide="true">
 </div>
</pre>
			</li>
		  </ul>
		 </div>
		 <!-- /section:basics/sidebar.mobile.style2 -->

		 
		 <h3 class="info-title smaller" data-id="#basics/sidebar.mobile.style3">3. Bootstrap collapse style</h3>
		<!-- #section:basics/sidebar.mobile.style3 -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				<h4 class="grey lighter" data-id="#basics/sidebar.mobile.style3"></h4>
				<div>
				  <span class="thumbnail inline">
					<img src="images/toggle-sidebar-3.png" />
				  </span>
				</div>

				For this you should add <code>.collapse.navbar-collapse</code> class
				to <code>.sidebar</code> element and have the correct <a href="#basics/sidebar.mobile.toggle" class="help-more">toggle buttons</a> inside navbar:
				<br />
				<pre data-language="html">
<div id="sidebar" class="sidebar collapse navbar-collapse">
</div>
</pre>
			</li>

		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/sidebar.mobile.style3 -->
	
	
	
	
		<h3 class="info-title smaller" data-id="#basics/sidebar.mobile.toggle">Toggle Button</h3>
		<!-- #section:basics/sidebar.mobile.toggle -->
		<div class="info-section">
		  <ul class="info-list list-unstyled">
		  	<li>
				In default responsive (mobile) style and collapsible responsive style,
				toggle buttons are used to show and hide sidebar.
			</li>
			<li>
				Buttons can are either before brand text container (<code>.navbar-header</code>) or inside it
				and	it should have <code>data-target</code> attribute which points to sidebar's ID.
				<div>
				 <span class="thumbnail inline">
					<img src="images/toggle-sidebar-1.png" />
				 </span>
				</div>
<pre data-language="html">
 <button data-target="#sidebar" type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler">
   <span class="sr-only">Toggle sidebar</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
 </button>

 <div class="navbar-header pull-left">
   <!-- toggle button can also be here -->
   
   <!-- brand text -->
   
   <!-- toggle button can also be here -->
 </div>
</pre>
			</li>
			
			<li>
				If you want to use old style toggle button,
				you should insert it before <code>.sidebar</code> element.
				<br />
				<div>
				 <span class="thumbnail inline">
					<img src="images/toggle-sidebar-11.png" />
				 </span>
				</div>
<pre data-language="html">
 <a href="#" data-target="#sidebar" class="menu-toggler" id="menu-toggler">
   <span class="sr-only">Toggle sidebar</span>
   <span class="toggler-text"></span>
 </a>
 <div class="sidebar responsive" id="sidebar">
   ...
 </div>
</pre>
				
				<br />

				It should have a <code>span.toggler-text</code> inside it and you can change
				<b>MENU</b> text to something else by modifying
				<code>@toggler-text</code> variable inside <code>assets/css/less/sidebar/old-toggle-button.less</code>
				and recompiling <code>ace.less</code>
			</li>
			
			<li>
				In 2nd mobile menu style, you should add an invisible <code>.menu-toggler</code> element right before <code>.sidebar</code>
<pre data-language="html">
 <a class="invisible menu-toggler" id="menu-toggler"></a>
 <div class="sidebar responsive-min">
 ...
 </div>
</pre>
			</li>
			
			
			<li>
				For collapse style sidebar in mobile view (3rd style),
				you should use <code>data-toggle</code> and <code>data-target</code> attributes:
				<div>
				 <span class="thumbnail inline">
					<img src="images/toggle-sidebar-3.png" />
				 </span>
				</div>
<pre data-language="html">
&lt;button class="pull-right navbar-toggle collapsed" type="button"
           data-toggle="collapse" data-target=".sidebar">
  &lt;span class="sr-only">Toggle sidebar&lt;/span>
  &lt;span class="icon-bar">&lt;/span>
  &lt;span class="icon-bar">&lt;/span>
  &lt;span class="icon-bar">&lt;/span>
&lt;/button>
</pre>

<pre data-language="html">
 <!-- collapse style toggle buttons can be here -->
 <div class="navbar-header pull-left">
   <a class="navbar-brand" href="#">
      <!-- brand text is here -->
   </a>
   <!-- collapse style toggle buttons can be here -->
 </div>
</pre>

			</li>
			
		  </ul>
		</div>
		<!-- /section:basics/sidebar.mobile.toggle -->
	</div>
	<!-- /section:basics/sidebar.mobile -->

		
		
	<div class="hr hr-double hr32"></div>
	<h2 class="help-title blue lighter" data-id="#basics/sidebar.options">
		Sidebar Options
	</h2>
	<div class="space-4"></div>

	<!-- #section:basics/sidebar.options -->
	<div class="help-content">
		<h3 class="info-title smaller" data-id="#basics/sidebar.horizontal">1. Horizontal Sidebar</h3>
		<!-- #section:basics/sidebar.horizontal -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
			For horizontal menu you should add <code>.h-sidebar</code> class to <code>.sidebar</code> and <code>.h-navbar</code> to <code>.navbar</code> element:
<pre data-language="html">
 <div id="navbar" class="navbar navbar-default h-navbar navbar-collapse">
 </div>
 <div id="main-container">
    <div id="sidebar" class="sidebar h-sidebar collapse navbar-collapse">
     .
     .
     .
    </div>
 </div>
</pre>
			</li>

			<li>
				You should also add <code>.hover</code> class to all <b>LI</b> elements, so that submenus are shown on mouse hover:
<pre data-language="html">
 <ul class="nav nav-list">
   <li class="hover">
     <a href="#">
       ...
     </a>
     <b class="arrow"></b>
     <ul class="submenu">
       ...
     </ul>
   </li>
 </ul>
</pre>
			</li>
			
			<li>
				Add <code>.no-gap</code> to horizontal menu to remove gap.
				<br />
				Add <code>.lower-highlight</code> to move the highlight bar lower.
				<br />
				Add <code>.h-navbar</code> to <code>.navbar</code> to add shadow to it.
				
<pre data-language="html">
<div id="sidebar" class="sidebar h-sidebar no-gap lower-highlight">
</div>
</pre>

<pre data-language="html">
<div id="navbar" class="navbar h-navbar">
</div>
</pre>
			</li>

			<li>
				Horizontal menu is only visible when screen width is above <b>991px</b>.
				<br />
				You can choose any of the three possible mobile menu styles for smaller widths.
			</li>
			
			<li>
				Also, in demo page, when horizontal menu is fixed and you scroll down,
				it moves up gradually.
				<br />
				To enable this, you should include the following code in your page:
				<br />
				<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>top-menu.js</code>
			</li>
			
			<li>
				If you want the header (h1) text to be aligned with content area text,
				you can either add <code>.no-margin-left</code> class to <code>h1</code> header element or
				add <code>.no-margin</code> class to the <code>.row</code> element which encloses content area!
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/sidebar.horizontal -->
		
		
		
		<h3 class="info-title smaller" data-id="#basics/sidebar.hover">2. Submenu on Hover</h3>
		<!-- #section:basics/sidebar.hover -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
			You can have submenus to be displayed on mouse hover instead of click.
			</li>
			<li>
			For that you should add <code>.hover</code> class to each <b>LI</b> element
			and also add <code>.arrow</code> element before submenus.
<pre data-language="html">
 <ul class="nav nav-list">
   <li class="hover">
    <a href="#">
      ...
    </a>
    <b class="arrow"></b>
    <ul class="submenu">
      ...
    </ul>
   </li>
 </ul>
</pre>
			</li>
			<li>
				Hover submenus are only available when screen width is above <b>991px</b>.
				<br />
				You can change that by modifying <code>@screen-hover-menu</code> variable inside
				<code>assets/css/less/variables.less</code> and recompile <code>ace.less</code>
				or use CSS builder tool.
			</li>			
			
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/sidebar.hover -->
		


		<h3 class="info-title smaller" data-id="#basics/sidebar.compact">3. Compact Sidebar</h3>
		<!-- #section:basics/sidebar.compact -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Simply add <code>.compact</code> class to <code>.sidebar</code> element:
<pre data-language="html">
 <div class="sidebar responsive compact" id="sidebar">
 </div>
</pre>
			</li>
			
			<li>
				Compact sidebar is only available when screen width is above <b>991px</b>.
				<br />
				You can change that by modifying <code>@@screen-compact-menu</code> variable inside
				<code>assets/css/less/variables.less</code> and recompile <code>ace.less</code>
				or use CSS builder tool.
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/sidebar.compact -->


		<h3 class="info-title smaller" data-id="#basics/sidebar.highlight">4. Highlight Item</h3>
		<!-- #section:basics/sidebar.highlight -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				An alternative active item highlight.
				<br />
				Add <code>.highlight</code> to <b>LI</b> elements:
<pre data-language="html">
 <ul class="nav nav-list">
   <li class="highlight">
    ...
   </li>
 </ul>
</pre>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/sidebar.highlight -->
		
		
		<h3 class="info-title smaller">5. Fixed Sidebar</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Adding <code>.sidebar-fixed</code> class to <code>.sidebar</code> element makes it fixed by default:
<pre data-language="html">
 <div class="sidebar responsive sidebar-fixed" id="sidebar">
 </div>
</pre>
			</li>
			<li>
				For more info please see <a href="#settings.sidebar" class="help-more">sidebar settings</a>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		
		
		<h3 class="info-title smaller">6. Minimized Sidebar</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Adding <code>.menu-min</code> class to <code>.sidebar</code> element
				makes it minimized by default:
<pre data-language="html">
 <div class="sidebar responsive menu-min" id="sidebar">
 </div>
</pre>
			</li>
			
			<li>
				For more info please see <a href="#settings.sidebar" class="help-more">sidebar settings</a>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		
		
		<h3 class="info-title smaller" data-id="#basics/sidebar.multiple">7. Multiple Sidebar</h3>
		<!-- #section:basics/sidebar.multiple -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				You can have more than one sidebar on a page.
			</li>
			
			<li>
				Each one should have <code>.sidebar</code> class and an ID attribute.
			</li>
			
			<li>
				First sidebar should be at its default place
				and second should be inside <code>.main-content-inner</code>:
<pre data-language="html">
<div class="main-content">
  <div class="main-content-inner">
    <div id="sidebar2" class="sidebar h-sidebar navbar-collapse collapse">
      <!-- second sidebar, horizontal -->
    </div>

    <div class="page-content">
      <!-- page content area -->
    </div>
  </div>
</div>
</pre>
			</li>
			
			<li>
				If second sidebar is not horizontal, then <code>.page-content</code> should also
				have <code>.main-content</code> class and <code>.footer</code> should be moved
				after it:
<pre data-language="html">
<div class="main-content">
  <div class="main-content-inner">
    <div id="sidebar2" class="sidebar responsive">
      <!-- second sidebar, horizontal -->
    </div>

    <div class="page-content main-content">
      <!-- page content area -->
    </div>

    <div class="footer"></div>
  </div>
</div>
</pre>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/sidebar.multiple -->

	</div><!-- /.help-content -->
	<!-- /section:basics/sidebar.options -->


	
	<div class="hr hr-double hr32"></div>
	<h2 class="help-title blue lighter" data-id="#basics/sidebar.mark_active">
		Sidebar Active Item
	</h2>
	<div class="space-4"></div>

	<!-- #section:basics/sidebar.mark_active -->
	<div class="help-content">
		<h3 class="info-title smaller">Ajax</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
			<div>
				<span class="thumbnail inline">
					<img src="images/active.png" />
				</span>
			</div>

			
				If your page content is updated via ajax and you want to mark a different menu item as active,
				you can do like this as an example:

<pre data-language="javascript">
//inside the function when ajax content is loaded

//somehow get a reference to our newly clicked(selected) element's parent "LI"
var new_active = $(this).parent();

//remove ".active" class from all (previously) ".active" elements
$('.nav-list li.active').removeClass('active');

//add ".active" class to our newly selected item and all its parent "LI" elements
new_active.addClass('active').parents('.nav-list li').addClass('active');

//you can also update breadcrumbs:
var breadcrumb_items = [];
//$(this) is a reference to our clicked/selected element
$(this).parents('.nav-list li').each(function() {
  var link = $(this).find('> a');
  var text = link.text();
  var href = link.attr('href');
  breadcrumb_items.push({'text': text, 'href': href});
})
//now we have a breadcrumbs list and can replace breadcrumbs area
</pre>

			</li>
			
			<li>
				If you are using a client side application framework such as ember.js or angular.js,
				you may have other approaches that work better in the specific context.
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		
		
		<h3 class="info-title smaller">non-Ajax</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				If you navigate to other pages without ajax, you can have several approaches depending on your application.
			</li>
			
			<li>
				For example if you have a list of pages retrieved from a data source,
				you can lookup the item that matches current page and mark it as <b>active</b>.
				<br />
				You should also mark its parents as <b>active</b> and <b>open</b>
			</li>
			
			<li>
				In the following example we have a list of items.
				<br />
				We find our current item using its identifier.
				<br />
				Then we mark it as active, find its parent, mark the parent as active & open and repeat this action.
			</li>

			<li>
Sample PHP code:
<pre data-language="php">
//suppose we have a list of pages (associative array or other data structure)
//$menu_list = ... //retrieved from database
//or
 $menu_list = array(
    'id or name of page 1' => array (
         'href' => '#link1',
         'text' => 'item name or text',
       'parent' => 'parent id or name'
    )
    ,
   'id or name of page 2' => array (
         'href' => '#link2',
         'text' => 'item name or text',
       'parent' => 'parent id or name'
    )
    ,
   'new-user' => array (
         'href' => 'user/create',
         'text' => 'Add User',
       'parent' => 'operations'
    )
    ...
 );

//we somehow know the ID or tag or hash of the current page
//perhapse from a database lookup or by simply checking its URL
//for some pointers such as ID, file name, category name, etc ...
$current_page = 'new-user';
$breadcrumbs = array();//let's create our breadcrumbs array as well

//make_me should be a reference to current_item not a copy of it
$mark_me = &$menu_list[$current_page];
$open = false;
while(true) {//you can also use a recursive function instead of a loop
  $mark_me['active'] = true;//mark this as "active"
  if( $open ) $mark_me['open'] = true;//mark this as "open"
  
  $breadcrumbs[] = $mark_me;

  $parent_id = $mark_me['parent'];//see if it has a parent
  if( $parent_id == null || !isset($menu_list[$parent_id]) ) break;//if not, break
  
  $mark_me = &$menu_list[$parent_id];//set item's parent as the new "mark_me" and repeat
  $open = true;//parent elements should be marked as "open" too
}

foreach($menu_list as $id => $menu_item) {
  print('&lt;li class="');
   if( $menu_item['active'] ) print('active');
   if( $menu_item['open'] ) print(' open');
  print('"&gt;');
  //something like &lt;li class="active open"&gt; will be printed
  //...
  //print other parts of menu item
}

//now we also have a list of breadcrumb items to print later
</pre>

<hr />

Sample Javascript code (for example in Nodejs):
<pre data-language="javascript">
//suppose we have a list of pages (associative array or other data structure)
//var menu_list = ... //retrieved from database
//or
 var menu_list = {
    'id or name of page 1' : {
         'href' : '#link1',
         'text' : 'item name or text',
       'parent' : 'parent id or name'
    }
    ,
   'id or name of page 2' : {
         'href' : '#link2',
         'text' : 'item name or text',
       'parent' : 'parent id or name'
    }
    ,
   'new-user' : {
         'href' : 'user/create',
         'text' : 'Add User',
       'parent' : 'operations'
    }
    ...
 };

//we somehow know the ID or tag or hash of the current page
//perhapse from a database lookup or by simply checking its URL
//for some pointers such as ID, file name, category name, etc ...
var current_page = 'new-user';
var breadcrumbs = [];//let's create our breadcrumbs array as well

//make_me should be a reference to current_item not a copy of it
var mark_me = menu_list[current_page];
var open = false;
while(true) {//you can also use a recursive function instead of a loop
  mark_me['active'] = true;//mark this as "active"
  if( open ) mark_me['open'] = true;//mark this as "open"
  
  breadcrumbs.push(mark_me);

  var parent_id = mark_me['parent'];//see if it has a parent
  if( parent_id == null || !(parent_id in menu_list) ) break;//if not, break
  
  mark_me = menu_list[parent_id];//set item's parent as the new "mark_me" and repeat
  open = true;//parent elements should be marked as "open" too
}

var output = '';
for(var id in menu_list) if(menu_list.hasOwnProperty(id)) {
  var menu_item = menu_list[id];
  output += '&lt;li class="';
   if( menu_item['active'] ) output += 'active';
   if( menu_item['open'] ) output += ' open';
  output += '"&gt;';
  //something like &lt;li class="active open"&gt; will be printed
  //...
  //print other parts of menu item
}
console.log(output);

//now we also have a list of breadcrumb items to print later
</pre>

			</li>
			
			<li class="hidden">
			
			<div class="alert alert-info">
				In some languages such as PHP, you should make sure you are making changes to the item itself and not a copy of it.
				<br />
				For example in this assignment: <code>$mark_me = $menu_list[$current_page]</code>
				, when you modify <code>$mark_me</code> and for example mark it as active,
				changes are not reflected in
				<code>$menu_list[$current_page]</code> and therefore, when printing the <code>$menu_list</code> list,
				you won't have modified items.
				<br />
				For that you should make sure, you are using a reference not a copy:
				<code>$mark_me = <span class="bolder bigger-150 blue">&amp;</span>$menu_list[$current_page]</code>
				<br />
				Now <code>$mark_me</code> is a reference to <code>$menu_list[$current_page]</code>
				and therefore 
			</div>
			
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->

	</div><!-- /.help-content -->
	<!-- /section:basics/sidebar.mark_active -->
	
	
	<!-- /section:basics/sidebar -->	
</section>