fixed overlapping

frontend/src/Navigation.tsx

@@ -2,7 +2,6 @@ import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { NavLink, useNavigate } from 'react-router-dom';
-import { ShareConversationModal } from './modals/ShareConversationModal';
 import conversationService from './api/services/conversationService';
 import userService from './api/services/userService';
 import Add from './assets/add.svg';
@@ -40,7 +39,7 @@ import {
   setSourceDocs,
 } from './preferences/preferenceSlice';
 import Upload from './upload/Upload';
-import ShareIcon from './assets/share.svg';
+import ShareButton from './components/ShareButton';
 
 interface NavigationProps {
   navOpen: boolean;
@@ -73,7 +72,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const [isDarkTheme] = useDarkTheme();
   const [isDocsListOpen, setIsDocsListOpen] = useState(false);
   const { t } = useTranslation();
-  const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
   const isApiKeySet = useSelector(selectApiKeyStatus);
   const [apiKeyModalState, setApiKeyModalState] =
     useState<ActiveState>('INACTIVE');
@@ -441,32 +439,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           />
         </button>
 
-        {conversationId && (
-          <>
-            {' '}
-            <button
-              title="Share"
-              onClick={() => {
-                setShareModalState(true);
-              }}
-              className="absolute top-4 right-20 z-20 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
-            >
-              <img
-                className="m-2 h-5 w-5 filter dark:invert"
-                alt="share"
-                src={ShareIcon}
-              />
-            </button>
-            {isShareModalOpen && (
-              <ShareConversationModal
-                close={() => {
-                  setShareModalState(false);
-                }}
-                conversationId={conversationId}
-              />
-            )}
-          </>
-        )}
+        {conversationId && <ShareButton conversationId={conversationId} />}
       </div>
       <APIKeyModal
         modalState={apiKeyModalState}