From 9d42e9797fec8b89c1115f7091cf384971df3832 Mon Sep 17 00:00:00 2001
From: Nejc <nmursi2@gmail.com>
Date: Tue, 27 Jun 2023 22:35:20 +0800
Subject: [PATCH] feat: redirect on logo click  #178 (#199)

* feat: redirect on logo click  #178

* fix: link

---------

Co-authored-by: Marcel Ebert <mail@marcel-ebert.de>
---
 src/components/Layout/index.tsx   | 23 +++++++++++++++--------
 src/components/Layout/styles.sass |  4 +---
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 5c4594eb..62719664 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -1,6 +1,6 @@
 import { Bars3Icon } from '@heroicons/react/20/solid';
 import { memo, useEffect, useMemo, useState } from 'preact/compat';
-import { Outlet, useParams } from 'react-router-dom';
+import { Link, Outlet, useParams } from 'react-router-dom';
 import { useGlobalState } from '../../GlobalStateProvider';
 import AmplitudeLogo from '../../assets/amplitud-logo.svg';
 import PendulumLogo from '../../assets/pendulum-logo.png';
@@ -63,13 +63,20 @@ export default function Layout(): JSX.Element | null {
             visible ? 'open left-0' : 'closed -left-full'
           }`}
         >
-          <img
-            className="pendulum-logo"
-            src={sideBarLogo}
-            alt=""
-            style={isPendulum ? {} : { marginTop: 20, marginBottom: 30, marginLeft: 30 }}
-          />
-          {isTestnet && <div className="foucoco-tag">Foucoco testnet</div>}
+          <div
+            style={
+              isPendulum ? { marginLeft: 20, marginBottom: 20 } : { marginTop: 20, marginBottom: 30, marginLeft: 30 }
+            }
+          >
+            <a
+              href={`https://pendulumchain.org/${isPendulum ? '' : 'amplitude'}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <img className="logo" src={sideBarLogo} alt="" />
+              {isTestnet && <div className="foucoco-tag">Foucoco testnet</div>}
+            </a>
+          </div>
           <Nav onClick={() => setVisible(false)} />
           <div className="sidebar-footer">
             <Versions tenantName={state.tenantName} />
diff --git a/src/components/Layout/styles.sass b/src/components/Layout/styles.sass
index 0a5616e6..7570d1a1 100644
--- a/src/components/Layout/styles.sass
+++ b/src/components/Layout/styles.sass
@@ -31,10 +31,8 @@ $menu: 32px
   @media screen and (max-width: $medium)
     box-shadow: 5px 0 8px rgba(0, 0, 0, .1)
 
-.pendulum-logo
+#sidebar-wrapper .logo
   width: 160px
-  margin-left: 20px
-  margin-bottom: 20px
 
 .foucoco-tag
   font-family: 'Nunito Sans'