Merge pull request #35 from Kronicom/develop

added dark mode to sidebar

Author: smakosh

src/assets/icons/sun.svg

@@ -1,12 +1,18 @@
-import React from 'react';
+import React, {useContext} from 'react';
+import { ThemeContext } from 'providers/ThemeProvider';
 import { Wrapper, Bar } from './styles';
 
-const Hamburger = ({ sidebar, toggle }) => (
-  <Wrapper sidebar={sidebar} onClick={() => toggle(!sidebar)}>
-    <Bar top sidebar={sidebar} />
-    <Bar mid sidebar={sidebar} />
-    <Bar bottom sidebar={sidebar} />
-  </Wrapper>
-);
+const Hamburger = ({ sidebar, toggle }) => {
+
+  const { theme } = useContext(ThemeContext);
+  
+  return (
+    <Wrapper sidebar={sidebar} onClick={() => toggle(!sidebar)}>
+      <Bar top sidebar={sidebar} theme={theme}/>
+      <Bar mid sidebar={sidebar} theme={theme} />
+      <Bar bottom sidebar={sidebar} theme={theme} />
+    </Wrapper>
+  )
+};
 
 export default Hamburger;

src/components/theme/Header/Hamburger/index.jsx

@@ -44,24 +44,27 @@ export const Bar = styled.div`
 		width: 1.6rem;
 	}
 
-	${({ top, sidebar }) =>
+	${({ top, sidebar, theme }) =>
     top &&
     sidebar &&
-    `
+		`
+		background-color: ${(theme === 'light' ? '#212121' : '#fff')};
 		transform: translateY(8px) rotate(-135deg);
+		
 	`}
 
 	${({ mid, sidebar }) =>
     mid &&
     sidebar &&
-    `
-			transform: scale(0);
-	`}
+		`
+		transform: scale(0);
+		`}
 
-	${({ bottom, sidebar }) =>
+	${({ bottom, sidebar, theme }) =>
     bottom &&
     sidebar &&
-    `
+		`
+			background-color: ${(theme === 'light' ? '#212121' : '#fff')};
 			transform: translateY(-6px) rotate(-45deg);
 	`}
 `;

src/components/theme/Header/Hamburger/styles.js

@@ -1,15 +1,21 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import AnchorLink from 'react-anchor-link-smooth-scroll';
+import { ThemeContext } from 'providers/ThemeProvider';
 import ToggleTheme from 'components/theme/Header/ToggleTheme';
 import { Wrapper } from './styles';
 
-const NavbarLinks = ({ desktop }) => (
-  <Wrapper desktop={desktop}>
-    <AnchorLink href="#about">About</AnchorLink>
-    <AnchorLink href="#projects">Projects</AnchorLink>
-    <AnchorLink href="#contact">Contact</AnchorLink>
-    <ToggleTheme />
-  </Wrapper>
-);
+const NavbarLinks = ({ desktop }) => {
+  const { theme } = useContext(ThemeContext);
+
+  return (
+    <Wrapper desktop={desktop} theme={theme}>
+      <AnchorLink href="#about">About</AnchorLink>
+      <AnchorLink href="#projects">Projects</AnchorLink>
+      <AnchorLink href="#contact">Contact</AnchorLink>
+      <ToggleTheme />
+    </Wrapper>
+  )
+
+};
 
 export default NavbarLinks;

src/components/theme/Header/NavbarLinks/index.jsx

@@ -4,6 +4,10 @@ export const Wrapper = styled.div`
   a {
     color: #000;
     text-decoration: none;
+
+		@media (max-width: 960px) {
+			color: ${({ theme }) => (theme === 'light' ? '#000' : '#fff')};
+		}
   }
 
   ${({ desktop }) =>

src/components/theme/Header/NavbarLinks/styles.js

@@ -1,11 +1,16 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { ThemeContext } from 'providers/ThemeProvider';
 import NavbarLinks from '../NavbarLinks';
 import { Wrapper } from './styles';
 
-const Sidebar = ({ sidebar, toggle }) => (
-  <Wrapper active={sidebar} onClick={toggle}>
+const Sidebar = ({ sidebar, toggle }) => {
+  const { theme } = useContext(ThemeContext);
+  
+  return (
+  <Wrapper active={sidebar} onClick={toggle} theme={theme}>
     <NavbarLinks />
   </Wrapper>
-);
+  )
+};
 
 export default Sidebar;

src/components/theme/Header/Sidebar/index.jsx

@@ -9,7 +9,7 @@ export const Wrapper = styled.div`
   width: 0;
   opacity: 0;
   height: 100%;
-  background-color: #fff;
+  background-color: ${({ theme }) => (theme === 'light' ? '#fff' : '#212121')};
   transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
 
   ${({ active }) =>