Fix badge in menu item

3 files changed, 21 insertions, 5 deletions

diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index cbd4194..b8bbb02 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -36,6 +36,10 @@
                     --border: fn.global-color(--focus --fill),
                     --shadow: fn.global-color(--focus --shadow),
                 ),
+                --badge: (
+                    --bg:    fn.global-color(--bg),
+                    --label: fn.global-color(--fg-lo),
+                )
             ),
         ),
     ), 'colors');
@@ -72,6 +76,11 @@
                 @include iro.bem-multi('&:hover, &:active', 'is' 'selected') {
                     background-color: fn.color(--item --hover --bg);
                     color:            fn.color(--item --hover --label);
+
+                    @include iro.bem-elem('badge') {
+                        background-color: fn.color(--item --badge --bg);
+                        color:            fn.color(--item --badge --label);
+                    }
                 }
     
                 @include iro.bem-at-theme('keyboard') {
diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug
index 1525130..441eb51 100644
--- a/tpl/objects/badge.pug
+++ b/tpl/objects/badge.pug
@@ -1,7 +1,8 @@
 mixin badge(variant)
     -
         let classes = {
-            'o-badge': true
+            'o-badge':       true,
+            'o-menu__badge': !!attributes.menu
         }
         if (attributes.size) {
             classes['o-badge--' + attributes.size] = true
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug
index 6d2cf10..4d7444f 100644
--- a/tpl/views/menu.pug
+++ b/tpl/views/menu.pug
@@ -19,10 +19,16 @@ mixin view-menu
 
                     +menu-item(header=true)
                         = '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-item(icon='hash')
+                        = 'achannel'
+                        +badge('primary')(menu=true)= '12 '
+                    +menu-item(icon='hash')
+                        = 'kitsuneirc'
+                        +badge(menu=true)= '31 '
+                    +menu-item(icon='green' iconIsStatus=true)
+                        = 'volpeon'
+                    +menu-item(icon='red' iconIsStatus=true)
+                        = 'someone'
 
                     +menu-separator