feat: Add dropdown submenus (#51)

pancakeswap · Nov 12, 2020 · d8592e6 · d8592e6
1 parent 49a9c26
commit d8592e6
Show file tree

Hide file tree

Showing 13 changed files with 169 additions and 43 deletions.
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -7,18 +7,17 @@ interface Props {
 
 const DropdownContent = styled.div`
   display: none;
-  width: max-content;
   flex-direction: column;
   position: absolute;
   left: 50%;
   transform: translate(-50%, 0);
   background-color: ${({ theme }) => theme.nav.background};
   box-shadow: ${({ theme }) => theme.shadows.level1};
   padding: 16px;
-  border-radius: 16px;
   max-height: 500px;
   overflow-y: auto;
-  z-index: ${({ theme }) => theme.zIndices.modal};
+  z-index: ${({ theme }) => theme.zIndices.dropdown};
+  border-radius: ${({ theme }) => theme.radii.small};
 `;
 
 const Container = styled.div`

diff --git a/src/components/Svg/Icons/ChevronDown.tsx b/src/components/Svg/Icons/ChevronDown.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import Svg from "../Svg";
+import SvgProps from "../types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <path d="M8.11997 9.29006L12 13.1701L15.88 9.29006C16.27 8.90006 16.9 8.90006 17.29 9.29006C17.68 9.68006 17.68 10.3101 17.29 10.7001L12.7 15.2901C12.31 15.6801 11.68 15.6801 11.29 15.2901L6.69997 10.7001C6.30997 10.3101 6.30997 9.68006 6.69997 9.29006C7.08997 8.91006 7.72997 8.90006 8.11997 9.29006Z" />
+    </Svg>
+  );
+};
+
+export default Icon;
diff --git a/src/components/Svg/index.tsx b/src/components/Svg/index.tsx
@@ -1,5 +1,6 @@
 export { default as BlockIcon } from "./Icons/Block";
 export { default as CheckmarkIcon } from "./Icons/Checkmark";
+export { default as ChevronDownIcon } from "./Icons/ChevronDown";
 export { default as CloseIcon } from "./Icons/Close";
 export { default as ErrorIcon } from "./Icons/Error";
 export { default as HamburgerIcon } from "./Icons/Hamburger";

diff --git a/src/theme/base.ts b/src/theme/base.ts
@@ -23,6 +23,7 @@ export const shadows = {
 const spacing: Spacing = [0, 4, 8, 16, 24, 32, 48, 64];
 
 const radii = {
+  small: "4px",
   default: "16px",
   card: "32px",
   circle: "50%",

diff --git a/src/theme/types.ts b/src/theme/types.ts
@@ -18,6 +18,7 @@ export type MediaQueries = {
 export type Spacing = number[];
 
 export type Radii = {
+  small: string;
   default: string;
   card: string;
   circle: string;

diff --git a/src/widgets/Footer/config.ts b/src/widgets/Footer/config.ts
@@ -3,10 +3,6 @@ export default [
     label: "Voting",
     href: "https://voting.pancakeswap.finance",
   },
-  {
-    label: "Analytics",
-    href: "https://pancakeswap.info",
-  },
   {
     label: "Staking",
     href: "/staking",

diff --git a/src/widgets/Nav/Buttons.tsx b/src/widgets/Nav/Buttons.tsx
@@ -1,4 +1,6 @@
+import React, { AnchorHTMLAttributes } from "react";
 import styled from "styled-components";
+import { NavLink } from "react-router-dom";
 import Button from "../../components/Button";
 
 const MobileOnlyButton = styled(Button)`
@@ -12,12 +14,24 @@ MobileOnlyButton.defaultProps = {
 };
 
 const MenuButton = styled(Button)`
-  padding: 8px;
+  padding: 0 8px;
   border-radius: 8px;
 `;
 MenuButton.defaultProps = {
   variant: "text",
   size: "sm",
 };
 
-export { MobileOnlyButton, MenuButton };
+const MenuLink: React.FC<AnchorHTMLAttributes<HTMLAnchorElement>> = ({ href = "", children, ...props }) => {
+  return href.startsWith("http") ? (
+    <a key={href} className="link" href={href} {...props}>
+      {children}
+    </a>
+  ) : (
+    <NavLink key={href} className="link" to={href} {...props}>
+      {children}
+    </NavLink>
+  );
+};
+
+export { MobileOnlyButton, MenuButton, MenuLink };
diff --git a/src/widgets/Nav/MenuDropdwn.tsx b/src/widgets/Nav/MenuDropdwn.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+interface Props {
+  target: React.ReactElement;
+}
+
+const DropdownContent = styled.div<{ isOpen: boolean }>`
+  display: ${({ isOpen }) => (isOpen ? "flex" : "none")};
+  flex-direction: column;
+  padding-left: 8px;
+
+  ${({ theme }) => theme.mediaQueries.nav} {
+    padding-left: 0;
+    display: none;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+    background-color: ${({ theme }) => theme.nav.background};
+    box-shadow: ${({ theme }) => theme.shadows.level1};
+    border-radius: ${({ theme }) => theme.radii.small};
+    max-height: 500px;
+    overflow-y: auto;
+    z-index: ${({ theme }) => theme.zIndices.modal};
+  }
+`;
+
+const Container = styled.div`
+  width: 100%;
+  position: relative;
+
+  ${({ theme }) => theme.mediaQueries.nav} {
+    width: fit-content;
+    height: 100%;
+    &:hover ${DropdownContent}, &:focus-within ${DropdownContent} {
+      display: flex;
+    }
+  }
+`;
+
+const Dropdown: React.FC<Props> = ({ target, children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <Container onClick={() => setIsOpen((prevState) => !prevState)}>
+      {target}
+      <DropdownContent isOpen={isOpen}>{children}</DropdownContent>
+    </Container>
+  );
+};
+
+export default Dropdown;
diff --git a/src/widgets/Nav/PancakePrice.tsx b/src/widgets/Nav/PancakePrice.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import styled from "styled-components";
+import { LogoRoundIcon } from "../../components/Svg";
+import Text from "../../components/Text";
+
+const Container = styled.a`
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+  svg {
+    transition: transform 0.3s;
+  }
+  :hover {
+    svg {
+      transform: scale(1.2);
+    }
+  }
+`;
+
+const PancakePrice: React.FC<{ cakePriceUsd?: number }> = ({ cakePriceUsd }) => {
+  return cakePriceUsd ? (
+    <Container href="https://pancakeswap.info/token/0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82">
+      <LogoRoundIcon mr="4px" />
+      <Text bold>{`$${cakePriceUsd.toFixed(3)}`}</Text>
+    </Container>
+  ) : null;
+};
+
+export default PancakePrice;
diff --git a/src/widgets/Nav/Panel.tsx b/src/widgets/Nav/Panel.tsx
@@ -1,14 +1,13 @@
 import React from "react";
 import styled from "styled-components";
-import { NavLink } from "react-router-dom";
-import { CloseIcon, LogoRoundIcon } from "../../components/Svg";
+import { CloseIcon, ChevronDownIcon } from "../../components/Svg";
 import Button from "../../components/Button";
-import Flex from "../../components/Flex";
-import Text from "../../components/Text";
 import Dropdown from "../../components/Dropdown";
+import MenuDropdwn from "./MenuDropdwn";
 import Language from "./icons/Language";
 import UserBlock from "./UserBlock";
-import { MobileOnlyButton, MenuButton } from "./Buttons";
+import PancakePrice from "./PancakePrice";
+import { MobileOnlyButton, MenuButton, MenuLink } from "./Buttons";
 import config from "./config";
 import Dark from "./icons/Dark";
 import Light from "./icons/Light";
@@ -57,9 +56,12 @@ const LinkBlock = styled.div`
     flex-direction: row;
   }
 
-  a {
+  .link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
     width: 100%;
-    height: 100%;
+    min-height: 40px;
     padding: 8px 40px;
     font-weight: bold;
     transition: background-color 0.2s;
@@ -68,9 +70,8 @@ const LinkBlock = styled.div`
       background-color: ${({ theme }) => theme.nav.hover};
     }
     ${({ theme }) => theme.mediaQueries.nav} {
-      display: flex;
-      align-items: center;
-      padding: 0 12px;
+      height: 100%;
+      padding: 0 16px;
     }
   }
 `;
@@ -111,25 +112,35 @@ const Panel: React.FC<Props> = ({
         <CloseIcon />
       </MobileOnlyButton>
       <LinkBlock>
-        {config.nav.map((entry) =>
-          entry.href.startsWith("http") ? (
-            <a key={entry.href} href={entry.href}>
-              {entry.label}
-            </a>
-          ) : (
-            <NavLink key={entry.href} to={entry.href} onClick={closeNav}>
+        {config.nav.map((entry) => {
+          if (entry.items) {
+            return (
+              <MenuDropdwn
+                target={
+                  <div className="link" role="button">
+                    {entry.label}
+                    <ChevronDownIcon color="primary" />
+                  </div>
+                }
+              >
+                {entry.items.map((item) => (
+                  <MenuLink href={item.href} onClick={closeNav}>
+                    {item.label}
+                  </MenuLink>
+                ))}
+              </MenuDropdwn>
+            );
+          }
+
+          return (
+            <MenuLink href={entry.href} onClick={closeNav}>
               {entry.label}
-            </NavLink>
-          )
-        )}
+            </MenuLink>
+          );
+        })}
       </LinkBlock>
       <ControlBlock>
-        {cakePriceUsd && (
-          <Flex mr="4px">
-            <LogoRoundIcon mr="4px" />
-            <Text bold>{`$${cakePriceUsd.toFixed(3)}`}</Text>
-          </Flex>
-        )}
+        <PancakePrice cakePriceUsd={cakePriceUsd} />
         <MenuButton onClick={() => toggleTheme(!isDark)}>
           {isDark ? <Light color="primary" /> : <Dark color="primary" />}
         </MenuButton>
@@ -148,7 +159,7 @@ const Panel: React.FC<Props> = ({
               size="sm"
               onClick={() => setLang(lang)}
               // Safari specific fix
-              style={{ minHeight: "32px" }}
+              style={{ minHeight: "32px", width: "max-content" }}
             >
               {lang.language}
             </Button>

diff --git a/src/widgets/Nav/WalletCard.tsx b/src/widgets/Nav/WalletCard.tsx
@@ -20,6 +20,7 @@ const WalletCard: React.FC<Props> = ({ connectCallback, onDismiss, mb }) => {
   const { title, icon: Icon } = walletConfig;
   return (
     <Button
+      fullWidth
       variant="tertiary"
       onClick={() => {
         connectCallback.callback();

diff --git a/src/widgets/Nav/config.tsx b/src/widgets/Nav/config.tsx
@@ -7,12 +7,17 @@ import WalletConnect from "./icons/WalletConnect";
 export default {
   nav: [
     {
-      label: "Exchange",
-      href: "https://exchange.pancakeswap.finance",
-    },
-    {
-      label: "Liquidity",
-      href: "https://exchange.pancakeswap.finance/#/pool",
+      label: "Trade",
+      items: [
+        {
+          label: "Exchange",
+          href: "https://exchange.pancakeswap.finance",
+        },
+        {
+          label: "Liquidity",
+          href: "https://exchange.pancakeswap.finance/#/pool",
+        },
+      ],
     },
     {
       label: "Farms",
@@ -26,6 +31,10 @@ export default {
       label: "Lottery",
       href: "/lottery",
     },
+    {
+      label: "Info",
+      href: "https://pancakeswap.info",
+    },
   ],
   wallets: {
     metamask: {

diff --git a/src/widgets/Nav/index.tsx b/src/widgets/Nav/index.tsx
@@ -20,7 +20,7 @@ const StyledNav = styled.nav`
 `;
 
 const StyledLink = styled.a`
-  margin-right: 8px;
+  margin-right: 16px;
 `;
 
 const Nav: React.FC<NavProps> = ({