link to viewer

src/shared/Header.tsx

@@ -3,9 +3,10 @@ import Input from '@/components/Input'
 // import { ArrowDown2, CloseCircle, HambergerMenu, Logout, Wallet } from 'iconsax-react'
 // import AvatarImage from '../assets/images/avatar_image.png'
 import { useTranslation } from 'react-i18next'
-import { useLocation } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
+import { Paths } from '@/config/Paths'
 import { useSharedStore } from '@/shared/store/sharedStore'
-import { HambergerMenu } from 'iconsax-react'
+import { Eye, HambergerMenu } from 'iconsax-react'
 import { clx } from '@/helpers/utils'
 
 type SidebarSize = 'default' | 'wide'
@@ -33,6 +34,13 @@ const Header: FC<HeaderProps> = ({ hasMainSidebar = true, sidebarSize = 'default
     const { t } = useTranslation('global')
     const { setOpenSidebar, openSidebar, hasSubMenu, setSearch } = useSharedStore()
     const location = useLocation()
+    const editorPathPrefix = `${Paths.editor}/`
+    const isEditorRoute =
+        location.pathname.startsWith(editorPathPrefix) &&
+        location.pathname.length > editorPathPrefix.length
+    const editorDocumentId = isEditorRoute
+        ? (location.pathname.slice(editorPathPrefix.length).split('/')[0] ?? '')
+        : ''
 
     // useEffect(() => {
     //     setPopoverKey((prevKey) => prevKey + 1);
@@ -71,6 +79,17 @@ const Header: FC<HeaderProps> = ({ hasMainSidebar = true, sidebarSize = 'default
             </div>
             {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
             <div className='flex xl:gap-6 gap-4 items-center'>
+                {isEditorRoute && editorDocumentId ? (
+                    <Link
+                        to={`${Paths.viewer}/${editorDocumentId}`}
+                        className='flex items-center'
+                        aria-label={t('header.open_viewer')}
+                        title={t('header.open_viewer')}
+                    >
+                        <Eye size={20} color='black' />
+                    </Link>
+                ) : null}
+
                 {/* <Link className='xl:hidden' to={Paths.wallet}>
                     <Wallet className='xl:size-[18px] size-[17px]' color='#da2129' />
                 </Link> */}