From 4ef7ba48a68980c126b89bf5ba5a9ddac804f88f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 17 Nov 2024 15:51:24 +0100 Subject: Add navbar --- tpl/index.pug | 3 +++ tpl/objects/navbar.pug | 30 ++++++++++++++++++++++++++++++ tpl/views/navbar.pug | 13 +++++++++++++ 3 files changed, 46 insertions(+) create mode 100644 tpl/objects/navbar.pug create mode 100644 tpl/views/navbar.pug (limited to 'tpl') 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' -- cgit v1.2.3-70-g09d2