• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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  render() {
91    return html`
92      <nav>
93        <div id="nav-logo-section" class="nav-section">
94          <a>
95            <div id="nav-logo-pic" class="logo" @click=${
96        this.handleClick} role="tab" tabindex="0" aria-label="Netsim Logo, change view mode to scene view"></div>
97          </a>
98          <p>netsim</p>
99        </div>
100        <div id="nav-link-section" class="nav-section">
101          <a href="http://go/betosim" target="_blank" rel="noopener noreferrer"
102            >ABOUT</a
103          >
104          <a href="javascript:void(0)" id="nav-trace-section" @click=${
105        this.handleClick} role="tab" aria-label="Packet Trace, change view mode to packet trace view"
106            >PACKET TRACE</a
107          >
108          <a href="javascript:void(0)" id="nav-os-library-section" @click=${
109        this.handleClick} role = "tab" aria-label="Open Source Libraries, change view mode to open source libraries view"
110            >OPEN SOURCE LIBRARIES</a
111          >
112        </div>
113        <div id="nav-contact-section" class="nav-section">
114          <a
115            href="https://team.git.corp.google.com/betosim/web"
116            target="_blank"
117            rel="noopener noreferrer"
118            >DOCUMENTATION</a
119          >
120        </div>
121      </nav>
122    `;
123  }
124}
125