dropdowns fixes

pages/_data/menu.yml

@@ -11,7 +11,7 @@ forms:
 base:
   title: Base
   icon: package
-  columns: 3
+  columns: 2
   children:
     empty:
       title: Empty page
@@ -22,7 +22,6 @@ base:
     buttons:
       url: buttons.html
       title: Buttons
-      badge: New
     cards:
       url: cards.html
       title: Cards
@@ -54,18 +53,7 @@ base:
     lists:
       title: Lists
       url: lists.html
-    users:
-      title: Users
-      url: users.html
-    gallery:
-      title: Gallery
-      url: gallery.html
-    profile:
-      title: Profile
-      url: profile.html
-    music:
-      title: Music
-      url: music.html
+
 
     authentication:
       title: Authentication
@@ -125,9 +113,21 @@ extra:
     search-results:
       title: Search results
       url: search-results.html
-    pricing cards:
+    pricing-cards:
       url: pricing.html
       title: Pricing cards
+    users:
+      title: Users
+      url: users.html
+    gallery:
+      title: Gallery
+      url: gallery.html
+    profile:
+      title: Profile
+      url: profile.html
+    music:
+      title: Music
+      url: music.html
 docs:
   title: Docs
   icon: file-text
@@ -208,7 +208,6 @@ docs:
       url: docs/range-slider.html
     ribbons: 
       title: Ribbons
-      badge: New
       url: docs/ribbons.html
     spinners: 
       title: Spinners

pages/_includes/ui/dropdown-menu-all.html

-<div class="dropdown-menu position-relative d-inline-block mr-3 mb-3 align-top">
+<div class="dropdown-menu{% if include.show %} dropdown-menu-demo{% endif %}">
 
 	<h6 class="dropdown-header">Dropdown header</h6>
 	<a href="#" class="dropdown-item">{% include ui/icon.html icon="activity" class="dropdown-item-icon" %} Item 1</a>
@@ -25,5 +25,11 @@
 
 	<div class="dropdown-divider"></div>
 
+	{% for person in site.data.people limit: 3 %}
+	<a href="#" class="dropdown-item">{% include ui/avatar.html person-id=person.id size="sm" class="rounded mr-2" %} {{ person.full_name }}</a>
+	{% endfor %}
+
+	<div class="dropdown-divider"></div>
+
 	<a href="#" class="dropdown-item">{% include ui/icon.html icon="log-out" class="dropdown-item-icon" %} Logout</a>
 </div>

pages/_includes/ui/dropdown-menu.html

-<div class="dropdown-menu{% if include.right %} dropdown-menu-right{% endif %}{% if include.show %} position-relative d-inline-block{% endif %}{% if include.arrow %} dropdown-menu-arrow{% endif %}{% if include.dark %} bg-dark text-white{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+<div class="dropdown-menu{% if include.right %} dropdown-menu-right{% endif %}{% if include.show %} dropdown-menu-demo{% endif %}{% if include.arrow %} dropdown-menu-arrow{% endif %}{% if include.dark %} bg-dark text-white{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 	{% if include.check or include.radio %}
 		{% for i in (1..3) %}
 		<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="{% if include.radio %}radio{% else %}checkbox{% endif %}"> Option {{ i }}</label>
 		{% endfor %}
+	{% elsif include.people %}
+		{% for person in site.data.people limit: 5 %}
+		<a href="#" class="dropdown-item">{% include ui/avatar.html person-id=person.id size="sm" class="rounded mr-2" %} {{ person.full_name }}</a>
+		{% endfor %}
 	{% elsif include.type == 'text' %}
 
 	{% else %}

pages/dropdowns.html

 ---
 title: Dropdowns
 page-header: Dropdowns
+menu: base.dropdowns
 ---
 
+<div class="row">
+	<div class="col-sm-6 col-lg-3">
+		{% include ui/dropdown-menu-all.html show=true %}
+	</div>
+	<div class="col-sm-6 col-lg-3">
+		{% include ui/dropdown-menu.html show=true %}
+		{% include ui/dropdown-menu.html show=true separated=true %}
+		{% include ui/dropdown-menu.html show=true active=true %}
+		{% include ui/dropdown-menu.html show=true disabled=true %}
+		{% include ui/dropdown-menu.html show=true header=true %}
+		{% include ui/dropdown-menu.html show=true icons=true header=true %}
+		{% include ui/dropdown-menu.html show=true arrow=true %}
+	</div>
+	<div class="col-sm-6 col-lg-3">
+		{% include ui/dropdown-menu.html show=true %}
+		{% include ui/dropdown-menu.html show=true separated=true %}
+		{% include ui/dropdown-menu.html show=true active=true %}
+		{% include ui/dropdown-menu.html show=true disabled=true %}
+		{% include ui/dropdown-menu.html show=true header=true %}
+		{% include ui/dropdown-menu.html show=true icons=true %}
+		{% include ui/dropdown-menu.html show=true badge=true %}
+	</div>
+	<div class="col-sm-6 col-lg-3">
+		{% include ui/dropdown-menu.html show=true dark=true %}
+		{% include ui/dropdown-menu.html show=true dark=true separated=true %}
+		{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true %}
+		{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true icons=true %}
+		{% include ui/dropdown-menu.html show=true check=true %}
+		{% include ui/dropdown-menu.html show=true radio=true %}
+		{% include ui/dropdown-menu.html show=true people=true %}
+	</div>
+</div>
 
 
-{% include ui/dropdown-menu-all.html %}
 
-
-{% include ui/dropdown-menu.html show=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true separated=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true active=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true disabled=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true header=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true icons=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true icons=true header=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true arrow=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true dark=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true dark=true separated=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true icons=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true badge=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true check=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true radio=true class="mr-3 mb-3 align-top" %}

pages/gallery.html

@@ -4,7 +4,7 @@ page-header: Gallery
 page-header-description: 1-12 of 241 photos
 page-header-actions: photos
 done: true
-menu: base.gallery
+menu: extra.gallery
 ---
 {% assign horizontal = 0 %}
 

pages/music.html

 ---
 title: Music components
 page-header: Music components
-menu: base.music
+menu: extra.music
 ---
 
 <div class="row">

pages/profile.html

 ---
 title: Profile
 page-header: Profile
-menu: base.profile
+menu: extra.profile
 ---
 
 <div class="row">

pages/users.html

@@ -5,7 +5,7 @@ page-header: Users
 page-header-actions: users
 page-header-description: 1-18 of 413 people
 done: true
-menu: base.users
+menu: extra.users
 ---
 
 <div class="row">

scss/demo.scss

@@ -33,4 +33,12 @@ body.no-transitions * {
   a {
     color: $text-muted;
   }
+}
+
+.dropdown-menu-demo {
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  top: 0;
+  margin-bottom: 1rem;
 }
\ No newline at end of file