Added menu

9 files changed, 201 insertions, 36 deletions

diff --git a/package.json b/package.json
index 0a8a966..e89abdb 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
         "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets",
         "build:assets": "cp -r static/* public/",
         "build:app": "pug tpl/index.pug -p tpl --out public/",
-        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right public/icons.svg",
+        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right hash public/icons.svg",
         "build:style": "sass --load-path=node_modules src/index.scss public/style.css",
         "lint:style": "stylelint \"src/**/*.scss\"",
         "fix:style": "stylelint \"src/**/*.scss\" --fix",
diff --git a/src/_functions.scss b/src/_functions.scss
index f15ed0c..9425413 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -43,6 +43,7 @@
         font-style:              font-prop($font, $overrides, $key, --style),
         line-height:             font-prop($font, $overrides, $key, --line-height),
         text-transform:          font-prop($font, $overrides, $key, --transform),
+        letter-spacing:          font-prop($font, $overrides, $key, --spacing),
         font-variant-alternates: font-prop($font, $overrides, $key, --variant-alternates),
     );
 
diff --git a/src/index.scss b/src/index.scss
index b4c437e..44fba76 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -20,6 +20,7 @@
 @use 'objects/status-indicator';
 @use 'objects/avatar';
 @use 'objects/action-menu';
+@use 'objects/menu';
 
 @use 'layouts/form';
 
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 2c922f8..ff88774 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -43,8 +43,6 @@
     ), 'colors');
 
     @include iro.bem-object(iro.props-namespace()) {
-        @include iro.bem-composed-of('action-button' 'object');
-
         position:         absolute;
         z-index:          10000;
         top:              fn.dim(--y);
@@ -72,12 +70,6 @@
             transform: translate(-100%, 0);
         }
 
-        @include iro.bem-elem('separator') {
-            height:           1px;
-            margin:           fn.dim(--separator) 0;
-            background-color: fn.color(--separator);
-        }
-
         @include iro.bem-elem('item') {
             display:    block;
             box-sizing: border-box;
@@ -91,18 +83,10 @@
             &:enabled {
                 color: currentColor;
 
-                @include iro.bem-elem('icon') {
-                    color: fn.color(--icon);
-                }
-
                 &:hover,
                 &:active {
                     background-color: fn.color(--item --hover --bg);
                     color:            fn.color(--item --hover --label);
-
-                    @include iro.bem-elem('icon') {
-                        color: currentColor;
-                    }
                 }
     
                 @include iro.bem-at-theme('keyboard') {
@@ -112,15 +96,17 @@
                         background-color: fn.color(--item --key-focus --bg);
                         box-shadow:       fn.color(--item --key-focus --shadow);
                         color:            fn.color(--item --key-focus --label);
-
-                        @include iro.bem-elem('icon') {
-                            color: currentColor;
-                        }
                     }
                 }
             }
         }
 
+        @include iro.bem-elem('separator') {
+            height:           1px;
+            margin:           fn.dim(--separator) 0;
+            background-color: fn.color(--separator);
+        }
+
         @include iro.bem-elem('slot') {
             padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x);
         }
@@ -130,9 +116,5 @@
             justify-content: center;
             width:           1em;
         }
-
-        @include iro.bem-elem('icon') {
-            color: fn.color(--item --disabled --label);
-        }
     }
 }
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index cd91c61..c1feb5e 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -51,20 +51,25 @@
         }
 
         @include iro.bem-modifier('sm') {
-            @include fn.set-font(--standard, (--line-height: null));
+            @include fn.set-font(--standard, (
+                --line-height: null,
+                --size: fn.global-dim(--font-size --md),
+                --weight: 500
+            ));
 
-            color:       fn.color(--strong);
-            font-size:   fn.global-dim(--font-size --md);
-            font-weight: 500;
+            color: fn.color(--strong);
         }
 
         @include iro.bem-modifier('xs') {
-            @include fn.set-font(--standard, (--line-height: null));
+            @include fn.set-font(--standard, (
+                --line-height: null,
+                --size:        fn.global-dim(--font-size --xs),
+                --weight:      500,
+                --transform:   uppercase,
+                --spacing:     .5px
+            ));
 
-            color:          fn.color(--light);
-            font-size:      fn.global-dim(--font-size --xs);
-            font-weight:    500;
-            text-transform: uppercase;
+            color: fn.color(--light);
         }
     }
 }
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
new file mode 100644
index 0000000..91ef0a5
--- /dev/null
+++ b/src/objects/_menu.scss
@@ -0,0 +1,92 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('menu') {
+    @include iro.props-store((
+        --dims: (
+            --separator: .6rem,
+            --item: (
+                --pad-x: .8rem,
+                --pad-y: .4rem,
+            ),
+        ),
+    ), 'dims');
+
+    @include iro.props-store((
+        --colors: (
+            --header: (
+                --label:  fn.global-color(--fg-hi2),
+            ),
+            --item: (
+                --hover: (
+                    --bg:    fn.global-color(--obj-hi),
+                    --label: fn.global-color(--fg-lo),
+                ),
+                --disabled: (
+                    --label: fn.global-color(--fg-hi3),
+                ),
+                --key-focus: (
+                    --bg:     fn.global-color(--obj-hi),
+                    --label:  fn.global-color(--fg-lo),
+                    --border: fn.global-color(--focus --fill),
+                    --shadow: fn.global-color(--focus --shadow),
+                ),
+            ),
+        ),
+    ), 'colors');
+
+    @include iro.bem-object(iro.props-namespace()) {
+        @include iro.bem-elem('header') {
+            padding:
+                calc(1.5 * fn.dim(--item --pad-y))
+                fn.dim(--item --pad-x)
+                calc(.5 * fn.dim(--item --pad-y));
+            color:          fn.color(--header --label);
+            font-size:      fn.global-dim(--font-size --xs);
+            font-weight:    500;
+            letter-spacing: .5px;
+            text-transform: uppercase;
+        }
+
+        @include iro.bem-elem('item') {
+            display:    block;
+            box-sizing: border-box;
+            width:      100%;
+            padding:    calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px);
+            border:     2px solid transparent;
+            color:      fn.color(--item --disabled --label);
+
+            &:link,
+            &:visited,
+            &:enabled {
+                color: currentColor;
+
+                &:hover,
+                &:active {
+                    background-color: fn.color(--item --hover --bg);
+                    color:            fn.color(--item --hover --label);
+                }
+    
+                @include iro.bem-at-theme('keyboard') {
+                    &:focus {
+                        border-radius:    2px;
+                        border-color:     fn.color(--item --key-focus --border);
+                        background-color: fn.color(--item --key-focus --bg);
+                        box-shadow:       fn.color(--item --key-focus --shadow);
+                        color:            fn.color(--item --key-focus --label);
+                    }
+                }
+            }
+        }
+
+        @include iro.bem-elem('separator') {
+            height: fn.dim(--separator);
+        }
+
+        @include iro.bem-elem('icon-slot') {
+            display:         flex;
+            justify-content: center;
+            width:           1em;
+        }
+    }
+}
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