4 files changed, 55 insertions, 0 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index 4ed1ae3..6565589 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -21,6 +21,7 @@ include objects/status-indicator.pug
 include objects/avatar.pug
 include objects/action-menu.pug
 include objects/menu.pug
+include objects/icon-nav.pug
 include objects/backdrop.pug
 include objects/dialog.pug
 include objects/lightbox.pug
@@ -64,6 +65,7 @@ include views/status-indicator.pug
 include views/avatar.pug
 include views/action-menu.pug
 include views/menu.pug
+include views/icon-nav.pug
 include views/backdrop.pug
 include views/dialog.pug
 include views/lightbox.pug
@@ -101,6 +103,7 @@ html
             +view-avatar
             +view-action-menu
             +view-menu
+            +view-icon-nav
             +view-backdrop
             +view-dialog
             +view-lightbox
diff --git a/tpl/objects/icon-nav.pug b/tpl/objects/icon-nav.pug
new file mode 100644
index 0000000..6f45bf6
--- /dev/null
+++ b/tpl/objects/icon-nav.pug
@@ -0,0 +1,29 @@
+include icon.pug
+include status-indicator.pug
+include action-button.pug
+
+mixin icon-nav
+    -
+        let classes = {
+            'o-icon-nav':           true,
+            'o-icon-nav--vertical': attributes.vertical,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    div(class=classes)&attributes(attributes)
+        block
+
+mixin icon-nav-item(icon)
+    -
+        let classes = {
+            'o-icon-nav__item': true,
+            'is-selected':  attributes.selected,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    button(class=classes)&attributes(attributes)
+        +icon(icon)(block=true)
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index c6e8223..f9d59b8 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -7,6 +7,9 @@ mixin menu
         let classes = {
             'o-menu': true,
         }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
 
     div(class=classes)&attributes(attributes)
         block
@@ -17,6 +20,9 @@ mixin menu-item
             'o-menu__item': true,
             'is-selected':  attributes.selected,
         }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
 
     #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes)
         .l-card.l-card--flush.l-card--75
diff --git a/tpl/views/icon-nav.pug b/tpl/views/icon-nav.pug
new file mode 100644
index 0000000..e71229d
--- /dev/null
+++ b/tpl/views/icon-nav.pug
@@ -0,0 +1,17 @@
+mixin view-icon-nav 
+    +view('icon-nav', 'Icon nav')
+        .c-box
+            +icon-nav
+                +icon-nav-item('hash')
+                +icon-nav-item('bookmark')(selected=true)
+                +icon-nav-item('tags')
+                +icon-nav-item('cog')(class='u-ml-auto')
+                +icon-nav-item('logout')
+
+        .c-box
+            +icon-nav(vertical=true style={ height: '20em' })
+                +icon-nav-item('hash')
+                +icon-nav-item('bookmark')(selected=true)
+                +icon-nav-item('tags')
+                +icon-nav-item('cog')(class='u-mt-auto')
+                +icon-nav-item('logout')