will start working on the sidebar menu

cvillanueva84 · AntonioSalazar · Jul 18, 2021 · Jul 18, 2021 · Jul 19, 2021 · Jul 19, 2021
commit e07d92832b2f6b4b780921dcc3a325764fbb0ea6
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -31,7 +31,12 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
       rel="stylesheet"
     />
-    <title>React App</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+
+    <title>YouTube clone App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/Navbar/Navbar.component.jsx b/src/components/Navbar/Navbar.component.jsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 
-import { GiHamburgerMenu } from 'react-icons/gi';
 import { FaUserCircle } from 'react-icons/fa';
 
 import './Navbar.styles.scss';
 import styled from 'styled-components';
+import { Link } from 'react-router-dom';
 
 const Header = styled.header`
   background-color: aqua;
@@ -29,19 +29,36 @@ const SearchInput = styled.input`
   }
 `;
 
+const HamburgerIcon = styled.i`
+  font-size: 3rem;
+  margin: 0 2rem;
+  cursor: pointer;
+`;
+
 const Navbar = () => {
+  const [navigation, setNavigation] = useState(false);
+
   const showNavbar = () => {
-    console.log('button has been clicked!!');
+    setNavigation(!navigation);
   };
 
   return (
     <Header>
-      <div className="navbar">
+      <nav className="navbar">
         <div className="navbar__left-section">
-          {/* icon  */}
-          <Button onClick={showNavbar}>
-            <GiHamburgerMenu size="2em" />
-          </Button>
+          {/* sidebar */}
+          {/* <input type="checkbox" id="check" />
+          <label htmlFor="check">
+            <i className="fa fa-bars" id="btn"></i>
+            <i className="fa fa-close" id="close"></i>
+          </label>
+          <div className="sidebar">
+            <Link to="/">
+              <i className="fa fa-home"></i>Home
+            </Link>
+          </div> */}
+          <HamburgerIcon className="fa fa-bars" id="btn"></HamburgerIcon>
+
           {/* inpu */}
           <SearchInput type="text" placeholder="Search a video..." />
         </div>
@@ -50,7 +67,7 @@ const Navbar = () => {
             <FaUserCircle size="2.5em" />
           </Button>
         </div>
-      </div>
+      </nav>
     </Header>
   );
 };

diff --git a/src/components/Navbar/Navbar.styles.scss b/src/components/Navbar/Navbar.styles.scss
@@ -17,3 +17,59 @@
     padding: 5px;
   }
 }
+
+// #check {
+//   display: none;
+// }
+
+// label #btn,
+// label #close {
+//   font-size: 3rem;
+//   position: absolute;
+//   cursor: pointer;
+// }
+
+// label #btn {
+//   left: 3rem;
+//   top: 30px;
+//   color: #fff;
+//   transition: all 0.3s ease;
+// }
+
+// #close {
+//   z-index: 1111;
+//   left: -195px;
+//   transition: all 0.3s ease;
+// }
+
+// .sidebar {
+//   position: fixed;
+//   left: -250px;
+//   width: 250px;
+//   height: 100%;
+//   background: #202a3c;
+//   color: #fff;
+//   transition: all 0.3s ease;
+// }
+
+// #check:checked ~ .sidebar {
+//   left: 0;
+// }
+
+// #check:checked ~ label #btn {
+//   left: 250px;
+// }
+
+@media only screen and (max-width: 900px) {
+  .navbar {
+    &__left-section {
+      & input {
+        width: 80%;
+      }
+    }
+
+    &__right-section {
+      display: none;
+    }
+  }
+}
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
@@ -34,6 +34,9 @@ $bp-smallest: 31.25em; // 500px / 16px
 html {
   box-sizing: border-box;
   font-size: 62.5%;
+  @media only screen and(max-width: $bp-large) {
+    font-size: 50%;
+  }
 }
 
 body {