Layout: Use mixin for top navigation

src/templates/layout.pug

@@ -1,3 +1,5 @@
+include ../../../pillar/src/templates/mixins/components
+
 doctype
 html(lang="en")
 	head
@@ -98,8 +100,7 @@ html(lang="en")
 					i.search-icon.pi-search
 			| {% endblock navigation_search %}
 
-			.collapse.navbar-collapse
+			+nav-secondary()(class="ml-auto nav-main")
-				ul.navbar-nav.ml-auto
 				| {% if node and node.properties and node.properties.category %}
 				| {% set category = node.properties.category %}
 				| {% else %}
@@ -107,17 +108,17 @@ html(lang="en")
 				| {% endif %}
 
 				| {% block navigation_sections %}
-					li
+
-						a.navbar-item(
+				+nav-secondary-link(
 					href="{{ url_for('main.main_blog') }}",
 					title="Blender Cloud Blog",
 					data-toggle="tooltip",
 					data-placement="bottom",
-							class="{% if category == 'blog' %}active{% endif %}")
+					class="{% if category == 'blog' %}active{% endif %} px-2")
-							span Blog
+					| Blog
 
-					li.dropdown
+				li.nav-item.dropdown
-						a.navbar-item.dropdown-toggle(
+					a.nav-link.dropdown-toggle.px-2(
 						href="",
 						data-toggle="dropdown",
 						title="Libraries")
@@ -150,9 +151,8 @@ html(lang="en")
 								i.pi-character
 								| Characters
 
-
+				li.nav-item.dropdown
-					li(class="dropdown")
+					a.nav-link.dropdown-toggle.px-2(
-						a.navbar-item.dropdown-toggle(
 					href="{{ url_for('cloud.workshops') }}"
 					data-toggle="dropdown",
 					title="Training")
@@ -185,8 +185,8 @@ html(lang="en")
 								i.pi-image
 								| Art Gallery
 
-					li(class="dropdown")
+				li.nav-item.dropdown
-						a.navbar-item.dropdown-toggle(
+					a.nav-link.dropdown-toggle.px-2(
 						href="{{ url_for('cloud.open_projects') }}",
 						title="Browse all the Open Projects",
 						data-toggle="dropdown",
@@ -217,8 +217,8 @@ html(lang="en")
 							a.navbar-item(href="{{ url_for('cloud.open_projects') }}")
 								span.pl-2 All Open Projects
 
-					li(class="dropdown")
+				li.nav-item.dropdown
-						a.navbar-item.dropdown-toggle(
+					a.nav-link.dropdown-toggle.px-2(
 						href="{{ url_for('cloud.services') }}",
 						title="Blender Cloud Services",
 						data-toggle="dropdown",