feat(menu): Menu accordion remains open on click (#126)

pancakeswap · Jan 13, 2021 · c33ca14 · c33ca14
1 parent 45a05fb
commit c33ca14
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 12 deletions.
diff --git a/src/__tests__/widgets/menu.test.tsx b/src/__tests__/widgets/menu.test.tsx
@@ -266,7 +266,7 @@ it("renders correctly", () => {
                   </svg>
                 </div>
                 <div
-                  class="sc-pFZIQ koGTgq"
+                  class="sc-pFZIQ jDRdjj"
                 />
               </div>
               <div
@@ -430,15 +430,15 @@ it("renders correctly", () => {
                   </svg>
                 </div>
                 <div
-                  class="sc-pFZIQ koGTgq"
+                  class="sc-pFZIQ jDRdjj"
                 />
               </div>
               <div
-                class="sc-gKsewC IktNk"
-                role="button"
+                class="sc-fubCfw ieMlxO"
               >
-                <a
-                  href="/ifo"
+                <div
+                  class="sc-gKsewC IktNk"
+                  role="button"
                 >
                   <svg
                     class="sc-gsTCUz gHIbtN"
@@ -456,7 +456,21 @@ it("renders correctly", () => {
                   >
                     IFO
                   </div>
-                </a>
+                  <svg
+                    class="sc-gsTCUz lixgFL"
+                    color="text"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M8.71005 11.71L11.3001 14.3C11.6901 14.69 12.3201 14.69 12.7101 14.3L15.3001 11.71C15.9301 11.08 15.4801 10 14.5901 10H9.41005C8.52005 10 8.08005 11.08 8.71005 11.71Z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="sc-pFZIQ jDRdjj"
+                />
               </div>
               <div
                 class="sc-fubCfw ieMlxO"
@@ -494,7 +508,7 @@ it("renders correctly", () => {
                   </svg>
                 </div>
                 <div
-                  class="sc-pFZIQ koGTgq"
+                  class="sc-pFZIQ jDRdjj"
                 />
               </div>
             </div>

diff --git a/src/widgets/Menu/Accordion.tsx b/src/widgets/Menu/Accordion.tsx
@@ -22,7 +22,9 @@ const AccordionContent = styled.div<{ isOpen: boolean; isPushed: boolean; maxHei
   max-height: ${({ isOpen, maxHeight }) => (isOpen ? `${maxHeight}px` : 0)};
   transition: max-height 0.3s ease-out;
   overflow: hidden;
-  border-top: ${({ isOpen, isPushed }) => (isOpen && isPushed ? "solid 2px rgba(133, 133, 133, 0.1)" : 0)};
+  border-color: ${({ isOpen, isPushed }) => (isOpen && isPushed ? "rgba(133, 133, 133, 0.1)" : "transparent")};
+  border-style: solid;
+  border-width: 1px;
 `;
 
 const Accordion: React.FC<Props> = ({ label, icon, isPushed, pushNav, initialOpenState = false, children }) => {
@@ -38,8 +40,8 @@ const Accordion: React.FC<Props> = ({ label, icon, isPushed, pushNav, initialOpe
   };
 
   return (
-    <Container onClick={handleClick}>
-      <MenuEntry>
+    <Container>
+      <MenuEntry onClick={handleClick}>
         {icon}
         <LinkLabel isPushed={isPushed}>{label}</LinkLabel>
         {isOpen ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}

diff --git a/src/widgets/Menu/config.ts b/src/widgets/Menu/config.ts
@@ -63,7 +63,16 @@ export const links = [
   {
     label: "IFO",
     icon: "IfoIcon",
-    href: "/ifo",
+    items: [
+      {
+        label: "Next",
+        href: "/ifo",
+      },
+      {
+        label: "History",
+        href: "/ifo/history",
+      },
+    ],
   },
   {
     label: "More",