From 02c4a287853c00b686c10e367cad2a171d29811b Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Fri, 15 Jul 2022 13:45:51 +0200
Subject: [PATCH] DesktopChallengeMenu component

---
 .../elements/DesktopChallengeMenu.js          | 46 +++++++++++++++++--
 .../elements/FiltersMenu/FiltersMenu.js       |  5 +-
 src/components/sections/HowTo.js              |  4 +-
 src/components/sections/Leaderboard.js        |  4 +-
 .../{elements => sections}/MiniChallenge.js   |  2 +-
 src/components/sections/MyEntries.js          |  4 +-
 src/components/sections/Readme.js             |  4 +-
 src/components/sections/Submit.js             |  4 +-
 src/pages/Challanges/_renderChallenges.js     |  2 +-
 src/pages/Challenge.js                        | 17 +++----
 src/utils/theme.js                            |  4 +-
 11 files changed, 65 insertions(+), 31 deletions(-)
 rename src/components/{elements => sections}/MiniChallenge.js (97%)

diff --git a/src/components/elements/DesktopChallengeMenu.js b/src/components/elements/DesktopChallengeMenu.js
index d52c382..0573ccf 100644
--- a/src/components/elements/DesktopChallengeMenu.js
+++ b/src/components/elements/DesktopChallengeMenu.js
@@ -1,10 +1,48 @@
 import React from "react";
+import styled from "styled-components";
+import {FlexColumn} from "../../utils/containers";
+import {H3} from "../../utils/fonts";
 
