tpl/objects/side-nav.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
44
45
46
47
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--sm':    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