1import{__decorate as e}from"../node_modules/tslib/tslib.es6.js";import{css as i,LitElement as a,html as o}from"https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";import{customElement as t}from"https://cdn.skypack.dev/pin/lit@v2.5.0-jYRq0AKQogjUdUh7SCAE/mode=imports/optimized/lit/decorators.js";let n=class extends a{connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}handleClick(e){let i="main";"nav-trace-section"===e.target.id?i="trace":"nav-os-library-section"===e.target.id&&(i="oslib"),window.dispatchEvent(new CustomEvent("changeModeEvent",{detail:{mode:i}}))}alertMissingLink(){window.alert("This link is currently under construction")}render(){return o`
2      <nav>
3        <div id="nav-logo-section" class="nav-section">
4          <a>
5            <div id="nav-logo-pic" class="logo" @click=${this.handleClick} role="tab" tabindex="0" aria-label="Netsim Logo, change view mode to scene view"></div>
6          </a>
7          <p>netsim</p>
8        </div>
9        <div id="nav-link-section" class="nav-section">
10          <a href="javascript:void(0)" @click=${this.alertMissingLink} rel="noopener noreferrer"
11            >ABOUT</a
12          >
13          <a href="javascript:void(0)" id="nav-trace-section" @click=${this.handleClick} role="tab" aria-label="Packet Trace, change view mode to packet trace view"
14            >PACKET TRACE</a
15          >
16          <a href="javascript:void(0)" id="nav-os-library-section" @click=${this.handleClick} role = "tab" aria-label="Open Source Libraries, change view mode to open source libraries view"
17            >OPEN SOURCE LIBRARIES</a
18          >
19        </div>
20        <div id="nav-contact-section" class="nav-section">
21          <a
22            href="javascript:void(0)"
23            @click=${this.alertMissingLink}
24            rel="noopener noreferrer"
25            >DOCUMENTATION</a
26          >
27        </div>
28      </nav>
29    `}};n.styles=i`
30    :host {
31      --border-color: rgb(255, 255, 255, 0.1);
32      --background-color: #747474;
33    }
34
35    .logo {
36      background-image: url(./assets/netsim-logo.svg);
37      background-repeat: no-repeat;
38      margin-left: 25%;
39      width: 50px;
40      height: 50px;
41    }
42
43    nav {
44      display: flex;
45      width: 100%;
46      border-bottom: 1px solid var(--border-color);
47      background-color: var(--background-color);
48      margin-bottom: 10px;
49    }
50
51    nav > .nav-section {
52      padding: 3rem 2rem;
53      display: flex;
54      gap: 1rem;
55      border-left: 1px solid var(--border-color);
56      align-items: center;
57      justify-content: center;
58    }
59
60    #nav-logo-section {
61      justify-content: flex-start;
62      flex-basis: calc(100% / 4);
63    }
64
65    #nav-link-section {
66      flex-basis: calc(100% / 2);
67      gap: 6rem;
68    }
69
70    #nav-contact-section {
71      flex-grow: 1;
72    }
73
74    a {
75      text-decoration: none;
76    }
77
78    a:hover {
79      cursor: pointer;
80    }
81
82    h1,
83    h2,
84    h3,
85    a,
86    p,
87    span {
88      font-family: 'Lato';
89      font-weight: bold;
90      color: white;
91      font-size: 25px;
92    }
93  `,n=e([t("ns-navigation-bar")],n);export{n as NavigationBar};
94