tpl/objects/navbar.pug


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

include icon.pug
include status-indicator.pug
include 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)
        if attributes.icon
            .o-navbar__item-label
                block
        .o-navbar__item-content
            if attributes.preIcon
                +icon(attributes.preIcon)
                = ' '
            if attributes.icon
                +icon(attributes.icon)(class="o-navbar__item-content-icon")
            else
                span.o-navbar__item-content-text
                    block
            if attributes.postIcon
                = ' '
                +icon(attributes.postIcon)