Add Gothenburg takeover and events navigation (#92)

* Add Gothenburg hero takeover to home page

* Add events dropdown to navigation

* Review fixes

* Update JS var definitions to const.

* Update templates/masterclasses.html

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: bartaz

templates/base.html

@@ -41,6 +41,26 @@
             <li class="p-navigation__item">
               <a class="p-navigation__link" href="/videos">Videos</a>
             </li>
+            <li class="p-navigation__item--dropdown-toggle" id="sprints-toggle">
+              <a href="#sprints-toggle-menu" aria-controls="sprints-toggle-menu" class="p-navigation__link">Sprints</a>
+              <ul class="p-navigation__dropdown" id="sprints-toggle-menu" aria-hidden="true">
+                <li>
+                  <a href="/events/engineering-sprint-gothenburg-2025" class="p-navigation__dropdown-item">Engineering Sprint Gothenburg 2025</a>
+                </li>
+                <li>
+                  <a href="/events/roadmap-sprint-gothenburg-2025" class="p-navigation__dropdown-item">Roadmap Sprint Gothenburg 2025</a>
+                </li>
+                <li>
+                  <a href="/events/commercial-sprint-berlin-2025" class="p-navigation__dropdown-item">Commercial Sprint Berlin 2025</a>
+                </li>
+                <li>
+                  <a href="/events/engineering-sprint-frankfurt-2025" class="p-navigation__dropdown-item">Engineering Sprint Frankfurt 2025</a>
+                </li>
+                <li>
+                  <a href="/events/roadmap-sprint-frankfurt-2025" class="p-navigation__dropdown-item">Roadmap Sprint Frankfurt 2025</a>
+                </li>
+              </ul>
+            </li>
             <li class="p-navigation__item">
               <a class="p-navigation__link" href="/register">Register Session</a>
             </li>
@@ -97,7 +117,7 @@
     function toggleMenu(e) {
       e.preventDefault();
 
-      var navigation = e.target.closest('.p-navigation');
+      const navigation = e.target.closest('.p-navigation');
       if (navigation.classList.contains('has-menu-open')) {
         closeMenu();
       } else {
@@ -108,10 +128,10 @@
 
     function openMenu(e) {
       e.preventDefault();
-      var navigation = e.target.closest('.p-navigation');
-      var nav = navigation.querySelector('.p-navigation__nav');
+      const navigation = e.target.closest('.p-navigation');
+      const nav = navigation.querySelector('.p-navigation__nav');
 
-      var buttons = document.querySelectorAll('.js-menu-button');
+      const buttons = document.querySelectorAll('.js-menu-button');
 
       buttons.forEach((searchButton) => {
         searchButton.setAttribute('aria-pressed', true);
@@ -122,11 +142,11 @@
     }
 
     function closeMenu() {
-      var navigation = document.querySelector('.p-navigation');
-      var nav = navigation.querySelector('.p-navigation__nav');
+      const navigation = document.querySelector('.p-navigation');
+      const nav = navigation.querySelector('.p-navigation__nav');
 
-      var banner = document.querySelector('.p-navigation__banner');
-      var buttons = document.querySelectorAll('.js-menu-button');
+      const banner = document.querySelector('.p-navigation__banner');
+      const buttons = document.querySelectorAll('.js-menu-button');
 
       buttons.forEach((searchButton) => {
         searchButton.removeAttribute('aria-pressed');
@@ -143,6 +163,54 @@
     }
   }
 
-  var navigation = document.querySelector('#navigation');
+  const navigation = document.querySelector('#navigation');
   initNavigation(navigation);
+
+  function toggleDropdown(toggle, open) {
+    const parentElement = toggle.parentNode;
+    const dropdown = document.getElementById(toggle.getAttribute('aria-controls'));
+    dropdown.setAttribute('aria-hidden', !open);
+
+    if (open) {
+      parentElement.classList.add('is-active');
+    } else {
+      parentElement.classList.remove('is-active');
+    }
+  }
+
+  function closeAllDropdowns(toggles) {
+    toggles.forEach(function(toggle) {
+      toggleDropdown(toggle, false);
+    });
+  }
+
+  function handleClickOutside(toggles, containerClass) {
+    document.addEventListener('click', function(event) {
+      const target = event.target;
+
+      if (target.closest) {
+        if (!target.closest(containerClass)) {
+          closeAllDropdowns(toggles);
+        }
+      }
+    });
+  }
+
+  function initNavDropdowns(containerClass) {
+    const toggles = [].slice.call(document.querySelectorAll(containerClass + ' [aria-controls]'));
+
+    handleClickOutside(toggles, containerClass);
+
+    toggles.forEach(function(toggle) {
+      toggle.addEventListener('click', function(e) {
+        e.preventDefault();
+
+        const shouldOpen = !toggle.parentNode.classList.contains('is-active');
+        closeAllDropdowns(toggles);
+        toggleDropdown(toggle, shouldOpen);
+      });
+    });
+  }
+
+  initNavDropdowns('.p-navigation__item--dropdown-toggle');
 </script>

templates/masterclasses.html

@@ -4,6 +4,43 @@
 {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
 
 {% block content %}
+
+{# hide main Gothenburg hero after the sprint has ended #}
+{% set gothenburg_end_unixtime = 1762560000 %} {# 2025-11-08T00:00:00Z #}
+{% if now < gothenburg_end_unixtime %}
+{% call(slot) vf_hero(
+  title_text='Gothenburg Sprints',
+  subtitle_text='October–November 2025',
+  layout='50/50'
+) -%}
+{%- if slot == 'description' -%}
+<p>
+  We are kicking off the 26.04 cycle in Gothenburg with Product Roadmap, and Engineering Sprints.
+  Join us virtually on a live stream, or watch the recordings later in our Masterclass video library.
+</p>
+{%- endif -%}
+{%- if slot == 'cta' -%}
+<a href="https://stream.meet.google.com/stream/4f77e620-f41c-4ab9-beb2-29aa1c79dfd2" class="p-button--positive">Join the live stream</a>
+<a href="/events/roadmap-sprint-gothenburg-2025" class="p-button">Roadmap Sprint</a>
+<a href="/events/engineering-sprint-gothenburg-2025" class="p-button">Engineering Sprint</a>
+{%- endif -%}
+{%- if slot == 'image' -%}
+<div class="u-hide--medium u-hide--small">
+  <div class="p-image-container--3-2">
+    <img loading="auto" alt="Gothia Towers in Gothenburg"
+      src="https://upload.wikimedia.org/wikipedia/commons/3/32/Gothia-towers-20110305.jpg"
+      class="p-image-container__image">
+  </div>
+  <p class="u-text--muted u-text--small"><small>Copyright: Reimund Trost, licensed under <a href="https://commons.wikimedia.org/wiki/File:Gothia-towers-20110305.jpg">CC BY-SA 3.0</a></small></p>
+</div>
+{%- endif -%}
+{% endcall -%}
+
+<div class="u-fixed-width">
+  <hr class="p-rule" />
+</div>
+{% endif %}
+
 {% call(slot) vf_hero(
   title_text='Masterclass',
   subtitle_text='Your one-stop video library for Canonical talks',