list icons

_docs/avatars.md

@@ -1,5 +1,6 @@
 ---
 title: Avatars
+icon: fe fe-user
 ---
 
 ### Simple avatar

_docs/buttons.md

@@ -1,11 +1,10 @@
 ---
 title: Buttons
+icon: fe fe-plus-square
 description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
 ---
 
 
-{:toc}
-
 ### Button tag
 
 The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).

_docs/cards.md

@@ -1,5 +1,6 @@
 ---
 title: Cards
+icon: fe fe-image
 description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. 
 ---
 

_docs/charts.md

@@ -1,5 +1,6 @@
 ---
 title: Charts
+icon: fe fe-pie-chart
 ---
 
 ### c3.js charts 

_docs/form-components.md

@@ -1,5 +1,6 @@
 ---
 title: Form components
+icon: fe fe-check-square
 ---
 
 {:toc}

_docs/typography.md

@@ -1,5 +1,6 @@
 ---
 title: Typography
+icon: fe fe-type
 description: A single class to handle WYSIWYG generated content, where only HTML tags are available
 ---
 

_layouts/docs.html

@@ -10,13 +10,14 @@ title: Documentation
 	<div class="row">
 		<div class="col-lg-3">
 			<div class="card">
-				<ul class="list-group card-list-group">
+				<div class="list-group card-list-group">
 					{% for doc in site.docs %}
-					{% unless doc.hide %}<li class="list-group-item"><a href="{{ site.base }}{{ doc.url }}">{{ doc.title }}</a></li>{% endunless %}
+					{% unless doc.hide %}<a href="{{ site.base }}{{ doc.url }}" class="list-group-item list-group-item-action{% if page.url == doc.url %} active{% endif %}"><span class="icon mr-3"><i class="{{ doc.icon }}"></i></span>{{ doc.title }}</a>{% endunless %}
 					{% endfor %}
-				</ul>
 				</div>
 			</div>
+
+		</div>
 		<div class="col-lg-9">
 			<div class="card">
 				<div class="card-body">

assets/scss/_variables.scss

@@ -277,6 +277,9 @@ $aside-width: 22rem;
 
 // List group
 $list-group-border-color: $border-color;
+$list-group-active-color: $primary;
+$list-group-active-bg: mix($primary, #fff, 4%);
+$list-group-active-border-color: $list-group-border-color;
 
 // Popovers
 $popover-body-padding-y: .75rem;

assets/scss/dashboard/_avatar.scss

@@ -11,6 +11,7 @@
 	font-weight: 600;
 	vertical-align: bottom;
 	font-size: .875rem;
+	user-select: none;
 
 	i {
 		font-size: 125%;

assets/scss/dashboard/_list.scss

@@ -31,3 +31,11 @@
 		border-top: 1px solid $border-color;
 	}
 }
+
+.list-group-item {
+	&.active {
+		.icon {
+			color: inherit !important;
+		}
+	}
+}