fix(app): fix navigation menu display position issue (#15734)

* fix(app): fix navigation menu display position issue

app/src/organisms/Navigation/NavigationMenu.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { createPortal } from 'react-dom'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { useHistory } from 'react-router-dom'
@@ -8,15 +9,16 @@ import {
   COLORS,
   Flex,
   Icon,
-  SPACING,
   LegacyStyledText,
+  SPACING,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
 import { MenuList } from '../../atoms/MenuList'
 import { MenuItem } from '../../atoms/MenuList/MenuItem'
 import { home, ROBOT } from '../../redux/robot-controls'
 import { useLights } from '../Devices/hooks'
+import { getTopPortalEl } from '../../App/portal'
 import { RestartRobotConfirmationModal } from './RestartRobotConfirmationModal'
 
 import type { Dispatch } from '../../redux/types'
@@ -48,9 +50,7 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
     setShowNavMenu(false)
   }
 
-  // ToDo (kk:10/02/2023)
-  // Need to update a function for onClick
-  return (
+  return createPortal(
     <>
       {showRestartRobotConfirmationModal ? (
         <RestartRobotConfirmationModal
@@ -132,6 +132,7 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
           </Flex>
         </MenuItem>
       </MenuList>
-    </>
+    </>,
+    getTopPortalEl()
   )
 }