Better menu

2 files changed, 18 insertions, 4 deletions

diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index 2e525da..3a2d057 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -4,11 +4,11 @@
 @include iro.props-namespace('menu') {
     @include iro.props-store((
         --dims: (
-            --spacing: fn.global-dim(--size --25),
+            --spacing: fn.global-dim(--size --50),
             --header: (
                 --font-size: fn.global-dim(--font-size --50),
             ),
-            --separator: fn.global-dim(--size --150),
+            --separator: fn.global-dim(--size --200),
             --item: (
                 --pad-x:    fn.global-dim(--size --150),
                 --pad-y:    fn.global-dim(--size --100),
@@ -50,6 +50,10 @@
             font-weight:    500;
             letter-spacing: .5px;
             text-transform: uppercase;
+
+            @include iro.bem-next-twin-elem {
+                margin-top: calc(fn.dim(--separator) + fn.dim(--spacing));
+            }
         }
 
         @include iro.bem-elem('item') {
@@ -78,6 +82,10 @@
                     }
                 }
             }
+
+            @include iro.bem-next-elem('header') {
+                margin-top: calc(fn.dim(--separator) + fn.dim(--spacing));
+            }
         }
 
         @include iro.bem-elem('separator') {
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug
index a255999..5d0ec7c 100644
--- a/tpl/views/menu.pug
+++ b/tpl/views/menu.pug
@@ -6,7 +6,7 @@ mixin view-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'
@@ -14,17 +14,23 @@ mixin view-menu
                 +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'
 
@@ -34,7 +40,7 @@ mixin view-menu
                         +user-card('volpeon', 0)
                     +menu-item
                         +user-card('curiousfox', 90)
-                    +menu-separator
+
                     +menu-header= 'Moderators'
                     +menu-item
                         +user-card('user3567', 135)