jcuffe · August 5, 2019 06:56
diff --git a/components\nav-bar.js b/components\nav-bar.js
 const template = document.createElement("template")
 template.innerHTML = `
  <style>
    :host {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      background-color: gray;
      padding: 10px 30px;
    }

    #icon {
      height: 50px;
      width: 50px;
    }

    #icon img {
      height: 100%;
      width: 100%;
    }
    
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    li {
      display: inline;
      margin-left: 10px;
    }

    li:first-child {
      margin-left: 0px;
    }

    li a {
      text-decoration: none;
      color: white;
    }

    li a.active {
      border-bottom: 2px solid red;
    }

    li a:hover {
      color: red;
    }
  </style>

  <a id="icon" href="/">
    <img src="https://qph.fs.quoracdn.net/main-qimg-5a83cf83293f9e3cbe4e32f3706a8eea" />
  </a>
  <ul id="links">
  </ul>
 `

 class NavBar extends HTMLElement {
  get pages() {
    return this._pages
  }

  set pages(pages) {
    this._pages = pages
    this._renderLinks()
  }

  constructor() {
    super()

    const shadowRoot = this.attachShadow({ mode: "open" })
    shadowRoot.appendChild(template.content.cloneNode(true))
    this._links = shadowRoot.getElementById("links")
  }

  static _buildLink({ name, location }) {
    const li = document.createElement("li")
    const a = document.createElement("a")
    if (window.location.pathname == location) {
      a.href = "#"
      a.classList.add("active")
    }
    a.href = location
    a.text = name
    li.appendChild(a)
    return li
  }

  _renderLinks() {
    this._links.innerHTML = ""
    this._pages.forEach(page => {
      this._links.appendChild(NavBar._buildLink(page))
    })
  }
 }

 window.customElements.define("nav-bar", NavBar, { extends: "nav" })
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Updog</title>
  </head>
  <body>
    <nav-bar></nav-bar>
    <script type="module" src="main.js"></script>
  </body>
 </html>
diff --git a/main.js b/main.js
 import "./components/site-icon.js"
 import "./components/nav-bar.js"

 const navBar = document.querySelector("nav-bar")
 navBar.pages = [{ name: "About", location: "/about.html" }]
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Updog</title>
	</head>
	<body>
	<nav-bar></nav-bar>
	<script type="module" src="main.js"></script>
	</body>
	</html>
	import "./components/site-icon.js"
	import "./components/nav-bar.js"

	const navBar = document.querySelector("nav-bar")
	navBar.pages = [{ name: "About", location: "/about.html" }]