OffHealth component library

Primary Navigation 

<nav class="n7-primary-navigation flex lg:justify-end" aria-label="Principale" id="siteNavWrapper">
    <button type="button" class="n7-btn 
    n7-btn--only-text rounded-none lg:hidden ml-auto n7-btn--icon group" aria-expanded="false" aria-controls="mainNavPanel" id="mobileNavToggle">
        <svg class="inline-block align-middle fill-current w-6 h-6 m-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-show-menu group-aria-expanded:hidden" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#mini--bars-3" />
        </svg>

        <svg class="inline-block align-middle fill-current w-6 h-6 m-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-close-menu hidden group-aria-expanded:inline-block" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#mini--x-mark" />
        </svg>

        <span class="sr-only is-show-menu group-aria-expanded:hidden">
            Menu
        </span>
        <span class="sr-only is-close-menu hidden group-aria-expanded:block">
            Chiudi menu
        </span>
    </button>
    <!-- Mobile panel -->
    <div class="n7-primary-navigation__panel flex-col bg-white max-lg:shadow-[-6px_0px_4px_-1px_rgba(0,0,0,0.06)] transition-all invisible py-6 px-4 fixed lg:static lg:visible top-[--header-height] bottom-0 max-lg:w-[90%] max-lg:max-w-[350px] overflow-y-auto" id="mainNavPanel">
        <!-- Main nav -->
        <div class="n7-primary-navigation__module is-main lg:border-b-0" id="mainNavListContainer">
            <ul class="n7-primary-navigation__list flex max-lg:flex-col gap-6 lg:gap-4 lg:justify-end has-dropdown-menu">

                <li>
                    <!-- RP 240328 Primary nav fix - Changed classes -->
                    <a href="#" class="n7-link flex flex-col items-start lg:items-center py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium visited:n7-content-01 n7-link--active">
                        Chi Siamo

                    </a>
                </li>

                <li class="n7-dropdown-menu n7-primary-navigation__item">
                    <button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex lg:flex-col items-center justify-between py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 aria-expanded:n7-content-primary lg:max-xl:leading-5" aria-expanded="false" aria-controls="submenuId01">
                        Salute dell’Occhio<svg class="inline-block align-middle fill-current w-5 h-5 transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
                            <use xlink:href="../../icons.svg#mini--chevron-down" />
                        </svg>
                    </button>
                    <ul class="n7-dropdown-menu__list hidden lg:absolute lg:pt-2 lg:pb-4 lg:px-4 lg:rounded-lg lg:shadow-xl bg-white lg:w-80" id="submenuId01">

                        <li class="n7-dropdown-menu__item group is-active">
                            <!-- RP 240416 Minisite user menu - changed classes -->
                            <a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
                                <div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">

                                    <span class="grow">Item label 1</span>

                                    <svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
                                        <use xlink:href="../../icons.svg#mini--arrow-right" />
                                    </svg>

                                </div>
                                <div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
                            </a>
                        </li>

                        <li class="n7-dropdown-menu__item group">
                            <!-- RP 240416 Minisite user menu - changed classes -->
                            <a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
                                <div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">

                                    <span class="grow">Item label 2</span>

                                    <svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
                                        <use xlink:href="../../icons.svg#mini--arrow-right" />
                                    </svg>

                                </div>
                                <div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
                            </a>
                        </li>

                        <li class="n7-dropdown-menu__item group">
                            <!-- RP 240416 Minisite user menu - changed classes -->
                            <a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
                                <div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">

                                    <span class="grow">Item label 3</span>

                                    <svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
                                        <use xlink:href="../../icons.svg#mini--arrow-right" />
                                    </svg>

                                </div>
                                <div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
                            </a>
                        </li>

                        <li class="n7-dropdown-menu__item group">
                            <!-- RP 240416 Minisite user menu - changed classes -->
                            <a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
                                <div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">

                                    <span class="grow">Item label 4</span>

                                    <svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
                                        <use xlink:href="../../icons.svg#mini--arrow-right" />
                                    </svg>

                                </div>
                                <div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
                            </a>
                        </li>

                    </ul>
                </li>

                <li class="n7-dropdown-menu n7-primary-navigation__item">
                    <button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex lg:flex-col items-center justify-between py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 aria-expanded:n7-content-primary lg:max-xl:leading-5" aria-expanded="false" aria-controls="submenuId02">
                        Ricerca e Innovazione<svg class="inline-block align-middle fill-current w-5 h-5 transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
                            <use xlink:href="../../icons.svg#mini--chevron-down" />
                        </svg>
                    </button>
                    <ul class="n7-dropdown-menu__list hidden lg:absolute lg:pt-2 lg:pb-4 lg:px-4 lg:rounded-lg lg:shadow-xl bg-white lg:w-80" id="submenuId02">

                        <li class="n7-dropdown-menu__item group is-active">
                            <!-- RP 240416 Minisite user menu - changed classes -->
                            <a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
                                <div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">

                                    <span class="grow">Item label 1</span>

                                    <svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
                                        <use xlink:href="../../icons.svg#mini--arrow-right" />
                                    </svg>

                                </div>
                                <div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
                            </a>
                        </li>

                        <li class="n7-dropdown-menu__item group">
                            <!-- RP 240416 Minisite user menu - changed classes -->
                            <a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
                                <div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">

                                    <span class="grow">Item label 2</span>

                                    <svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
                                        <use xlink:href="../../icons.svg#mini--arrow-right" />
                                    </svg>

                                </div>
                                <div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
                            </a>
                        </li>

                        <li class="n7-dropdown-menu__item group">
                            <!-- RP 240416 Minisite user menu - changed classes -->
                            <a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
                                <div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">

                                    <span class="grow">Item label 3</span>

                                    <svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
                                        <use xlink:href="../../icons.svg#mini--arrow-right" />
                                    </svg>

                                </div>
                                <div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
                            </a>
                        </li>

                        <li class="n7-dropdown-menu__item group">
                            <!-- RP 240416 Minisite user menu - changed classes -->
                            <a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
                                <div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">

                                    <span class="grow">Item label 4</span>

                                    <svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
                                        <use xlink:href="../../icons.svg#mini--arrow-right" />
                                    </svg>

                                </div>
                                <div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
                            </a>
                        </li>

                    </ul>
                </li>

                <li>
                    <!-- RP 240328 Primary nav fix - Changed classes -->
                    <a href="#" class="n7-link flex flex-col items-start lg:items-center py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 visited:n7-content-01">
                        Prodotti

                    </a>
                </li>

            </ul>
        </div>
    </div>
    <div class="n7-primary-navigation__backdrop bg-black/25 top-[--header-height] lg:hidden"></div>
