refactor(header): modernize navigation with improved UX, i18n and accessibility

i18n/en.yaml

@@ -1,7 +1,32 @@
 # header
-header_login: Login
-header_signup: Sign Up
+header_login: Sign in
+header_signup: Create a free account
 header_pricing: Pricing
+header_menu_features: Features
+header_menu_resources: Resources
+
+header_feature_email_aliases: Email Aliases
+header_feature_email_aliases_desc: Protect your inbox with anonymous email addresses
+header_feature_custom_domains: Custom Domains
+header_feature_custom_domains_desc: Use your own domain to create aliases
+header_feature_browser_extensions: Browser Extensions
+header_feature_browser_extensions_desc: Create aliases in one click from Chrome, Firefox, Edge, or Safari
+header_feature_signin_with_sl: Sign in with SimpleLogin
+header_feature_signin_with_sl_desc: Privacy-first login button for your app or website
+
+header_resource_blog: Blog
+header_resource_blog_desc: Stories, tips and privacy guides from our team
+header_resource_documentation: Documentation
+header_resource_documentation_desc: Get the most out of SimpleLogin
+header_resource_faq: FAQ
+header_resource_faq_desc: Answers to the most common questions
+header_resource_forum: Forum
+header_resource_forum_desc: Discuss features, ask questions, share best practices
+header_resource_github: GitHub
+header_resource_github_desc: Review our open-source code and contribute
+header_resource_status: Status
+header_resource_status_desc: Check service uptime and incidents
+header_resource_comparisons: Comparisons
 
 # hero section
 hero: Receive and send emails anonymously

layouts/partials/footer.html

@@ -228,14 +228,6 @@ <h3 class="h6 text-white">Downloads</h3>
 <!-- JS Plugins Init. -->
 <script>
   $(window).on('load', function () {
-    // initialization of HSMegaMenu component
-    $('.js-mega-menu').HSMegaMenu({
-      event: 'hover',
-      pageContainer: $('.container'),
-      breakpoint: 767.98,
-      hideTimeOut: 0
-    });
-
     // initialization of svg injector module
     $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
   });
@@ -267,6 +259,133 @@ <h3 class="h6 text-white">Downloads</h3>
     $.HSCore.components.HSGoTo.init('.js-go-to');
   });
 </script>
+
+<script>
+  (function () {
+    'use strict';
+
+    var navBar    = document.getElementById('navBar');
+    var closeBtn  = document.querySelector('.sl-drawer-close');
+    var hamburger = document.querySelector('.navbar-toggler');
+    var BREAKPOINT = navBar ? parseInt(navBar.getAttribute('data-breakpoint'), 10) : 1278;
+
+    if (!navBar || !hamburger) return;
+
+    function openDrawer() {
+      navBar.classList.add('is-open');
+      document.body.style.overflow = 'hidden';
+      hamburger.setAttribute('aria-expanded', 'true');
+    }
+
+    function closeDrawer() {
+      navBar.classList.remove('is-open');
+      document.body.style.overflow = '';
+      hamburger.setAttribute('aria-expanded', 'false');
+    }
+
+    hamburger.addEventListener('click', function () {
+      navBar.classList.contains('is-open') ? closeDrawer() : openDrawer();
+    });
+
+    if (closeBtn) closeBtn.addEventListener('click', closeDrawer);
+
+    window.addEventListener('resize', function () {
+      if (window.innerWidth >= BREAKPOINT) closeDrawer();
+    });
+  }());
+</script>
+
+<script>
+  (function () {
+    'use strict';
+
+    var navBar = document.getElementById('navBar');
+    var BREAKPOINT = navBar ? parseInt(navBar.getAttribute('data-breakpoint'), 10) : 1278;
+    var overlay    = document.getElementById('sl-nav-overlay');
+    var panels     = Array.from(document.querySelectorAll('.sl-mega-panel'));
+
+    if (!panels.length) return;
+
+    // Remember original DOM positions so panels can be restored after mobile use
+    var origins = new Map(panels.map(function (p) {
+      return [p, { parent: p.parentNode, next: p.nextSibling }];
+    }));
+
+    var active = { panel: null, trigger: null };
+
+    function isDesktop() {
+      return window.innerWidth >= BREAKPOINT;
+    }
+
+    function restoreOrigin(panel) {
+      var o = origins.get(panel);
+      if (panel.parentNode !== o.parent) {
+        o.parent.insertBefore(panel, o.next);
+      }
+    }
+
+    function positionPanel(panel, trigger) {
+      var rect = trigger.getBoundingClientRect();
+      var left = Math.min(rect.left, window.innerWidth - panel.offsetWidth - 16);
+      panel.style.top  = rect.bottom + 'px';
+      panel.style.left = Math.max(0, left) + 'px';
+    }
+
+    function close() {
+      if (!active.panel) return;
+      active.panel.classList.remove('is-open');
+      active.panel.style.top  = '';
+      active.panel.style.left = '';
+      active.trigger.setAttribute('aria-expanded', 'false');
+      restoreOrigin(active.panel);
+      if (overlay) overlay.classList.remove('is-visible');
+      active.panel = active.trigger = null;
+    }
+
+    function open(panel, trigger) {
+      if (active.panel === panel) { close(); return; }
+      if (active.panel) close();
+
+      if (!isDesktop()) {
+        // Slot panel into the drawer directly after its trigger's <li>
+        trigger.closest('li').insertAdjacentElement('afterend', panel);
+      }
+
+      panel.classList.add('is-open');
+      trigger.setAttribute('aria-expanded', 'true');
+      active.panel   = panel;
+      active.trigger = trigger;
+
+      if (isDesktop()) {
+        positionPanel(panel, trigger);
+        if (overlay) overlay.classList.add('is-visible');
+      }
+    }
+
+    document.addEventListener('click', function (e) {
+      var trigger = e.target.closest('#header [aria-haspopup="true"][aria-controls]');
+
+      if (trigger) {
+        var panel = document.getElementById(trigger.getAttribute('aria-controls'));
+        if (panel && panel.classList.contains('sl-mega-panel')) {
+          e.stopPropagation();
+          open(panel, trigger);
+          return;
+        }
+      }
+
+      if (active.panel && !active.panel.contains(e.target)) close();
+    });
+
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') close();
+    });
+
+    if (overlay) overlay.addEventListener('click', close);
+
+    window.addEventListener('resize', close);
+  }());
+</script>
 <script src="/local-storage-polyfill.js"></script>
 
 <!--<script type="text/javascript"