This code automatically adjust position to left/right based on available space

//states 
const [position, setPosition] = useState<string>('[&_div.absolute]:right-auto [&_div.absolute]:left-0');

// logic
useEffect(() => {
    if (menuRef.current) {
        const menuRect = menuRef.current.getBoundingClientRect();
        const spaceOnLeft = menuRect.left;
        const spaceOnRight = window.innerWidth - menuRect.right;

        // Set position based on available space
        if (spaceOnLeft > spaceOnRight) {
            setPosition('[&_div.absolute]:left-auto [&_div.absolute]:right-0');
        } else {
            setPosition('[&_div.absolute]:right-auto [&_div.absolute]:left-0');
        }
    }
}, [menu]);
 

// ui
<NavigationMenu className={position}>...</NavigationMenu />