</nav>
 
<nav class="n7-primary-navigation flex{% if classes %} {{ classes }}{% endif %}" aria-label="Principale" id="siteNavWrapper">
    <button type="button" class="n7-btn 
    n7-btn--only-text rounded-none lg:hidden ml-auto n7-btn--icon group" aria-expanded="false" aria-controls="mainNavPanel" id="mobileNavToggle">
        {% render '@icon--small', { id: 'mini--bars-3', classes: 'm-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-show-menu group-aria-expanded:hidden', size: 'w-6 h-6' }, true %}
        {% render '@icon--small', { id: 'mini--x-mark', classes: 'm-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-close-menu hidden group-aria-expanded:inline-block', size: 'w-6 h-6' }, true %}
        <span class="sr-only is-show-menu group-aria-expanded:hidden">
            Menu
        </span>
         <span class="sr-only is-close-menu hidden group-aria-expanded:block">
            Chiudi menu
        </span>
    </button>
    <!-- Mobile panel -->
    <div class="n7-primary-navigation__panel flex-col bg-white max-lg:shadow-[-6px_0px_4px_-1px_rgba(0,0,0,0.06)] transition-all invisible py-6 px-4 fixed lg:static lg:visible top-[--header-height] bottom-0 max-lg:w-[90%] max-lg:max-w-[350px] overflow-y-auto" id="mainNavPanel">
         <!-- Main nav -->
        <div class="n7-primary-navigation__module is-main lg:border-b-0"  id="mainNavListContainer">
            <ul class="n7-primary-navigation__list flex max-lg:flex-col gap-6 lg:gap-4 lg:justify-end has-dropdown-menu">
                {% for firstLevel in firstLevels %}
                    {% if firstLevel.hasSubItems %}
                    {% render '@dropdown-menu', { id: firstLevel.id, breakpoint: breakpoint, label: firstLevel.label, items: firstLevel.items, classes: 'n7-primary-navigation__item', listClasses: itemClasses, triggerFontSize:itemFontSize, dropdownItemFontSize: itemDropdownFontSize }, true %}
                    {% else %}
                    <li>
<!-- RP 240328 Primary nav fix - Changed classes -->
                        {% render '@link', { label: firstLevel.label, href: '#', classes: firstLevel.classes }, true %}
                    </li>
                    {% endif %}
                {% endfor %}                
            </ul>
        </div>
    </div>
    <div class="n7-primary-navigation__backdrop bg-black/25 top-[--header-height] lg:hidden"></div>
</nav>
 
