Merge pull request #681 from auth0-developer-hub/feature/ad-banner-code-identity

Feat: Enable Tippy Top/Ad banner for Code::Identity

Author: florkaa

src/website/index.js

@@ -11,6 +11,7 @@ import {
     shareJwtTextElement,
 } from "./dom-elements.js";
 import { CCPAModal } from "./ccpa-modal.js";
+import { TopBanner } from "./top-banner.js";
 
 import queryString from "querystring";
 
@@ -54,4 +55,5 @@ parseLocationQuery();
 setupHighlighting();
 setupJwtCounter();
 setupShareJwtButton(shareJwtButton, shareJwtTextElement);
-CCPAModal();
+CCPAModal();
+TopBanner();

src/website/top-banner.js

@@ -0,0 +1,12 @@
+export function TopBanner() {
+  document.addEventListener("DOMContentLoaded", function () {
+    document
+      .querySelector(".close-top-banner")
+      .addEventListener("click", () => {
+        document.querySelector(".top-banner-bg").classList.add("closed");
+        document.querySelector(".top-banner").classList.add("closed");
+        document.querySelector(".top-banner-spacer").classList.add("hide");
+        document.querySelector(".navbar").classList.remove("top-banner-open");
+      });
+  });
+}

stylus/website/index.styl

@@ -1848,4 +1848,105 @@ footer {
   width: 100%;
   height: 48px;
   z-index: 100;
+
+  &.closed {
+    visibility: hidden;
+    height: 0;
+    opacity: 0;
+    padding: 0;
+    transition: all 0.1s linear;
+  }
+}
+
+.top-banner {
+  background: linear-gradient(90deg, #ff4f40 0%, #ff44dd 99.99%);
+  border-radius: 8px;
+  max-width: 1216px;
+  padding: 8px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  visibility: visible;
+  opacity: 1;
+  box-sizing: border-box;
+  margin: 0 auto;
+  position: fixed;
+  top: 12px;
+  z-index: 1000;
+  width: 100%;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+
+  &.closed {
+    visibility: hidden;
+    height: 0;
+    opacity: 0;
+    padding: 0;
+    transition: all 0.2s linear;
+  }
+
+  .top-banner-container {
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 30px;
+    max-width: 1200px;
+    align-items: center;
+
+    div {
+      +breakpoint('tablet') {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  p {
+    font-size: 14px;
+    color: #fff;
+    margin: 0 2rem 0 0;
+    display: inline;
+  }
+
+  a {
+    font-weight: 600;
+    font-size: 14px;
+    color: #fff;
+    text-decoration: none;
+    display: block;
+
+    span {
+      margin-left: 8px;
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    +breakpoint('tablet') {
+      display: inline;
+    }
+  }
+
+  button {
+    font-weight: 600;
+    font-size: 20px;
+    color: #fff;
+    text-decoration: none;
+    background: none;
+    border: none;
+    justify-self: flex-end;
+    display: block;
+    cursor: pointer;
+    text-align: right;
+    transform: rotate(45deg);
+  }
+}
+
+.top-banner-spacer {
+  background: black;
+  height: 50px;
+
+  &.hide {
+    height: 0;
+    transition: all 0.2s linear;
+  }
 }

views/website/navigation.pug

@@ -1,4 +1,13 @@
-nav.navbar.closed
+.top-banner-bg
+.top-banner
+  .top-banner-container
+    a(href="https://regionalevents.okta.com/soyouneedtobuildaloginbox/DeveloperCenter" target="_blank") Developers! Catch our webinar and see how to build with Auth0 in minutes.
+      span(aria-hiden="true") →
+    button.close-top-banner +
+
+.top-banner-spacer
+
+nav.navbar.closed.top-banner-open
     .container
       .top-mobile
         .menu-trigger