stripeAlongLinks.jade

extends base

block vars
  - var title = 'Stripe Follow Along Dropdown'

block styles
  link(rel="stylesheet" type="text/css" href="styles/stripeAlongLinks.css")

block body

  - var courseCodes = ["RFB", "ES6", "STPU", "WTF", "LRX", "CLPU", "MMD"]
  - var courseLinks = ["https://ReactForBeginners.com", "https://ES6.io", "https://SublimeTextBook.com", "http://flexbox.io", "http://LearnRedux.com", "http://CommandLinePowerUser.com", "http://MasteringMarkdown.com"]
  - var courseTitles = ["React For Beginners", "ES6 For Everyone", "Sublime Text Power User", "What The Flexbox?!", "Learn Redux", "Command Line Power User", "Mastering Markdown"]

  nav.top
    .dropdownBackground
      span.arrow

    ul.cool
      li
        a(href="#") About Me
        .dropdown.dropdown1
          .bio
            img(src="https://pbs.twimg.com/profile_images/714830962656473088/gdjONVUU.jpg")
            p.
              I like to code and build fun stuffs. APIs, open source contribution, demo apps, whatever. If it's fun, I'll dive in.

      li
        a(href="#") Courses
        ul.dropdown.courses
          each courseCode, index in courseCodes
            li
              span.code #{courseCode}
              a(href="#{courseLinks[index]}") #{courseTitles[index]}

      li
        a(href="#") Other Links
        ul.dropdown.dropdown3
          li
            a.button(href="https://twitter.com/_akinjide") Twitter
          li
            a.button(href="https://facebook.com/bakinjide") Facebook
          li
            a.button(href="https://akinjide.me") Blog

  script(type="text/javascript").
    const $triggers = document.querySelectorAll('.cool > li')
    const $background = document.querySelector('.dropdownBackground')
    const $nav = document.querySelector('.top')

    function handleEnter() {
      this.classList.add('trigger-enter')
      setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150)
      $background.classList.add('open')

      const $dropdown = this.querySelector('.dropdown')
      const dropdownCoords = $dropdown.getBoundingClientRect()
      const navCoords = $nav.getBoundingClientRect()

      const coords = {
      	height: dropdownCoords.height,
      	width: dropdownCoords.width,
      	top: dropdownCoords.top - navCoords.top,
      	left: dropdownCoords.left - navCoords.left
      }

      $background.style.setProperty('width', `${coords.width}px`)
      $background.style.setProperty('height', `${coords.height}px`)
      $background.style.setProperty('display', 'flex')
      $background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`)
    }

    function handleLeave() {
      this.classList.remove('trigger-enter', 'trigger-enter-active')
      $background.classList.remove('open')
    }

    $triggers.forEach($trigger => $trigger.addEventListener('mouseenter', handleEnter))
    $triggers.forEach($trigger => $trigger.addEventListener('mouseleave', handleLeave))