{
  "navId": "mainNavPanel",
  "classes": "lg:justify-end",
  "mainHidden": false,
  "minisiteHidden": true,
  "breakpoint": "lg",
  "firstLevels": [
    {
      "label": "Chi Siamo",
      "classes": "flex flex-col items-start lg:items-center py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium visited:n7-content-01 n7-link--active"
    },
    {
      "label": "Salute dell’Occhio",
      "hasSubItems": true,
      "id": "submenuId01",
      "items": [
        {
          "label": "Item label 1",
          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
          "iconRight": "mini--arrow-right",
          "classes": "n7-background-gray-01 mt-2 p-5",
          "isActive": true
        },
        {
          "label": "Item label 2",
          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
          "iconRight": "mini--arrow-right",
          "classes": "n7-background-gray-01 mt-2 p-5"
        },
        {
          "label": "Item label 3",
          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
          "iconRight": "mini--arrow-right",
          "classes": "n7-background-gray-01 mt-2 p-5"
        },
        {
          "label": "Item label 4",
          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
          "iconRight": "mini--arrow-right",
          "classes": "n7-background-gray-01 mt-2 p-5"
        }
      ]
    },
    {
      "label": "Ricerca e Innovazione",
      "hasSubItems": true,
      "id": "submenuId02",
      "items": [
        {
          "label": "Item label 1",
          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
          "iconRight": "mini--arrow-right",
          "classes": "n7-background-gray-01 mt-2 p-5",
          "isActive": true
        },
        {
          "label": "Item label 2",
          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
          "iconRight": "mini--arrow-right",
          "classes": "n7-background-gray-01 mt-2 p-5"
        },
        {
          "label": "Item label 3",
          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
          "iconRight": "mini--arrow-right",
          "classes": "n7-background-gray-01 mt-2 p-5"
        },
        {
          "label": "Item label 4",
          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
          "iconRight": "mini--arrow-right",
          "classes": "n7-background-gray-01 mt-2 p-5"
        }
      ]
    },
    {
      "label": "Prodotti",
      "classes": "flex flex-col items-start lg:items-center py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 visited:n7-content-01"
    }
  ]
}
  • Content: 
    /*
 *   This content is licensed according to the W3C Software License at
 *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
 *
 *   Supplemental JS for the disclosure menu keyboard behavior
 */

'use strict';

// Helper function to find the closest ancestor with a specific tag name
function findAncestor(element, tagName) {
  while (element) {
    if (element.tagName.toLowerCase() === tagName) {
      return element;
    }
    element = element.parentElement;
  }
  return null;
}

// function getButtonByControlledMenuId(id) {
//   return this.topLevelNodes.find((button) => {
//     const controlledMenuId = getControlledMenuId(button);
//     return controlledMenuId === id;
//   });
// }

class DisclosureNav {
  constructor(domNode) {
    this.rootNode = domNode;
    this.controlledNodes = [];
    this.openIndex = null;
    this.useArrowKeys = true;
    this.topLevelNodes = [
      ...this.rootNode.querySelectorAll(
        '.main-link, .dropdown-trigger'
      ),
    ];

    this.topLevelNodes.forEach((node) => {
      // handle button + menu
      if (
        node.tagName.toLowerCase() === 'button' &&
        node.hasAttribute('aria-controls')
      ) {
        const menu = node.parentNode.querySelector('ul');

        if (menu) {
          // save ref controlled menu
          this.controlledNodes.push(menu);

          // collapse menus
          node.setAttribute('aria-expanded', 'false');
          this.toggleMenu(menu, false);

          // attach event listeners
          menu.addEventListener('keydown', this.onMenuKeyDown.bind(this));
          node.addEventListener('click', this.onButtonClick.bind(this));
          node.addEventListener('keydown', this.onButtonKeyDown.bind(this));
        }
      }
      // handle links
      else {
        this.controlledNodes.push(null);
        node.addEventListener('keydown', this.onLinkKeyDown.bind(this));
      }
    });

    this.rootNode.addEventListener('focusout', this.onBlur.bind(this));
  }

  controlFocusByKey(keyboardEvent, nodeList, currentIndex) {
    switch (keyboardEvent.key) {
      case 'ArrowUp':
      case 'ArrowLeft':
        keyboardEvent.preventDefault();
        if (currentIndex > -1) {
          var prevIndex = Math.max(0, currentIndex - 1);
          nodeList[prevIndex].focus();
        }
        break;
      case 'ArrowDown':
      case 'ArrowRight':
        keyboardEvent.preventDefault();
        if (currentIndex > -1) {
          var nextIndex = Math.min(nodeList.length - 1, currentIndex + 1);
          nodeList[nextIndex].focus();
        }
        break;
      case 'Home':
        keyboardEvent.preventDefault();
        nodeList[0].focus();
        break;
      case 'End':
        keyboardEvent.preventDefault();
        nodeList[nodeList.length - 1].focus();
        break;
    }
  }

