feat: Add top level indicator on nav (#205)

Co-authored-by: andrei <andrei.toev@softwarechain.io>
pancakeswap · Mar 5, 2021 · b008cf9 · b008cf9
1 parent da5c58c
commit b008cf9
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 12 deletions.
diff --git a/src/__tests__/widgets/menu.test.tsx b/src/__tests__/widgets/menu.test.tsx
@@ -273,7 +273,7 @@ it("renders correctly", () => {
                   </svg>
                 </div>
                 <div
-                  class="sc-jrAGrp esAozr"
+                  class="sc-jrAGrp dfDREn"
                 />
               </div>
               <div
@@ -400,7 +400,7 @@ it("renders correctly", () => {
                 class="sc-pFZIQ kJqcph"
               >
                 <div
-                  class="sc-fubCfw bRGoVr rainbow"
+                  class="sc-fubCfw ivOlsg rainbow"
                   role="button"
                 >
                   <svg
@@ -432,7 +432,7 @@ it("renders correctly", () => {
                   </svg>
                 </div>
                 <div
-                  class="sc-jrAGrp gGwZjn"
+                  class="sc-jrAGrp kTLFvn"
                 />
               </div>
               <div
@@ -476,7 +476,7 @@ it("renders correctly", () => {
                   </svg>
                 </div>
                 <div
-                  class="sc-jrAGrp esAozr"
+                  class="sc-jrAGrp dfDREn"
                 />
               </div>
               <div
@@ -515,7 +515,7 @@ it("renders correctly", () => {
                   </svg>
                 </div>
                 <div
-                  class="sc-jrAGrp esAozr"
+                  class="sc-jrAGrp dfDREn"
                 />
               </div>
               <div
@@ -554,7 +554,7 @@ it("renders correctly", () => {
                   </svg>
                 </div>
                 <div
-                  class="sc-jrAGrp esAozr"
+                  class="sc-jrAGrp dfDREn"
                 />
               </div>
             </div>

diff --git a/src/__tests__/widgets/walletModal.test.tsx b/src/__tests__/widgets/walletModal.test.tsx
@@ -335,7 +335,7 @@ it("renders ConnectModal correctly", () => {
             </svg>
           </button>
           <button
-            class="sc-gKsewC hUerIb"
+            class="sc-gKsewC jXrrij"
             id="wallet-connect-binance chain wallet"
             scale="md"
             style="justify-content: space-between;"
@@ -400,6 +400,38 @@ it("renders ConnectModal correctly", () => {
               />
             </svg>
           </button>
+          <button
+            class="sc-gKsewC hUerIb"
+            id="wallet-connect-safepal wallet"
+            scale="md"
+            style="justify-content: space-between;"
+            width="100%"
+          >
+            <div
+              class="sc-bdfBwQ fEwDKZ"
+              color="primary"
+            >
+              SafePal Wallet
+            </div>
+            <svg
+              class="sc-dlfnbm cqTLJf"
+              color="text"
+              viewBox="0 0 96 96"
+              width="32px"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="48"
+                cy="48"
+                fill="#F5F5F5"
+                r="48"
+              />
+              <path
+                d="M56.5504425,41.9387033 L56.5504425,50.4659601 L47.3948342,50.4659601 L47.3948342,85.5971142 L45.0078131,84.7075452 C43.8992633,84.2955753 42.1136272,83.5937969 39.9052997,82.5918134 L38.8675775,82.1177881 L38.8675775,14.6817622 L47.9569067,11.8769231 L56.5504425,14.5267861 L56.5504425,23.7259307 L47.9569067,21.0669705 L47.3948342,21.2411155 L47.3948342,41.9387033 L56.5504425,41.9387033 Z M16,50.4659926 L16,21.7739797 L36.1702794,15.548296 L36.1702794,24.7052039 L24.526282,28.3200122 L24.526282,41.9387358 L36.1702794,41.9387358 L36.1702794,81.3806284 L33.591244,80.0543973 C25.5662786,75.923652 16,68.9585019 16,59.2339983 L16,54.6496962 L24.526282,54.6496962 L24.526282,59.2339983 C24.526282,61.2460878 25.5734263,63.3605199 27.6426978,65.5373324 L27.6426978,50.4659926 L16,50.4659926 Z M59.1389325,15.3302574 L79.8040306,21.7261873 L79.8040306,50.4659601 L67.6710627,50.4659601 L67.6710627,62.9111544 C67.6710627,62.9111544 64.9581695,66.4674811 59.1464051,69.4451657 C59.1464051,67.0682164 59.1389325,15.3302574 59.1389325,15.3302574 Z M71.2780734,41.9387033 L71.2780734,28.2783928 L67.6710627,27.1649695 L67.6710627,41.9387033 L71.2780734,41.9387033 Z M71.2780734,59.8661186 L71.2780734,54.6495662 L79.8040306,54.6495662 L79.8040306,59.8661186 C79.8040306,74.3588162 58.7760221,82.7005566 52.330058,84.9127828 L49.9859233,85.7230769 L49.9859233,76.7068496 L51.1311866,76.2744112 C61.1591444,72.5004032 71.2780734,65.962818 71.2780734,59.8661186 Z"
+                fill="#000000"
+              />
+            </svg>
+          </button>
           <a
             class="sc-bdfBwQ sc-gsTCUz eiaRqE djpNeP sc-crrsfI dwTIxE"
             color="primary"

diff --git a/src/widgets/Menu/components/Accordion.tsx b/src/widgets/Menu/components/Accordion.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode, useState } from "react";
 import styled from "styled-components";
 import { MENU_ENTRY_HEIGHT } from "../config";
-import { MenuEntry, LinkLabel } from "./MenuEntry";
+import { LinkLabel, MenuEntry } from "./MenuEntry";
 import { PushedProps } from "../types";
 import { ArrowDropDownIcon, ArrowDropUpIcon } from "../../../components/Svg";
 
@@ -11,6 +11,7 @@ interface Props extends PushedProps {
   initialOpenState?: boolean;
   className?: string;
   children: ReactNode;
+  isActive?: boolean;
 }
 
 const Container = styled.div`
@@ -26,7 +27,7 @@ const AccordionContent = styled.div<{ isOpen: boolean; isPushed: boolean; maxHei
   overflow: hidden;
   border-color: ${({ isOpen, isPushed }) => (isOpen && isPushed ? "rgba(133, 133, 133, 0.1)" : "transparent")};
   border-style: solid;
-  border-width: 1px;
+  border-width: 1px 0;
 `;
 
 const Accordion: React.FC<Props> = ({
@@ -37,6 +38,7 @@ const Accordion: React.FC<Props> = ({
   initialOpenState = false,
   children,
   className,
+  isActive,
 }) => {
   const [isOpen, setIsOpen] = useState(initialOpenState);
 
@@ -51,7 +53,7 @@ const Accordion: React.FC<Props> = ({
 
   return (
     <Container>
-      <MenuEntry onClick={handleClick} className={className}>
+      <MenuEntry onClick={handleClick} className={className} isActive={isActive}>
         {icon}
         <LinkLabel isPushed={isPushed}>{label}</LinkLabel>
         {isOpen ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}

diff --git a/src/widgets/Menu/components/PanelBody.tsx b/src/widgets/Menu/components/PanelBody.tsx
@@ -48,6 +48,7 @@ const PanelBody: React.FC<Props> = ({ isPushed, pushNav, isMobile, links }) => {
               label={entry.label}
               initialOpenState={initialOpenState}
               className={calloutClass}
+              isActive={entry.items.some((item) => item.href === location.pathname)}
             >
               {isPushed &&
                 entry.items.map((item) => (

diff --git a/src/widgets/Menu/config.ts b/src/widgets/Menu/config.ts
@@ -44,7 +44,7 @@ export const links = [
     items: [
       {
         label: "Leaderboard",
-        href: "/",
+        href: "/teams",
       },
       {
         label: "YourProfile",

diff --git a/src/widgets/Menu/index.stories.tsx b/src/widgets/Menu/index.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import noop from "lodash/noop";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter, MemoryRouter } from "react-router-dom";
 import Flex from "../../components/Box/Flex";
 import Heading from "../../components/Heading/Heading";
 import Text from "../../components/Text/Text";
@@ -211,3 +211,34 @@ export const MenuEntryComponent: React.FC = () => {
     </Flex>
   );
 };
+
+export const WithSubmenuSelected: React.FC = () => {
+  return (
+    <MemoryRouter initialEntries={['/teams']}>
+      <Menu
+        account="0xbdda50183d817c3289f895a4472eb475967dc980"
+        login={noop}
+        logout={noop}
+        isDark={false}
+        toggleTheme={noop}
+        langs={langs}
+        setLang={noop}
+        currentLang="EN"
+        cakePriceUsd={0.23158668932877668}
+        links={links}
+        profile={{
+          username: "pancakeswap",
+          image: "https://pancakeswap.finance/images/nfts/blueberries-preview.png",
+          profileLink: "/profile",
+          noProfileLink: "/no-profile",
+        }}
+      >
+        <div>
+          <Heading as="h1" mb="8px">
+            Submenu leaderboard selected
+          </Heading>
+        </div>
+      </Menu>
+    </MemoryRouter>
+  );
+};