Expose active trigger width and offset in NavigationMenuViewport

[onursagir]

Feature request

Overview

Currently NavigationMenu.Viewport does not expose the position or the width of the active trigger, which makes it difficult to position the submenu if the subemenu is smaller than the navigation bar. Currently it is possible hack your way around this by using the NavigationMenu.Indicator like i have done here however this does lead to other issues like setting min-width and text appearing on wrong places when mounting.

        <NavigationMenu.Indicator forceMount className={styles.indicator}>
          <div>
            <div className="absolute left-1/2 z-50 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rotate-45 bg-primary-main" />
            <div className="absolute left-0 top-full flex">
              <NavigationMenu.Viewport
                forceMount
                style={{
                  height: 'var(--radix-navigation-menu-viewport-height)',
                  width: 'var(--radix-navigation-menu-viewport-width)',
                }}
              />
            </div>
          </div>
        </NavigationMenu.Indicator>

Examples in other libraries

I guess this library already has the logic for it. packages/react/navigation-menu/src/NavigationMenu.tsx

          ? {
              left: 0,
              width: position.size + 'px',
              transform: `translateX(${position.offset}px)`,
            }
          : {
              top: 0,
              height: position.size + 'px',
              transform: `translateY(${position.offset}px)`,
            }),

Who does this impact? Who is this for?

This is for people who need to integrate submenu navigation which are smaller than the navbar.

Additional context

You can see what I mean on regels.overheid.nl