Added docs link (#1497)

* Added doc link

* lingui extract

Co-authored-by: GitHub Actions <actions@github.com>

packages/common-components/src/Icons/icons/Document.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as DocumentSvg } from "../svgs/document.svg"
+
+export { DocumentSvg }
+
+export default createSvgIcon(<DocumentSvg />)

packages/common-components/src/Icons/index.ts

@@ -22,6 +22,7 @@ export { default as DinersclubCardIcon, DinersclubCardSvg } from "./icons/Diners
 export { default as DirectionalDownIcon, DirectionalDownSvg } from "./icons/DirectionalDown.icon"
 export { default as DirectionalRightIcon, DirectionalRightSvg } from "./icons/DirectionalRight.icon"
 export { default as DiscoverCardIcon, DiscoverCardSvg } from "./icons/DiscoverCard.icon"
+export { default as DocumentIcon, DocumentSvg } from "./icons/Document.icon"
 export { default as DownloadIcon, DownloadSvg } from "./icons/Download.icon"
 export { default as EditIcon, EditSvg } from "./icons/Edit.icon"
 export { default as EthereumLogoIcon, EthereumLogoSvg } from "./icons/EthereumLogo.icon"

packages/storage-ui/src/Components/Layouts/AppNav.tsx

@@ -14,7 +14,8 @@ import {
   formatBytes,
   ChainsafeLogo,
   FolderSvg,
-  SettingSvg
+  SettingSvg,
+  DocumentSvg
 } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../StorageRoutes"
 import { Trans } from "@lingui/macro"
@@ -292,6 +293,21 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
                   <Trans>Settings</Trans>
                 </Typography>
               </Link>
+              <a
+                data-cy="docs-nav"
+                className={classes.navItem}
+                href="https://docs.storage.chainsafe.io/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <DocumentSvg />
+                <Typography
+                  variant="h5"
+                  className={classes.navItemText}
+                >
+                  <Trans>Docs</Trans>
+                </Typography>
+              </a>
             </nav>
           </div>
           <section>

packages/storage-ui/src/locales/en/messages.po

@@ -145,6 +145,9 @@ msgstr "Deletion successful"
 msgid "Didn't receive the email ?"
 msgstr "Didn't receive the email ?"
 
+msgid "Docs"
+msgstr "Docs"
+
 msgid "Download"
 msgstr "Download"