Add navbar

3 files changed, 46 insertions, 0 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index cccfb2a..7d73c75 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -24,6 +24,7 @@ include objects/avatar.pug
 include objects/card.pug
 include objects/popover.pug
 include objects/menu.pug
+include objects/navbar.pug
 include objects/side-nav.pug
 include objects/icon-nav.pug
 include objects/emoji.pug
@@ -76,6 +77,7 @@ include views/avatar.pug
 include views/card.pug
 include views/popover.pug
 include views/menu.pug
+include views/navbar.pug
 include views/side-nav.pug
 include views/icon-nav.pug
 include views/backdrop.pug
@@ -124,6 +126,7 @@ html
             +view-side-nav
             +view-popover
             +view-menu
+            +view-navbar
             //+view-icon-nav
             +view-backdrop
             //+view-dialog
diff --git a/tpl/objects/navbar.pug b/tpl/objects/navbar.pug
new file mode 100644
index 0000000..bca8c90
--- /dev/null
+++ b/tpl/objects/navbar.pug
@@ -0,0 +1,30 @@
+include icon.pug
+include status-indicator.pug
+include action-button.pug
+
+mixin navbar
+    -
+        let classes = {
+            'o-navbar': true,
+            'o-navbar--quiet': attributes.quiet,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    div(class=classes)&attributes(attributes)
+        block
+
+mixin navbar-item
+    -
+        let classes = {
+            'o-navbar__item': true,
+            'is-selected':    attributes.selected,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes)
+        .o-navbar__item-label
+            block
diff --git a/tpl/views/navbar.pug b/tpl/views/navbar.pug
new file mode 100644
index 0000000..03f1591
--- /dev/null
+++ b/tpl/views/navbar.pug
@@ -0,0 +1,13 @@
+mixin view-navbar 
+    +view('navbar', 'Navbar')
+        .c-box
+            +navbar
+                +navbar-item= 'Home'
+                +navbar-item(selected=true)= 'Art'
+                +navbar-item= 'Emojis'
+
+        .c-box
+            +navbar(quiet=true)
+                +navbar-item= 'Home'
+                +navbar-item(selected=true)= 'Art'
+                +navbar-item= 'Emojis'