feat(menu): Add prop to make logo absolute url (#114)

* feat(menu): Add prop to make logo absolute url * feat(menu): Check home link for logo url
pancakeswap · Jan 6, 2021 · 778a50e · 778a50e
1 parent 851de1b
commit 778a50e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/src/widgets/Menu/Logo.tsx b/src/widgets/Menu/Logo.tsx
@@ -10,6 +10,7 @@ interface Props {
   isPushed: boolean;
   isDark: boolean;
   togglePush: () => void;
+  href: string;
 }
 
 const StyledLink = styled(Link)`
@@ -30,7 +31,15 @@ const StyledLink = styled(Link)`
   }
 `;
 
-const Logo: React.FC<Props> = ({ isPushed, togglePush, isDark }) => {
+const Logo: React.FC<Props> = ({ isPushed, togglePush, isDark, href }) => {
+  const isAbsoluteUrl = href.startsWith("http");
+  const innerLogo = (
+    <>
+      <LogoIcon className="mobile-icon" />
+      <LogoWithText className="desktop-icon" isDark={isDark} />
+    </>
+  );
+
   return (
     <Flex>
       <MenuButton aria-label="Toggle menu" onClick={togglePush} mr="24px">
@@ -40,10 +49,15 @@ const Logo: React.FC<Props> = ({ isPushed, togglePush, isDark }) => {
           <HamburgerIcon width="24px" color="textSubtle" />
         )}
       </MenuButton>
-      <StyledLink to="/" aria-label="Pancake home page">
-        <LogoIcon className="mobile-icon" />
-        <LogoWithText className="desktop-icon" isDark={isDark} />
-      </StyledLink>
+      {isAbsoluteUrl ? (
+        <StyledLink as="a" href={href} aria-label="Pancake home page">
+          {innerLogo}
+        </StyledLink>
+      ) : (
+        <StyledLink to={href} aria-label="Pancake home page">
+          {innerLogo}
+        </StyledLink>
+      )}
     </Flex>
   );
 };

diff --git a/src/widgets/Menu/Menu.tsx b/src/widgets/Menu/Menu.tsx
@@ -91,10 +91,18 @@ const Menu: React.FC<NavProps> = ({
     };
   }, []);
 
+  // Find the home link if provided
+  const homeLink = links.find((link) => link.label === "Home");
+
   return (
     <Wrapper>
       <StyledNav showMenu={showMenu}>
-        <Logo isPushed={isPushed} togglePush={() => setIsPushed((prevState: boolean) => !prevState)} isDark={isDark} />
+        <Logo
+          isPushed={isPushed}
+          togglePush={() => setIsPushed((prevState: boolean) => !prevState)}
+          isDark={isDark}
+          href={homeLink?.href ?? "/"}
+        />
         <UserBlock account={account} login={login} logout={logout} />
       </StyledNav>
       <BodyWrapper>