sidebar menu 3rd level

pages/_data/menu.yml

@@ -72,6 +72,16 @@ charts:
   title: Charts
   icon: pie-chart
 
+a:
+  title: A
+  icon: menu
+  children:
+    b:
+      title: B
+      children:
+        c:
+          title: C
+          url: tmp.html
 
 layouts:
   title: Layouts

pages/_includes/layout/homepage.html

@@ -63,14 +63,6 @@
    <div class="col-sm-6 col-xl-3">
       {% include cards/small-stats.html color="yellow" chart-type="pie" chart-data="22/100" color="yellow" count="132" subtitle="Comments" description="16 waiting" %}
    </div>
-</div>
-
-<div class="row row-deck">
-   {% for article in site.data.articles limit: 3 offset: 4 %}
-   <div class="col-lg">
-      {% include cards/blog-single.html article=article type="image" %}
-   </div>
-   {% endfor %}
 
    <div class="col-12">
       {% include cards/invoices.html %}

pages/_includes/layout/menu-aside.html

@@ -5,7 +5,7 @@
 	{% for level-1 in site.data.menu %}
 	<li class="sidebar-nav-item">
 
-		<a{% unless level-1[1].children %} href="{{ site.base }}/{{ level-1[1].url }}"{% endunless %} class="sidebar-nav-link{% if level-1[0] == current-page[0] and current-page.size == 1 %} active{% endif %}" {% if level-1[1].children %}data-toggle="collapse" data-target="#sidebar-menu-{{ level-1[0] }}"{% if level-1[0] == current-page[0] %} aria-expanded="true"{% endif %}{% endif %}>
+		<a {% unless level-1[1].children %}href="{{ site.base }}/{{ level-1[1].url }}"{% endunless %} class="sidebar-nav-link{% if level-1[0] == current-page[0] and current-page.size == 1 %} active{% endif %}" {% if level-1[1].children %}data-toggle="collapse" data-target="#sidebar-menu-{{ level-1[0] }}"{% if level-1[0] == current-page[0] %} aria-expanded="true"{% endif %}{% endif %}>
 			{% if level-1[1].icon %}
 				{% assign icon = level-1[1].icon %}
 				{% include ui/icon.html icon=icon class="nav-icon" %}
@@ -19,22 +19,42 @@
 			{% include ui/badge.html text=badge color=badge-color %}
 			{% endif %}
 
-        {% if level-1[1].children %}
+			{% if level-1[1].children %}
-        <span class="sidebar-nav-arrow"></span>
+			<span class="sidebar-nav-arrow"></span>
-        {% endif %}
+			{% endif %}
 		</a>
 
 		{% if level-1[1].children %}
 		<ul class="sidebar-subnav collapse{% if level-1[0] == current-page[0] %} show{% endif %}" id="sidebar-menu-{{ level-1[0] }}">
 			{% for level-2 in level-1[1].children %}
 			<li class="sidebar-nav-item">
-				<a href="{{ site.base }}/{{ level-2[1].url }}" class="sidebar-nav-link{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}">
+				<a {% unless level-2[1].children %} href="{{ site.base }}/{{ level-2[1].url }}"{% endunless %} class="sidebar-nav-link{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% if level-2[1].children %}data-toggle="collapse" data-target="#sidebar-menu-{{ level-2[0] }}"{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] %} aria-expanded="true"{% endif %}{% endif %}>
 					<span>{{ level-2[1].title }}</span>
 					{% if level-2[1].badge %}
 					{% assign badge = level-2[1].badge %}
 					{% include ui/badge.html text=badge color="green" %}
 					{% endif %}
+
+					{% if level-2[1].children %}
+					<span class="sidebar-nav-arrow"></span>
+					{% endif %}
 				</a>
+
+				{% if level-2[1].children %}
+				<ul class="sidebar-subnav collapse{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] %} show{% endif %}" id="sidebar-menu-{{ level-2[0] }}">
+					{% for level-3 in level-2[1].children %}
+					<li class="sidebar-nav-item">
+						<a href="{{ site.base }}/{{ level-3[1].url }}" class="sidebar-nav-link{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and level-3[0] == current-page[2] and current-page.size == 3 %} active{% endif %}">
+							<span>{{ level-3[1].title }}</span>
+							{% if level-3[1].badge %}
+							{% assign badge = level-3[1].badge %}
+							{% include ui/badge.html text=badge color="green" %}
+							{% endif %}
+						</a>
+					</li>
+					{% endfor %}
+				</ul>
+				{% endif %}
 			</li>
 			{% endfor %}
 		</ul>

pages/invoice.html

@@ -1,6 +1,7 @@
 ---
 title: Invoice
 layout: default
+menu: extra.invoice
 ---
 
 {% include cards/invoice.html %}

pages/tmp.html

@@ -1,5 +1,6 @@
 ---
 tmp: true
+menu: a.b.c
 ---
 
 <div class="row">

scss/layout/_layout.scss

@@ -367,6 +367,10 @@ Sidebar menu
   margin-left: auto;
   @include caret(right);
 
+  &:after {
+    transition: .3s transform;
+  }
+
   .sidebar-nav-link[aria-expanded="true"] &:after {
     transform: rotate(-45deg);
   }