Initial Drupal 11 with DDEV setup

web/core/modules/navigation/js/safe-triangle.js

@@ -0,0 +1,57 @@
+/**
+ * @file
+ *
+ * Element that improves sub-menu UX by implementing the Safe Triangle strategy.
+ * @see https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles
+ */
+
+((Drupal, once) => {
+  /**
+   * Update CSS variables values for positioning the safe triangle element.
+   *
+   * @param {CSSStyleDeclaration} style
+   *   Style property of the parent button.
+   * @param {number} clientX
+   *   Horizontal position relative to the element.
+   * @param {number} clientY
+   *   Vertical position relative to the element.
+   */
+  function handleMouseMove({ currentTarget: { style }, clientX, clientY }) {
+    style.setProperty('--safe-triangle-cursor-x', `${clientX}px`);
+    style.setProperty('--safe-triangle-cursor-y', `${clientY}px`);
+  }
+
+  /**
+   * Attaches the safe triangle behavior to all required triggers.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the safe triangle behavior.
+   * @prop {Drupal~behaviorDetach} detach
+   *   Removes the safe triangle element.
+   */
+  Drupal.behaviors.safeTriangleInit = {
+    attach: (context) => {
+      once('safe-triangle', '[data-has-safe-triangle]', context).forEach(
+        (button) => {
+          button.insertAdjacentHTML(
+            'beforeend',
+            '<div data-safe-triangle></div>',
+          );
+          button.addEventListener('mousemove', handleMouseMove);
+        },
+      );
+    },
+    detach: (context, settings, trigger) => {
+      if (trigger === 'unload') {
+        once
+          .remove('safe-triangle', '[data-has-safe-triangle]', context)
+          .forEach((button) => {
+            button.querySelector('[data-safe-triangle]')?.remove();
+            button.removeEventListener('mousemove', handleMouseMove);
+          });
+      }
+    },
+  };
+})(Drupal, once);