From a6bf864bded9a7631113151ad90f7076ffb8d70b Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Mon, 22 Jul 2024 13:22:43 -0400
Subject: [PATCH] fix(app): fix navigation menu display position issue (#15734)

* fix(app): fix navigation menu display position issue
---
 app/src/organisms/Navigation/NavigationMenu.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/src/organisms/Navigation/NavigationMenu.tsx b/app/src/organisms/Navigation/NavigationMenu.tsx
index 9c933f31a38..4c579f5b9ce 100644
--- a/app/src/organisms/Navigation/NavigationMenu.tsx
+++ b/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,8 +9,8 @@ import {
   COLORS,
   Flex,
   Icon,
-  SPACING,
   LegacyStyledText,
+  SPACING,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
@@ -17,6 +18,7 @@ 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()
   )
 }