1import {css, html, LitElement} from 'lit';
2import {customElement} from 'lit/decorators.js';
3
4@customElement('ns-navigation-bar')
5export class NavigationBar extends LitElement {
6  static styles = css`
7    :host {
8      --border-color: rgb(255, 255, 255, 0.1);
9      --background-color: #747474;
10    }
11
12    .logo {
13      background-image: url(./assets/netsim-logo.svg);
14      background-repeat: no-repeat;
15      margin-left: 25%;
16      width: 50px;
17      height: 50px;
18    }
19
20    nav {
21      display: flex;
22      width: 100%;
23      border-bottom: 1px solid var(--border-color);
24      background-color: var(--background-color);
25      margin-bottom: 10px;
26    }
27
28    nav > .nav-section {
29      padding: 3rem 2rem;
30      display: flex;
31      gap: 1rem;
32      border-left: 1px solid var(--border-color);
33      align-items: center;
34      justify-content: center;
35    }
36
37    #nav-logo-section {
38      justify-content: flex-start;
39      flex-basis: calc(100% / 4);
40    }
41
42    #nav-link-section {
43      flex-basis: calc(100% / 2);
44      gap: 6rem;
45    }
46
47    #nav-contact-section {
48      flex-grow: 1;
49    }
50
51    a {
52      text-decoration: none;
53    }
54
55    a:hover {
56      cursor: pointer;
57    }
58
59    h1,
60    h2,
61    h3,
62    a,
63    p,
64    span {
65      font-family: 'Lato';
66      font-weight: bold;
67      color: white;
68      font-size: 25px;
69    }
70  `;
71
72  connectedCallback() {
73    super.connectedCallback();  // eslint-disable-line
74  }
75
76  disconnectedCallback() {
77    super.disconnectedCallback();  // eslint-disable-line
78  }
79
80  private handleClick(ev: Event) {
81    let mode = 'main';
82    if ((ev.target as HTMLElement).id === 'nav-trace-section') {
83      mode = 'trace';
84    } else if ((ev.target as HTMLElement).id === 'nav-os-library-section') {
85      mode = 'oslib';
86    }
87    window.dispatchEvent(new CustomEvent('changeModeEvent', {detail: {mode}}));
88  }
89
90  private alertMissingLink() {
91    window.alert('This link is currently under construction');
92  }
93
94  render() {
95    return html`
96      <nav>
97        <div id="nav-logo-section" class="nav-section">
98          <a>
99            <div id="nav-logo-pic" class="logo" @click=${
100        this.handleClick} role="tab" tabindex="0" aria-label="Netsim Logo, change view mode to scene view"></div>
101          </a>
102          <p>netsim</p>
103        </div>
104        <div id="nav-link-section" class="nav-section">
105          <a href="javascript:void(0)" @click=${
106        this.alertMissingLink} rel="noopener noreferrer"
107            >ABOUT</a
108          >
109          <a href="javascript:void(0)" id="nav-trace-section" @click=${
110        this.handleClick} role="tab" aria-label="Packet Trace, change view mode to packet trace view"
111            >PACKET TRACE</a
112          >
113          <a href="javascript:void(0)" id="nav-os-library-section" @click=${
114        this.handleClick} role = "tab" aria-label="Open Source Libraries, change view mode to open source libraries view"
115            >OPEN SOURCE LIBRARIES</a
116          >
117        </div>
118        <div id="nav-contact-section" class="nav-section">
119          <a
120            href="javascript:void(0)"
121            @click=${this.alertMissingLink}
122            rel="noopener noreferrer"
123            >DOCUMENTATION</a
124          >
125        </div>
126      </nav>
127    `;
128  }
129}
130