Merge pull request #14 from fac20/sidebar

Sidebar

src/components/Sidebar/Sidebar.jsx

@@ -1,23 +1,45 @@
 import React from 'react';
-import './sidebar.css';
 import logOut from '../../utils/logOut';
-import styled from 'styled-components';
+import {
+  Anchor,
+  CloseButton,
+  LogoutButton,
+  Nav,
+  OpenButton,
+  UL,
+} from './Sidebar.style';
 
 const Sidebar = () => {
-  const [sidebarWidth, setSidebarWidth] = React.useState('20vw');
+  const [sidebarWidth, setSidebarWidth] = React.useState('13rem');
   const collapse = () => setSidebarWidth('0');
+  const unfurl = () => setSidebarWidth('13rem');
   return (
-    <nav style={{ width: sidebarWidth }}>
-      <a href="# " className="closebtn" onClick={collapse}>
-        &times;
-      </a>
-      <a href="/">Home</a>
-      <a href="/lessons">Lessons</a>
-      <a href="/resources">Resources</a>
-      <a href="/calendar">Calendar</a>
-      <a href="/links">Useful Links</a>
-      <LogoutButton onClick={logOut}>Logout</LogoutButton>
-    </nav>
+    <>
+      <OpenButton onClick={unfurl}>&equiv;</OpenButton>
+      <Nav style={{ width: sidebarWidth }}>
+        <CloseButton onClick={collapse}>&times;</CloseButton>
+        <UL>
+          <li>
+            <Anchor href="/">Home</Anchor>
+          </li>
+          <li>
+            <Anchor href="/lessons">Lessons</Anchor>
+          </li>
+          <li>
+            <Anchor href="/resources">Resources</Anchor>
+          </li>
+          <li>
+            <Anchor href="/calendar">Calendar</Anchor>
+          </li>
+          <li>
+            <Anchor href="/links">Useful Links</Anchor>
+          </li>
+          <li>
+            <LogoutButton onClick={logOut}>Logout</LogoutButton>
+          </li>
+        </UL>
+      </Nav>
+    </>
   );
 };
 
@@ -31,33 +53,3 @@ const Sidebar = () => {
 //   };
 
 export default Sidebar;
-
-const LogoutButton = styled.button`
-  font-family: 'Montserrat', sans-serif;
-  background-color: #fff;
-  border: none;
-  box-shadow: 4px 4px 0 hsl(0, 0%, 50.588235294117645%);
-  max-width: 120px;
-  cursor: pointer;
-  padding: 10px;
-  margin: 2rem;
-  border-radius: 4px;
-  font-size: 15px;
-  font-weight: 900;
-  &:hover {
-    background: hsl(208, 99%, 69%);
-  }
-`;
-
-// const Nav = styled.nav`
-//   height: 100%; /* 100% Full-height */
-//   width: 0; /* 0 width - change this with JavaScript */
-//   position: fixed; /* Stay in place */
-//   z-index: 1; /* Stay on top */
-//   top: 0;
-//   left: 0;
-//   background-color: #111; /* Black*/
-//   overflow-x: hidden; /* Disable horizontal scroll */
-//   padding-top: 60px; /* Place content 60px from the top */
-//   transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
-// `;

src/components/Sidebar/Sidebar.style.jsx

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+
+export const LogoutButton = styled.button`
+  background-color: #fff;
+  border-radius: 10%;
+  border: none;
+  box-shadow: 4px 4px 0 hsl(0, 0%, 50.6%);
+  cursor: pointer;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 1em;
+  font-weight: 1000;
+  margin: 1rem 0;
+  max-width: 10rem;
+  padding: 0.5rem 1rem;
+  &:hover {
+    background: hsl(208, 99%, 69%);
+  }
+`;
+
+export const Nav = styled.nav`
+  background-color: #111; /* Black*/
+  height: 100%; /* 100% Full-height */
+  left: 0;
+  overflow-x: hidden; /* Disable horizontal scroll */
+  padding-top: 4rem; /* Place content 60px from the top */
+  position: fixed; /* Stay in place */
+  top: 0;
+  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
+  width: 0; /* 0 width - change this with JavaScript */
+  z-index: 1; /* Stay on top */
+`;
+
+/* Position and style the close button (top right corner) */
+export const CloseButton = styled.button`
+  background-color: transparent;
+  border: none;
+  color: hsl(0, 0%, 50.6%);
+  font-size: 3rem;
+  position: absolute;
+  right: 1rem;
+  top: 0;
+`;
+
+export const OpenButton = styled(CloseButton)`
+  color: hsl(0, 0%, 20%);
+  left: 1rem;
+`;
+
+/* The sidebar links */
+export const Anchor = styled.a`
+  color: hsl(0, 0%, 50.6%);
+  display: block;
+  font-size: 1.5em;
+  padding: 0.5rem 0;
+  text-decoration: none;
+  transition: 0.3s;
+  /* When you mouse over the navigation links, change their color */
+  &:hover {
+    color: #f1f1f1;
+  }
+`;
+
+export const UL = styled.ul`
+  list-style-type: none;
+  margin: auto;
+`;
+
+// @media screen and (max-height: 450px) {
+//   nav {
+//     padding-top: 15px;
+//   }
+//   nav a {
+//     font-size: 18px;
+//   }
+// }