sectionRender in Challenge component

src/components/elements/MobileChallengeMenu.js

@@ -1,9 +1,39 @@
 import React from "react";
+import {FlexRow} from "../../utils/containers";
+import styled from "styled-components";
+import {Medium} from "../../utils/fonts";
 
-const MobileChallengeMenu = () => {
+const MenuOption = styled(Medium)`
+  cursor: pointer;
+  transition: color 0.3s ease-in-out;
+
+  &:hover {
+    color: ${({theme}) => theme.colors.green};
+  }
+`;
+
+const MobileChallengeMenu = (props) => {
     return (
         <>
-
+            <FlexRow gap='32px'>
+                <MenuOption as='button' to='/' onClick={() => props.setSection(0)}>
+                    Leaderboard
+                </MenuOption>
+                <MenuOption as='button' to='/' onClick={() => props.setSection(1)}>
+                    Readme
+                </MenuOption>
+                <MenuOption as='button' to='/' onClick={() => props.setSection(2)}>
+                    How to
+                </MenuOption>
+            </FlexRow>
+            <FlexRow gap='36px'>
+                <MenuOption as='button' to='/' onClick={() => props.setSection(4)}>
+                    My entries
+                </MenuOption>
+                <MenuOption as='button' to='/' onClick={() => props.setSection(3)}>
+                    Submit
+                </MenuOption>
+            </FlexRow>
         </>
     );
 }

src/components/sections/HowTo.js

@@ -0,0 +1,15 @@
+import React from "react";
+import {FlexColumn} from "../../utils/containers";
+import {H2} from "../../utils/fonts";
+
+const HowTo = () => {
+    return (
+        <FlexColumn padding='24px'>
+            <H2>
+                How to
+            </H2>
+        </FlexColumn>
+    );
+}
+
+export default HowTo;

src/components/sections/Leaderboard.js

@@ -0,0 +1,15 @@
+import React from "react";
+import {FlexColumn} from "../../utils/containers";
+import {H2} from "../../utils/fonts";
+
+const Leaderboard = () => {
+    return (
+        <FlexColumn padding='24px'>
+            <H2>
+                Leaderboard
+            </H2>
+        </FlexColumn>
+    );
+}
+
+export default Leaderboard;

src/components/sections/MyEntries.js

@@ -0,0 +1,15 @@
+import React from "react";
+import {FlexColumn} from "../../utils/containers";
+import {H2} from "../../utils/fonts";
+
+const MyEntries = () => {
+    return (
+        <FlexColumn padding='24px'>
+            <H2>
+                My entries
+            </H2>
+        </FlexColumn>
+    );
+}
+
+export default MyEntries;

src/components/sections/Readme.js

@@ -0,0 +1,15 @@
+import React from "react";
+import {FlexColumn} from "../../utils/containers";
+import {H2} from "../../utils/fonts";
+
+const Readme = () => {
+    return (
+        <FlexColumn padding='24px'>
+            <H2>
+                Readme
+            </H2>
+        </FlexColumn>
+    );
+}
+
+export default Readme;

src/components/sections/Submit.js

@@ -0,0 +1,15 @@
+import React from "react";
+import {FlexColumn} from "../../utils/containers";
+import {H2} from "../../utils/fonts";
+
+const Submit = () => {
+    return (
+        <FlexColumn padding='24px'>
+            <H2>
+                Submit
+            </H2>
+        </FlexColumn>
+    );
+}
+
+export default Submit;

src/pages/Challenge.js

@@ -1,24 +1,24 @@
 import React from "react";
 import {Container, FlexColumn, FlexRow} from "../utils/containers";
-import {Link, useParams} from "react-router-dom";
+import {useParams} from "react-router-dom";
-import {H1, Medium} from "../utils/fonts";
+import {H1} from "../utils/fonts";
 import getChallenges from "../api/getChallenges";
 import theme from "../utils/theme";
-import styled from "styled-components";
+import MobileChallengeMenu from "../components/elements/MobileChallengeMenu";
-
+import Leaderboard from "../components/sections/Leaderboard";
-const ChallengeLink = styled(Medium)`
+import Readme from "../components/sections/Readme";
-  cursor: pointer;
+import HowTo from "../components/sections/HowTo";
-  transition: color 0.3s ease-in-out;
+import MyEntries from "../components/sections/MyEntries";
-
+import Submit from "../components/sections/Submit";
-  &:hover {
-    color: ${({theme}) => theme.colors.green};
-  }
-`;
-
 
 const Challenge = () => {
     const challengeName = useParams().challengeId;
     const [challenges, setChallenges] = React.useState([]);
+    const [section, setSection] = React.useState([0]);
+
+    React.useEffect(() => {
+        getChallenges(setChallenges);
+    }, []);
 
     const getChallenge = () => {
         if (challenges.length !== 0) {
@@ -30,35 +30,31 @@ const Challenge = () => {
         return '';
     }
 
-    React.useEffect(() => {
+    const sectionRender = () => {
-        getChallenges(setChallenges);
+        switch (section) {
-    }, []);
+            case 0:
+                return <Leaderboard/>
+            case 1:
+                return <Readme/>
+            case 2:
+                return <HowTo/>
+            case 3:
+                return <MyEntries/>
+            case 4:
+                return <Submit/>
+            default:
+                return <Leaderboard/>
+        }
+    }
 
     return (
         <FlexColumn minHeight='100vh' gap='12px' alignmentY='flex-start' padding='66px 0 0 0'>
             <H1 margin='0 0 8px 0'>
                 {getChallenge().title}
             </H1>
-            <FlexRow gap='32px'>
+            <MobileChallengeMenu setSection={setSection}/>
-                <ChallengeLink as={Link} to='/'>
-                    Leaderboard
-                </ChallengeLink>
-                <ChallengeLink as={Link} to='/'>
-                    Readme
-                </ChallengeLink>
-                <ChallengeLink as={Link} to='/'>
-                    How to
-                </ChallengeLink>
-            </FlexRow>
-            <FlexRow gap='32px'>
-                <ChallengeLink as={Link} to='/'>
-                    Submit
-                </ChallengeLink>
-                <ChallengeLink as={Link} to='/'>
-                    My entries
-                </ChallengeLink>
-            </FlexRow>
             <Container width='75%' height='1px' backgroundColor={theme.colors.dark}/>
+            {sectionRender()}
         </FlexColumn>
     );
 }