3 files changed, 86 insertions, 2 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index 4978cc0..fa9bd85 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -16,11 +16,21 @@ include objects/action-button.pug
 include objects/status-indicator.pug
 include objects/avatar.pug
 include objects/action-menu.pug
+include objects/menu.pug
 
 mixin box 
     +container(padX=true padY=true inPage=true theme="raised")
         block
 
+mixin user-card(name, hue)
+    -
+        const avaName = name.slice(0, 1)
+
+    .l-card.l-card--flush
+        +avatar(block=true size='xs' class='l-card__block' hue=hue)
+            = avaName
+        = name
+
 
 doctype html
 html
@@ -460,3 +470,50 @@ html
                         +action-menu-item(icon='tags')= 'Tags'
                         +action-menu-item(postIcon='chevron-right')= 'More'
 
+            //-----------------------------------------
+
+            +h1-heading(level='xl')= 'Menu'
+            +rule(level='medium')
+
+            +box
+                div(style={ display: 'flex', gap: '2rem' })
+                    +menu
+                        +menu-header= 'Category 1'
+                        +menu-item= 'Mark as away'
+                        +menu-item= 'Delete'
+                        +menu-separator
+                        +menu-header= 'Category 2'
+                        +menu-item(icon='bookmark')= 'Bookmark'
+                        +menu-item(icon='tags')= 'Tags'
+
+                    +menu
+                        +menu-item
+                            strong= 'Bouncer'
+                        +menu-separator
+                        +menu-item
+                            strong= 'Libera'
+                        +menu-item(icon='hash')= 'achannel'
+                        +menu-item(icon='hash')= 'kitsuneirc'
+                        +menu-item(icon='green' iconIsStatus=true)= 'volpeon'
+                        +menu-item(icon='red' iconIsStatus=true)= 'someone'
+                        +menu-separator
+                        +menu-item
+                            strong= 'Ergo Testnet'
+                        +menu-separator
+                        +menu-item
+                            strong= 'NixNet'
+
+                    +menu
+                        +menu-header= 'Operators'
+                        +menu-item
+                            +user-card('volpeon', 0)
+                        +menu-item
+                            +user-card('curiousfox', 90)
+                        +menu-separator
+                        +menu-header= 'Moderators'
+                        +menu-item
+                            +user-card('user3567', 135)
+                        +menu-item
+                            +user-card('johndoe', 270)
+
+
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
index 55ceacb..8c1a584 100644
--- a/tpl/objects/action-menu.pug
+++ b/tpl/objects/action-menu.pug
@@ -1,4 +1,3 @@
-include action-button.pug
 include icon.pug
 include status-indicator.pug
 
@@ -14,7 +13,7 @@ mixin action-menu
         block
 
 mixin action-menu-item
-    button.o-action-menu__item.o-action-menu__item--native(disabled=attributes.disabled)
+    button.o-action-menu__item(disabled=attributes.disabled)
         .l-card.l-card--flush
             .l-card__block.o-action-menu__icon-slot
                 if attributes.icon
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
new file mode 100644
index 0000000..7c9c07e
--- /dev/null
+++ b/tpl/objects/menu.pug
@@ -0,0 +1,28 @@
+include icon.pug
+include status-indicator.pug
+
+mixin menu
+    .o-menu
+        block
+
+mixin menu-item
+    button.o-menu__item(disabled=attributes.disabled)
+        .l-card.l-card--flush
+            if attributes.icon
+                .l-card__block.o-menu__icon-slot
+                    if attributes.iconIsStatus
+                        +status-indicator(attributes.icon)(class='o-menu__icon')
+                    else
+                        +icon(attributes.icon)(class='o-menu__icon')
+            .l-card__block.l-card__block--main
+                block
+            if attributes.postIcon
+                .l-card__block.o-menu__icon-slot
+                    +icon(attributes.postIcon)(class='o-menu__icon')
+
+mixin menu-header
+    header.o-menu__header
+        block
+
+mixin menu-separator
+    .o-menu__separator