feat: add Safe{Con} link in the website header (#234)

* feat: add Safe{Con} link in the website header

* style link to SafeCon

* adjust external arrow size responsiveness

* bump package version

package.json

@@ -1,7 +1,7 @@
 {
   "name": "safe-homepage",
   "homepage": "https://github.com/safe-global/safe-homepage",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "scripts": {
     "build": "next build && next export",
     "lint": "tsc && next lint",

src/components/common/Header/index.tsx

@@ -4,11 +4,12 @@ import Link from 'next/link'
 
 import { AppRoutes } from '@/config/routes'
 import Logo from '@/public/images/logo.svg'
-import { WALLET_LINK } from '@/config/constants'
+import { SAFECON_LINK, WALLET_LINK } from '@/config/constants'
 import { useOpenPositions } from '@/hooks/useOpenPositions'
 import css from './styles.module.css'
 import clsx from 'clsx'
 import { useRouter } from 'next/router'
+import ArrowIcon from '@/public/images/arrow-out-square-corner.svg'
 
 const navItems = [
   {
@@ -31,8 +32,24 @@ const navItems = [
     label: 'Careers',
     href: AppRoutes.careers,
   },
+  {
+    label: (
+      <div className={css.externalLink}>
+        Safe
+        <u>CON</u>
+        <ArrowIcon />
+      </div>
+    ),
+    href: SAFECON_LINK,
+    external: true,
+  },
 ]
 
+const externalLinkAttrs = {
+  target: '_blank',
+  rel: 'noopener noreferrer',
+}
+
 const Header = () => {
   const { asPath } = useRouter()
   const [isOpen, setIsOpen] = useState<boolean>(false)
@@ -66,6 +83,7 @@ const Header = () => {
                 className={clsx(css.link, item.href === asPath && css.active)}
                 href={item.href}
                 onClick={closeNavigation}
+                {...(item.external ? externalLinkAttrs : {})}
               >
                 <Badge
                   badgeContent={item.href === AppRoutes.careers ? positions.length : undefined}

src/components/common/Header/styles.module.css

@@ -21,6 +21,7 @@
   align-items: center;
   list-style: none;
   gap: 32px;
+  --transition-duration: var(--transition-duration);
 }
 
 .burger {
@@ -44,7 +45,7 @@
   background: white;
   border-radius: 1px;
   position: absolute;
-  transition: transform 0.2s;
+  transition: transform var(--transition-duration);
 }
 
 .burger:before {
@@ -63,7 +64,7 @@
   text-decoration: none;
   padding: 24px 0;
   border-bottom: 1px solid var(--mui-palette-border-light);
-  transition: all 0.2s;
+  transition: all var(--transition-duration);
 }
 
 .link:active {
@@ -79,12 +80,34 @@
   pointer-events: none;
 }
 
+.externalLink {
+  display: flex;
+  align-items: baseline;
+  transition: all var(--transition-duration);
+}
+
+.externalLink u {
+  white-space: nowrap;
+}
+
+.externalLink svg {
+  margin-left: 8px;
+  width: 24px;
+  height: 24px;
+}
+
+.externalLink:hover svg path {
+  fill: var(--mui-palette-primary-light);
+}
+
 .button {
   font-size: 18px;
   line-height: 26px;
   padding: 15px 0;
   width: 100%;
   margin-top: 24px;
+  display: flex;
+  align-items: baseline;
 }
 
 .badge :global .MuiBadge-badge {
@@ -145,6 +168,11 @@
     border: 0;
   }
 
+  .externalLink svg {
+    width: 16px;
+    height: 16px;
+  }
+
   .button {
     font-size: 16px;
     line-height: 24px;

src/config/constants.ts

@@ -7,6 +7,7 @@ export const DUNE_API_KEY = process.env.NEXT_PUBLIC_DUNE_API_KEY || ''
 
 // Links
 export const WALLET_LINK = 'https://app.safe.global'
+export const SAFECON_LINK = 'https://conf.safe.global'
 export const CORE_LINK = 'https://core.safe.global'
 export const PRESS_LINK = 'https://press.safe.global'
 export const HELP_LINK = 'https://help.safe.global'