Improved action menu

3 files changed, 22 insertions, 2 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index b878944..4978cc0 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -446,6 +446,12 @@ html
                 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
                     +action-button(quiet=true selected=true)= 'Menu'
                     +action-menu
+                        +action-menu-slot(class='l-card l-card--flush')
+                            +avatar(block=true circle=true size='sm' src='avatar.png' class='l-card__block')
+                            .l-card__block.l-card__block--main
+                                strong.u-db= 'Volpeon'
+                                small.u-db= '@volpeon@mk.vulpes.one'
+                        +action-menu-separator
                         +action-menu-item(icon='user')= 'View profile'
                         +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away'
                         +action-menu-separator
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
index 0f690ce..55ceacb 100644
--- a/tpl/objects/action-menu.pug
+++ b/tpl/objects/action-menu.pug
@@ -30,3 +30,14 @@ mixin action-menu-item
 
 mixin action-menu-separator
     .o-action-menu__separator
+
+mixin action-menu-slot
+    -
+        let classes = {
+            'o-action-menu__slot ': true,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+    div(class=classes)
+        block
diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug
index 83c0f7c..16de7c5 100644
--- a/tpl/objects/avatar.pug
+++ b/tpl/objects/avatar.pug
@@ -4,9 +4,12 @@ mixin avatar
     -
         let classes = {
             'o-avatar':         true,
-            'o-avatar--circle': attributes.circle
+            'o-avatar--circle': attributes.circle,
+            'u-db':             attributes.block
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
         }
-
         if (attributes.size) {
             classes['o-avatar--' + attributes.size] = true;
         }