-const DesktopChallengeMenu = () => {
+const DesktopChallengeMenuStyle = styled(FlexColumn)`
+  justify-content: flex-start;
+  position: fixed;
+  left: 0;
+  overflow-y: auto;
+  width: 310px;
+  height: 100vh;
+  top: 50px;
+  padding: 64px 0 0 0;
+  z-index: 2;
+  gap: 32px;
+  box-shadow: ${({theme}) => theme.shadowRight};
+`;
+
+const Option = styled(FlexColumn)`
+  height: 48px;
+  width: 100%;
+  transition: background-color 0.3s ease-in-out;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({theme}) => theme.colors.green};
+  }
+`;
+
+const DesktopChallengeMenu = (props) => {
+    const options = ['Leaderboard', 'Readme', 'How to', 'My entries', 'Submit'];
     return (
-        <>
-
-        </>
+        <DesktopChallengeMenuStyle>
+            {options.map((option, index) => {
+                return (
+                    <Option key={`challenge_menu_option-${index}`} as='button'
+                            onClick={() => props.setSection(index)}>
+                        <H3 textTransform='uppercase'>
+                            {option}
+                        </H3>
+                    </Option>
+                )
+            })}
+        </DesktopChallengeMenuStyle>
     );
 }
 
diff --git a/src/components/elements/FiltersMenu/FiltersMenu.js b/src/components/elements/FiltersMenu/FiltersMenu.js
index e281de5..434bea6 100644
--- a/src/components/elements/FiltersMenu/FiltersMenu.js
+++ b/src/components/elements/FiltersMenu/FiltersMenu.js
@@ -17,7 +17,7 @@ const FiltersMenuStyle = styled(FlexColumn)`
   max-height: 650px;
   justify-content: flex-start;
   padding: 14px 16px 14px 24px;
-  box-shadow: ${({theme}) => theme.filtersShadowLeft};
+  box-shadow: ${({theme}) => theme.shadowLeft};
   background-color: ${({theme}) => theme.colors.white};
   transition: transform 0.5s ease-in-out;
   z-index: 3;
@@ -32,8 +32,7 @@ const FiltersMenuStyle = styled(FlexColumn)`
     top: 50px;
     right: auto;
     left: 0;
-    height: 100vh;
-    box-shadow: ${({theme}) => theme.filtersShadowRight};
+    box-shadow: ${({theme}) => theme.shadowRight};
     padding: 32px 32px 64px;
   }
 `;
diff --git a/src/components/sections/HowTo.js b/src/components/sections/HowTo.js
index e3552e6..730cbed 100644
--- a/src/components/sections/HowTo.js
+++ b/src/components/sections/HowTo.js
@@ -4,8 +4,8 @@ import {H2} from "../../utils/fonts";
 
 const HowTo = () => {
     return (
-        <FlexColumn padding='24px'>
-            <H2>
+        <FlexColumn padding='24px' as='section'>
+            <H2 as='h2'>
                 How to
             </H2>
         </FlexColumn>
diff --git a/src/components/sections/Leaderboard.js b/src/components/sections/Leaderboard.js
index b9c14e0..4548310 100644
--- a/src/components/sections/Leaderboard.js
+++ b/src/components/sections/Leaderboard.js
@@ -4,8 +4,8 @@ import {H2} from "../../utils/fonts";
 
 const Leaderboard = () => {
     return (
-        <FlexColumn padding='24px'>
-            <H2>
+        <FlexColumn padding='24px' as='section'>
+            <H2 as='h2'>
                 Leaderboard
             </H2>
         </FlexColumn>
diff --git a/src/components/elements/MiniChallenge.js b/src/components/sections/MiniChallenge.js
similarity index 97%
rename from src/components/elements/MiniChallenge.js
rename to src/components/sections/MiniChallenge.js
index e8bb93e..1e5a898 100644
--- a/src/components/elements/MiniChallenge.js
+++ b/src/components/sections/MiniChallenge.js
@@ -2,7 +2,7 @@ import React from "react";
 import {Container, FlexColumn, FlexRow, Grid} from "../../utils/containers";
 import {Body, H3} from "../../utils/fonts";
 import styled from "styled-components";
-import IconLabel from "./IconLabel";
+import IconLabel from "../elements/IconLabel";
 import {Link} from "react-router-dom";
 import {CHALLENGE_PAGE, MINI_DESCRIPTION_RENDER} from "../../utils/globals";
 import theme from "../../utils/theme";
diff --git a/src/components/sections/MyEntries.js b/src/components/sections/MyEntries.js
index 5fa9875..5adb683 100644
--- a/src/components/sections/MyEntries.js
+++ b/src/components/sections/MyEntries.js
@@ -4,8 +4,8 @@ import {H2} from "../../utils/fonts";
 
 const MyEntries = () => {
     return (
-        <FlexColumn padding='24px'>
-            <H2>
+        <FlexColumn padding='24px' as='section'>
+            <H2 as='h2'>
                 My entries
             </H2>
         </FlexColumn>
diff --git a/src/components/sections/Readme.js b/src/components/sections/Readme.js
index 8bcfa19..9d50ed9 100644
--- a/src/components/sections/Readme.js
+++ b/src/components/sections/Readme.js
@@ -4,8 +4,8 @@ import {H2} from "../../utils/fonts";
 
 const Readme = () => {
     return (
-        <FlexColumn padding='24px'>
-            <H2>
+        <FlexColumn padding='24px' as='section'>
+            <H2 as='h2'>
                 Readme
             </H2>
         </FlexColumn>
diff --git a/src/components/sections/Submit.js b/src/components/sections/Submit.js
index 2adc2c5..9d01e0b 100644
--- a/src/components/sections/Submit.js
+++ b/src/components/sections/Submit.js
@@ -4,8 +4,8 @@ import {H2} from "../../utils/fonts";
 
 const Submit = () => {
     return (
-        <FlexColumn padding='24px'>
-            <H2>
+        <FlexColumn padding='24px' as='section'>
+            <H2 as='h2'>
                 Submit
             </H2>
         </FlexColumn>
diff --git a/src/pages/Challanges/_renderChallenges.js b/src/pages/Challanges/_renderChallenges.js
index dec2275..ba9801a 100644
--- a/src/pages/Challanges/_renderChallenges.js
+++ b/src/pages/Challanges/_renderChallenges.js
@@ -1,5 +1,5 @@
 import {ELEMENTS_PER_PAGE} from "../../utils/globals";
-import MiniChallenge from "../../components/elements/MiniChallenge";
+import MiniChallenge from "../../components/sections/MiniChallenge";
 import {Grid} from "../../utils/containers";
 import styled from "styled-components";
 
diff --git a/src/pages/Challenge.js b/src/pages/Challenge.js
index 0f70e7d..3b13375 100644
--- a/src/pages/Challenge.js
+++ b/src/pages/Challenge.js
@@ -67,24 +67,21 @@ const Challenge = () => {
     const desktopRender = () => {
         return (
             <>
-                <DesktopChallengeMenu/>
+                <DesktopChallengeMenu setSection={setSection}/>
                 <FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 0 64px 310px'>
-                    <FlexRow gap='32px' margin='0 0 32px 0'>
-                        <FlexColumn alignmentX='flex-start' gap='24px' maxWidth='628px'>
-                            <H1>
+                    <FlexRow gap='32px' margin='0 0 32px 0' padding='16px'>
+                        <FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>
+                            <H1 as='h1'>
                                 {getChallenge().title}
                             </H1>
-                            <Medium>
+                            <Medium as='p'>
                                 {MINI_DESCRIPTION_RENDER(getChallenge().description)}
                             </Medium>
                         </FlexColumn>
                         <Svg src={getChallenge().type ? RENDER_ICO(getChallenge().type) : textIco}
-                             width='120px'
-                             height='120px'
-                             size='cover'/>
+                             width='120px' height='120px' size='contain'/>
                     </FlexRow>
-
-                    <Container width='55%' minWidth='600px' height='1px' backgroundColor={theme.colors.dark}/>
+                    <Container width='55%' height='1px' backgroundColor={theme.colors.dark}/>
                     {sectionRender()}
                 </FlexColumn>
             </>
diff --git a/src/utils/theme.js b/src/utils/theme.js
index 2e7662c..957e03d 100644
--- a/src/utils/theme.js
+++ b/src/utils/theme.js
@@ -8,8 +8,8 @@ const theme = {
     shadow: '1px 2px 4px rgba(52, 52, 52, 0.25)',
     navShadow: '0 1px 2px rgba(52, 52, 52, 0.25)',
     buttonShadow: '0 4px 4px rgba(52, 52, 52, 0.25)',
-    filtersShadowLeft: '-4px 4px 4px rgba(52, 52, 52, 0.25)',
-    filtersShadowRight: '2px 2px 4px rgba(52, 52, 52, 0.25)'
+    shadowLeft: '-4px 4px 4px rgba(52, 52, 52, 0.25)',
+    shadowRight: '2px 2px 4px rgba(52, 52, 52, 0.25)'
 };
 
 export default theme;
\ No newline at end of file