top menu dropdowns

src/_includes/menu.html

@@ -3,17 +3,17 @@
 	{% assign menu_levels = layout.menu | default: page.menu | split: '.' %}
 
 	{% for item in menu %}
-	<li class="nav-item">
+	<li class="nav-item{% if data.subpages %} dropdown{% endif %}">
 		{% assign index = item[0] %}
 		{% assign data = item[1] %}
-		<a href="{% if data.url %}{% if data.url != '#' %}{{ site.base }}/{% endif %}{{ data.url }}{% else %}javascript:void(0){% endif %}" class="nav-link{% if menu_levels[0] == index %} active{% endif %}{% if data.disabled %} disabled{% endif %}">{% if data.icon %}<i class="{{ data.icon }}"></i>{% endif %} {{ data.name }}{% if data.count %} <span class="badge badge-pill bg-primary text-white ml-2">{{ data.count }}</span>{% endif %}</a>
+		<a href="{% if data.url %}{% if data.url != '#' %}{{ site.base }}/{% endif %}{{ data.url }}{% else %}javascript:void(0){% endif %}" class="nav-link{% if menu_levels[0] == index %} active{% endif %}{% if data.disabled %} disabled{% endif %}"{% if data.subpages %} data-toggle="dropdown"{% endif %}>{% if data.icon %}<i class="{{ data.icon }}"></i>{% endif %} {{ data.name }}{% if data.count %} <span class="badge badge-pill bg-primary text-white ml-2">{{ data.count }}</span>{% endif %}</a>
 
 		{% if data.subpages %}
-			<div class="nav-submenu nav">
+			<div class="dropdown-menu dropdown-menu-arrow">
 				{% for subitem in data.subpages %}
 					{% assign subindex = subitem[0] %}
 					{% assign subdata = subitem[1] %}
-					<a href="{{ site.base }}/{{ subdata.url }}" class="nav-item {% if menu_levels[1] == subindex %}active{% endif %}">{{ subdata.name }}</a>
+					<a href="{{ site.base }}/{{ subdata.url }}" class="dropdown-item {% if menu_levels[1] == subindex %}active{% endif %}">{{ subdata.name }}</a>
 				{% endfor %}
 			</div>
 		{% endif %}

src/assets/scss/dashboard/_dropdown.scss

@@ -5,14 +5,17 @@
 .dropdown-menu {
 	box-shadow: $dropdown-box-shadow;
 	min-width: 12rem;
-	//max-width: 100%;
+}
+
+.dropdown-item {
+	color: $text-muted-dark;
 }
 
 .dropdown-menu-arrow {
 	&:before {
 		position: absolute;
 		top: -6px;
-		right: 12px;
+		left: 12px;
 		display: inline-block;
 		border-right: 5px solid transparent;
 		border-bottom: 5px solid $border-color;
@@ -24,13 +27,21 @@
 	&:after {
 		position: absolute;
 		top: -5px;
-		right: 12px;
+		left: 12px;
 		display: inline-block;
 		border-right: 5px solid transparent;
 		border-bottom: 5px solid #fff;
 		border-left: 5px solid transparent;
 		content: '';
 	}
+
+	&.dropdown-menu-right {
+		&:before,
+		&:after {
+			left: auto;
+			right: 12px;
+		}
+	}
 }
 
 .dropdown-toggle {