Menus

9 files changed, 130 insertions, 56 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index a93418c..7b419b3 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -21,8 +21,9 @@ include objects/action-button.pug
 include objects/overflow-button.pug
 include objects/status-indicator.pug
 include objects/avatar.pug
-include objects/action-menu.pug
+include objects/popover.pug
 include objects/menu.pug
+include objects/side-nav.pug
 include objects/icon-nav.pug
 include objects/emoji.pug
 include objects/backdrop.pug
@@ -48,7 +49,7 @@ mixin user-card(name, hue)
         const avaName = name.slice(0, 1)
 
     .l-media.l-media--flush.l-media--75
-        +avatar(block=true size='50' class='l-media__block' hue=hue)
+        +avatar(block=true size='xs' class='l-media__block' hue=hue)
             = avaName
         = name
 
@@ -71,8 +72,10 @@ include views/action-button.pug
 include views/overflow-button.pug
 include views/status-indicator.pug
 include views/avatar.pug
+include views/popover.pug
 include views/action-menu.pug
 include views/menu.pug
+include views/side-nav.pug
 include views/icon-nav.pug
 include views/backdrop.pug
 include views/dialog.pug
@@ -116,8 +119,10 @@ html
             +view-overflow-button
             +view-status-indicator
             +view-avatar
-            +view-action-menu
+            +view-side-nav
+            +view-popover
             +view-menu
+            +view-action-menu
             +view-icon-nav
             +view-backdrop
             +view-dialog
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
deleted file mode 100644
index be9d86d..0000000
--- a/tpl/objects/action-menu.pug
+++ /dev/null
@@ -1,35 +0,0 @@
-include icon.pug
-include status-indicator.pug
-
-mixin action-menu
-    .o-action-menu.u-p-static.t-up
-        block
-
-mixin action-menu-item
-    button.o-action-menu__item(disabled=attributes.disabled)
-        .l-media.l-media--flush
-            .l-media__block.o-action-menu__icon-slot
-                if attributes.icon
-                    if attributes.iconIsStatus
-                        +status-indicator(attributes.icon)(class='o-action-menu__icon')
-                    else
-                        +icon(attributes.icon)(class='o-action-menu__icon')
-            .l-media__block.l-media__block--main
-                block
-            .l-media__block.o-action-menu__icon-slot
-                if attributes.postIcon
-                    +icon(attributes.postIcon)(class='o-action-menu__icon')
-
-mixin action-menu-separator
-    .o-action-menu__separator
-
-mixin action-menu-slot
-    -
-        let classes = {
-            'o-action-menu__slot ': true,
-        }
-        if (attributes.class) {
-            classes[attributes.class] = true;
-        }
-    div(class=classes)
-        block
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index 1dd38ef..a8b20d7 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -46,3 +46,14 @@ mixin menu-header
 
 mixin menu-separator
     .o-menu__separator
