Improved action menu example

2 files changed, 14 insertions, 8 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index a59526e..1b10016 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -285,7 +285,7 @@ html
                         +text-field(placeholder='Example: Volpeon')
 
                     +form-item('Password', 'At least 6 characters, all characters allowed')
-                        +text-field(placeholder='Example: hunter2', type='password')
+                        +text-field(placeholder='Example: hunter2' type='password')
 
                     +form-item('Bio')
                         +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...')
@@ -443,10 +443,13 @@ html
             +rule(level='medium')
 
             +box
-                +action-menu
-                    +action-menu-item(icon='trash')= 'Item 1'
-                    +action-menu-item= 'Item 2'
-                    +action-menu-item= 'Item 3'
-                    +action-menu-separator
-                    +action-menu-item= 'Item 4'
+                div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
+                    +action-button(quiet=true selected=true)= 'Menu'
+                    +action-menu
+                        +action-menu-item(icon='user')= 'View profile'
+                        +action-menu-separator
+                        +action-menu-item(icon='trash')= 'Delete'
+                        +action-menu-item(icon='bookmark')= 'Bookmark'
+                        +action-menu-item(icon='tags')= 'Tags'
+                        +action-menu-item(postIcon='chevron-right')= 'More'
 
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
index 85f93bf..6ab4e0d 100644
--- a/tpl/objects/action-menu.pug
+++ b/tpl/objects/action-menu.pug
@@ -17,9 +17,12 @@ mixin action-menu-item
         .l-card.l-card--flush
             .l-card__block.o-action-menu__icon-slot
                 if attributes.icon
-                    +icon(attributes.icon)
+                    +icon(attributes.icon)(class='o-action-menu__icon')
             .l-card__block.l-card__block--main
                 block
+            .l-card__block.o-action-menu__icon-slot
+                if attributes.postIcon
+                    +icon(attributes.postIcon)(class='o-action-menu__icon')
 
 mixin action-menu-separator
     .o-action-menu__separator