import{__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`
      <nav>
        <div id="nav-logo-section" class="nav-section">
          <a>
            <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>
          </a>
          <p>netsim</p>
        </div>
        <div id="nav-link-section" class="nav-section">
          <a href="javascript:void(0)" @click=${this.alertMissingLink} rel="noopener noreferrer"
            >ABOUT</a
          >
          <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"
            >PACKET TRACE</a
          >
          <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"
            >OPEN SOURCE LIBRARIES</a
          >
        </div>
        <div id="nav-contact-section" class="nav-section">
          <a
            href="javascript:void(0)"
            @click=${this.alertMissingLink}
            rel="noopener noreferrer"
            >DOCUMENTATION</a
          >
        </div>
      </nav>
    `}};n.styles=i`
    :host {
      --border-color: rgb(255, 255, 255, 0.1);
      --background-color: #747474;
    }

    .logo {
      background-image: url(./assets/netsim-logo.svg);
      background-repeat: no-repeat;
      margin-left: 25%;
      width: 50px;
      height: 50px;
    }
    
    nav {
      display: flex;
      width: 100%;
      border-bottom: 1px solid var(--border-color);
      background-color: var(--background-color);
      margin-bottom: 10px;
    }

    nav > .nav-section {
      padding: 3rem 2rem;
      display: flex;
      gap: 1rem;
      border-left: 1px solid var(--border-color);
      align-items: center;
      justify-content: center;
    }

    #nav-logo-section {
      justify-content: flex-start;
      flex-basis: calc(100% / 4);
    }

    #nav-link-section {
      flex-basis: calc(100% / 2);
      gap: 6rem;
    }

    #nav-contact-section {
      flex-grow: 1;
    }

    a {
      text-decoration: none;
    }

    a:hover {
      cursor: pointer;
    }

    h1,
    h2,
    h3,
    a,
    p,
    span {
      font-family: 'Lato';
      font-weight: bold;
      color: white;
      font-size: 25px;
    }
  `,n=e([t("ns-navigation-bar")],n);export{n as NavigationBar};