+
+mixin menu-slot
+    -
+        let classes = {
+            'o-menu__slot ': true,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+    div(class=classes)
+        block
diff --git a/tpl/objects/popover.pug b/tpl/objects/popover.pug
new file mode 100644
index 0000000..ba93a81
--- /dev/null
+++ b/tpl/objects/popover.pug
@@ -0,0 +1,12 @@
+mixin popover
+    -
+        let classes = {
+            'o-popover': true,
+            'u-p-static': true,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    div(class=classes, style=styles)
+        block
diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug
new file mode 100644
index 0000000..511f298
--- /dev/null
+++ b/tpl/objects/side-nav.pug
@@ -0,0 +1,48 @@
+include icon.pug
+include status-indicator.pug
+include action-button.pug
+
+mixin side-nav
+    -
+        let classes = {
+            'o-side-nav': true,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    div(class=classes)&attributes(attributes)
+        block
+
+mixin side-nav-item
+    -
+        let classes = {
+            'o-side-nav__item':   true,
+            'l-media':        true,
+            'l-media--75':    true,
+            'o-side-nav__header': attributes.header,
+            'is-selected':    attributes.selected,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes)
+        if attributes.icon
+            .l-media__block.o-side-nav__icon-slot
+                if attributes.iconIsStatus
+                    +status-indicator(attributes.icon)(class='o-side-nav__icon')
+                else
+                    +icon(attributes.icon)(class='o-side-nav__icon')
+        .l-media__block.l-media__block--main&attributes({ class: attributes.contentClass })
+            block
+        if attributes.postIcon
+            .l-media__block.o-side-nav__icon-slot
+                +icon(attributes.postIcon)(class='o-side-nav__icon')
+
+mixin side-nav-header
+    header.o-side-nav__header
+        block
+
+mixin side-nav-separator
+    .o-side-nav__separator
diff --git a/tpl/views/action-menu.pug b/tpl/views/action-menu.pug
index 3357caa..0546463 100644
--- a/tpl/views/action-menu.pug
+++ b/tpl/views/action-menu.pug
@@ -3,17 +3,18 @@ mixin view-action-menu
         .c-box
             div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
                 +action-button(quiet=true selected=true)= 'Menu'
-                +action-menu
-                    +action-menu-slot(class='l-media l-media--flush')
-                        +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block')
-                        .l-media__block.l-media__block--main
-                            strong.u-d-block= 'Volpeon'
-                            small.u-d-block= '@volpeon@mk.vulpes.one'
-                    +action-menu-separator
-                    +action-menu-item(icon='user')= 'View profile'
-                    +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away'
-                    +action-menu-separator
-                    +action-menu-item(icon='trash' disabled=true)= 'Delete'
-                    +action-menu-item(icon='bookmark')= 'Bookmark'
-                    +action-menu-item(icon='tags')= 'Tags'
-                    +action-menu-item(postIcon='chevron-right')= 'More'
+                +popover
+                    +menu
+                        +menu-slot(class='l-media l-media--flush')
+                            +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block')
+                            .l-media__block.l-media__block--main
+                                strong.u-d-block= 'Volpeon'
+                                small.u-d-block= '@volpeon@mk.vulpes.one'
+                        +menu-separator
+                        +menu-item(icon='user')= 'View profile'
+                        +menu-item(icon='red' iconIsStatus=true)= 'Mark as away'
+                        +menu-separator
+                        +menu-item(icon='trash' disabled=true)= 'Delete'
+                        +menu-item(icon='bookmark')= 'Bookmark'
+                        +menu-item(icon='tags')= 'Tags'
+                        +menu-item(postIcon='chevron-right')= 'More'
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug
index 4d7444f..c61cb92 100644
--- a/tpl/views/menu.pug
+++ b/tpl/views/menu.pug
@@ -20,11 +20,11 @@ mixin view-menu
                     +menu-item(header=true)
                         = 'Libera'
                     +menu-item(icon='hash')
-                        = 'achannel'
-                        +badge('primary')(menu=true)= '12 '
+                        = 'achannel '
+                        +badge('primary')(size='sm')= '12 '
                     +menu-item(icon='hash')
-                        = 'kitsuneirc'
-                        +badge(menu=true)= '31 '
+                        = 'kitsuneirc '
+                        +badge(size='sm')= '31 '
                     +menu-item(icon='green' iconIsStatus=true)
                         = 'volpeon'
                     +menu-item(icon='red' iconIsStatus=true)
diff --git a/tpl/views/popover.pug b/tpl/views/popover.pug
new file mode 100644
index 0000000..b269596
--- /dev/null
+++ b/tpl/views/popover.pug
@@ -0,0 +1,6 @@
+mixin view-popover
+    +view('popover', 'Popover')
+        .c-box
+            +action-button(quiet=true selected=true)= 'Popover'
+            +popover
+                = loremIpsum
diff --git a/tpl/views/side-nav.pug b/tpl/views/side-nav.pug
new file mode 100644
index 0000000..30fbcbb
--- /dev/null
+++ b/tpl/views/side-nav.pug
@@ -0,0 +1,26 @@
+mixin view-side-nav 
+    +view('side-nav', 'Side Nav')
+        .c-box
+            +side-nav
+                +side-nav-item= 'Section 1'
+                +side-nav-item(tag='div')= 'Section 2'
+                +side-nav-item= 'Section 3'
+
+        .c-box
+            +side-nav
+                +side-nav-item= 'Section 1'
+                +side-nav-item= 'Section 2'
+
+                +side-nav-header= 'Category 1'
+                +side-nav-item= 'Section 3'
+                +side-nav-item= 'Section 4'
+
+                +side-nav-header= 'Category 2'
+                +side-nav-item= 'Section 5'
+                +side-nav-item= 'Section 6'
+
+        .c-box
+            +side-nav
+                +side-nav-item(icon='hash')= 'Section 1'
+                +side-nav-item(tag='div' icon='bookmark')= 'Section 2'
+                +side-nav-item(icon='tags')= 'Section 3'