feat(menu): Add config option to control initial accordion open state (…

…#119)
pancakeswap · Jan 8, 2021 · 7242f63 · 7242f63
1 parent a3ba87f
commit 7242f63
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/widgets/Menu/Accordion.tsx b/src/widgets/Menu/Accordion.tsx
@@ -8,6 +8,7 @@ import { ArrowDropDownIcon, ArrowDropUpIcon } from "../../components/Svg";
 interface Props extends PushedProps {
   label: string;
   icon: React.ReactElement;
+  initialOpenState?: boolean;
 }
 
 const Container = styled.div`
@@ -24,8 +25,8 @@ const AccordionContent = styled.div<{ isOpen: boolean; isPushed: boolean; maxHei
   border-top: ${({ isOpen, isPushed }) => (isOpen && isPushed ? "solid 2px rgba(133, 133, 133, 0.1)" : 0)};
 `;
 
-const Accordion: React.FC<Props> = ({ label, icon, isPushed, pushNav, children }) => {
-  const [isOpen, setIsOpen] = useState(false);
+const Accordion: React.FC<Props> = ({ label, icon, isPushed, pushNav, initialOpenState = false, children }) => {
+  const [isOpen, setIsOpen] = useState(initialOpenState);
 
   const handleClick = () => {
     if (isPushed) {

diff --git a/src/widgets/Menu/PanelBody.tsx b/src/widgets/Menu/PanelBody.tsx
@@ -33,7 +33,14 @@ const PanelBody: React.FC<Props> = ({ isPushed, pushNav, isMobile, links }) => {
         const iconElement = <Icon width="24px" mr="8px" />;
         if (entry.items) {
           return (
-            <Accordion key={entry.label} isPushed={isPushed} pushNav={pushNav} icon={iconElement} label={entry.label}>
+            <Accordion
+              key={entry.label}
+              isPushed={isPushed}
+              pushNav={pushNav}
+              icon={iconElement}
+              label={entry.label}
+              initialOpenState={entry.initialOpenState}
+            >
               {isPushed &&
                 entry.items.map((item) => (
                   <MenuEntry key={item.href} secondary isActive={item.href === location.pathname} onClick={handleClick}>

diff --git a/src/widgets/Menu/types.ts b/src/widgets/Menu/types.ts
@@ -25,6 +25,7 @@ export interface MenuEntry {
   icon: string;
   items?: MenuSubEntry[];
   href?: string;
+  initialOpenState?: boolean;
 }
 
 export interface PanelProps {