1 files changed, 57 insertions, 0 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)
+
+