  // public function to close open menu
  close() {
    this.toggleExpand(this.openIndex, false);
  }

  onBlur(event) {
    var menuContainsFocus = this.rootNode.contains(event.relatedTarget);
    if (!menuContainsFocus && this.openIndex !== null) {
      this.toggleExpand(this.openIndex, false);
    }
  }

  onButtonClick(event) {
    var target = event.target;

    // Check if the target is not a button but is a descendant of a button
    if (target.tagName.toLowerCase() !== 'button') {
      var buttonAncestor = findAncestor(target, 'button');

      // If an ancestor button is found, trigger the click on that button
      if (buttonAncestor) {
        buttonAncestor.click();
        return; // Stop further processing since the click is handled
      }
    }

    var button = event.target;
    var buttonIndex = this.topLevelNodes.indexOf(button);
    var buttonExpanded = button.getAttribute('aria-expanded') === 'true';
    this.toggleExpand(buttonIndex, !buttonExpanded);

  }

  // getControlledMenuId(button) {
  //   return button.getAttribute('aria-controls');
  // }


  onButtonKeyDown(event) {
    var targetButtonIndex = this.topLevelNodes.indexOf(document.activeElement);

    // close on escape
    if (event.key === 'Escape') {
      this.toggleExpand(this.openIndex, false);
    }

    // move focus into the open menu if the current menu is open
    else if (
      this.useArrowKeys &&
      this.openIndex === targetButtonIndex &&
      event.key === 'ArrowDown'
    ) {
      event.preventDefault();
      this.controlledNodes[this.openIndex].querySelector('a').focus();
    }

    // handle arrow key navigation between top-level buttons, if set
    else if (this.useArrowKeys) {
      this.controlFocusByKey(event, this.topLevelNodes, targetButtonIndex);
    }
  }

  onLinkKeyDown(event) {
    var targetLinkIndex = this.topLevelNodes.indexOf(document.activeElement);

    // handle arrow key navigation between top-level buttons, if set
    if (this.useArrowKeys) {
      this.controlFocusByKey(event, this.topLevelNodes, targetLinkIndex);
    }
  }

  onMenuKeyDown(event) {
    if (this.openIndex === null) {
      return;
    }

    var menuLinks = Array.prototype.slice.call(
      this.controlledNodes[this.openIndex].querySelectorAll('a')
    );
    var currentIndex = menuLinks.indexOf(document.activeElement);

    // close on escape
    if (event.key === 'Escape') {
      this.topLevelNodes[this.openIndex].focus();
      this.toggleExpand(this.openIndex, false);
    }

    // handle arrow key navigation within menu links, if set
    else if (this.useArrowKeys) {
      this.controlFocusByKey(event, menuLinks, currentIndex);
    }
  }

  toggleExpand(index, expanded) {
    // close open menu, if applicable
    if (this.openIndex !== index) {
      this.toggleExpand(this.openIndex, false);
    }

    // handle menu at called index
    if (this.topLevelNodes[index]) {
      this.openIndex = expanded ? index : null;
      this.topLevelNodes[index].setAttribute('aria-expanded', expanded);
      this.toggleMenu(this.controlledNodes[index], expanded);
    }
  }

  toggleMenu(domNode, show) {
    if (domNode) {
      domNode.style.display = show ? 'block' : 'none';

      // if (show) {
      // Get the menu's position and dimensions
      const rect = domNode.getBoundingClientRect();

      // Check if the menu overflows on the right
      const isOverflowingRight = rect.right > window.innerWidth;

      // Check if the menu overflows on the left
      const isOverflowingLeft = rect.left < 0;

      // Add the appropriate class based on overflow
      domNode.classList.toggle('right-0', isOverflowingRight);
      domNode.classList.toggle('left-0', isOverflowingLeft);
      // }
    }
  }

  updateKeyControls(useArrowKeys) {
    this.useArrowKeys = useArrowKeys;
  }
}

/* Initialize Disclosure Menus */

window.addEventListener(
  'load',
  function () {
    var menus = document.querySelectorAll('.has-dropdown-menu');
    var disclosureMenus = [];

    for (var i = 0; i < menus.length; i++) {
      disclosureMenus[i] = new DisclosureNav(menus[i]);
    }
  },
  false
);
  • URL: /components/raw/primary-navigation/primary-navigation.js
  • Filesystem Path: components/03-molecules/primary-navigation/primary-navigation.js
  • Size: 7 KB

Primary navigation uses dropdown menu component.

Replace classes ‘n7-content-01 hover:n7-content-03’ with ‘n7-link–active’ to current first level navigation item (see Chi siamo)

Add class is-active to current second level navigation item (see dropdown first ‘li’ element)