Improved action menu

7 files changed, 52 insertions, 2 deletions

diff --git a/src/_base.scss b/src/_base.scss
index 54df879..6e404fe 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -35,6 +35,16 @@ p {
     }
 }
 
+strong {
+    color:       fn.color(--fg-lo);
+    font-weight: bold;
+}
+
+small {
+    color:     fn.color(--fg-hi);
+    font-size: fn.dim(--font-size --sm);
+}
+
 ul,
 ol {
     margin:       fn.dim(--paragraph --margin-top) 0 0;
diff --git a/src/_utils.scss b/src/_utils.scss
new file mode 100644
index 0000000..72c1f2f
--- /dev/null
+++ b/src/_utils.scss
@@ -0,0 +1,14 @@
+@use 'iro-sass/src/index' as iro;
+
+@include iro.bem-utility('db') {
+    display: block;
+}
+
+@include iro.bem-utility('dc') {
+    display: contents;
+}
+
+@include iro.bem-utility('elp') {
+    overflow:      hidden;
+    text-overflow: ellipsis;
+}
diff --git a/src/index.scss b/src/index.scss
index 5ceb11f..b4c437e 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -23,4 +23,6 @@
 
 @use 'layouts/form';
 
+@use 'utils';
+
 @use 'apply-vars';
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 7c2dc4f..e908fdf 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -100,6 +100,10 @@
             }
         }
 
+        @include iro.bem-elem('slot') {
+            padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x);
+        }
+
         @include iro.bem-elem('icon-slot') {
             display:         flex;
             justify-content: center;
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;
         }