17-stripe-hero-submenu complete

Author: john-smilga

17-stripe-hero/VIDEO-URL.md

@@ -0,0 +1,4 @@
+(JS Video)[https://johnsmilga.com]
+<br  />
+
+(HTML&CSS Video) [https://johnsmilga.com]

17-stripe-hero/final/app.js

@@ -0,0 +1,83 @@
+import sublinks from './data.js';
+
+const toggleBtn = document.querySelector('.toggle-btn');
+const closeBtn = document.querySelector('.close-btn');
+const sidebarWrapper = document.querySelector('.sidebar-wrapper');
+const sidebar = document.querySelector('.sidebar-links');
+const linkBtns = [...document.querySelectorAll('.link-btn')];
+const submenu = document.querySelector('.submenu');
+const hero = document.querySelector('.hero');
+const nav = document.querySelector('.nav');
+// hide/show sideabar
+toggleBtn.addEventListener('click', () => {
+  sidebarWrapper.classList.add('show');
+});
+closeBtn.addEventListener('click', () => {
+  sidebarWrapper.classList.remove('show');
+});
+
+// set sidebar
+sidebar.innerHTML = sublinks
+  .map((item) => {
+    const { links, page } = item;
+    return `<article >
+<h4>${page}</h4>
+<div class="sidebar-sublinks">
+${links
+  .map((link) => {
+    return `<a href="${link.url}"><i class="${link.icon}"></i>${link.label}</a>`;
+  })
+  .join('')}
+</div>
+</article>`;
+  })
+  .join('');
+
+linkBtns.forEach((btn) => {
+  btn.addEventListener('mouseover', function (e) {
+    const text = e.currentTarget.textContent;
+    const tempBtn = e.currentTarget.getBoundingClientRect();
+    const center = (tempBtn.left + tempBtn.right) / 2;
+    const bottom = tempBtn.bottom - 3;
+
+    const tempPage = sublinks.find((link) => link.page === text);
+    if (tempPage) {
+      const { page, links } = tempPage;
+      submenu.classList.add('show');
+      submenu.style.left = `${center}px`;
+      submenu.style.top = `${bottom}px`;
+      // OPTIONAL
+      let columns;
+      if (links.length <= 2) {
+        columns = 'col-2';
+      }
+      if (links.length === 3) {
+        columns = 'col-3';
+      }
+      if (links.length > 3) {
+        columns = 'col-4';
+      }
+      submenu.innerHTML = `
+      <section> 
+      <h4>${page}</h4>
+      <div class="submenu-center ${columns}">
+      ${links
+        .map((link) => {
+          return `<a href="${link.url}"><i class="${link.icon}"></i>${link.label}</a>`;
+        })
+        .join('')}
+      </div>
+      </section>
+      `;
+    }
+  });
+});
+
+hero.addEventListener('mouseover', function (e) {
+  submenu.classList.remove('show');
+});
+nav.addEventListener('mouseover', function (e) {
+  if (!e.target.classList.contains('link-btn')) {
+    submenu.classList.remove('show');
+  }
+});

17-stripe-hero/final/data.js

@@ -0,0 +1,28 @@
+const sublinks = [
+  {
+    page: 'products',
+    links: [
+      { label: 'payment', icon: 'fas fa-credit-card', url: 'products.html' },
+      { label: 'terminal', icon: 'fas fa-credit-card', url: 'products.html' },
+      { label: 'connect', icon: 'fas fa-credit-card', url: 'products.html' },
+    ],
+  },
+  {
+    page: 'developers',
+    links: [
+      { label: 'plugins', icon: 'fas fa-book', url: 'products.html' },
+      { label: 'libraries', icon: 'fas fa-book', url: 'products.html' },
+      { label: 'plugins', icon: 'fas fa-book', url: 'products.html' },
+      { label: 'billing', icon: 'fas fa-book', url: 'products.html' },
+    ],
+  },
+  {
+    page: 'company',
+    links: [
+      { label: 'about', icon: 'fas fa-briefcase', url: 'products.html' },
+      { label: 'customers', icon: 'fas fa-briefcase', url: 'products.html' },
+    ],
+  },
+];
+
+export default sublinks;