header header.tsx

61.53% Statements 8/13
83.33% Branches 5/6
50% Functions 2/4
61.53% Lines 8/13
Press n or j to go to the next uncovered block, b, p or k for the previous block.

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
49
50
51
52
53
54
55
56
57
58
59
60 4x
 
4x
 
 
 
 
 
 
12x
 
12x
 
12x
 
12x
 
 
 
 
 
 
 
 
 
12x
 
12x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Component, h, Prop, Host, State } from "@stencil/core";
 
@Component({
    tag: "ux-w-header",
    styleUrl: "header.scss",
    shadow: false
})
export class Header {
    /** url for the Link next to the title */
    @Prop() url: string = "";
    /** text for the title attribute of the link */
    @Prop() linkTitle: string = "";
    /** sets bool wether widget has a menu */
    @Prop() hasMenu: boolean = false;
    /** wether the widget header menu is visible */
    @State() menuVisible: boolean = false;
 
    private openMenu(e) {
        e.preventDefault();
        const el = e.target;
        el.classList.toggle("is-open");
        this.menuVisible = !this.menuVisible;
    }
 
    render() {
        const baseClass = "ux-w-header";
 
        return (
            <Host class={baseClass}>
                <slot name="headline" />
                {this.url !== "" && (
                    <a href={this.url} title={this.linkTitle}>
                        <ux-icon name="arrow-small-right" />
                    </a>
                )}
                &nbsp;
                {this.hasMenu && (
                    <div class={`${baseClass}__menu`}>
                        <a
                            href="#"
                            class={`${baseClass}__menu-link`}
                            onClick={(e) => this.openMenu(e)}
                        >
                            <ux-icon name={"cog"} />
                        </a>
 
                        <div
                            class={`${baseClass}__menu-content ${
                                this.menuVisible ? "is-visible" : "is-hidden"
                            }`}
                        >
                            <slot name="menu" />
                        </div>
                    </div>
                )}
            </Host>
        );
    }
}