add responsive navbar

erlisakulla · Apr 18, 2021 · 5411add · 5411add
1 parent 0011ccd
commit 5411add
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -6,11 +6,11 @@
 
 ## TODO
 - [ ] Update CV
-- [ ] Fix responsive issues: ui ux skills icons, projects and about padding
+- [ ] Fix responsive issues: projects and about padding
 - [ ] Add more colors from the color theme
 - [ ] Colorful navs on hover
 - [X] Make the website content responsive
-- [ ] Make navbar responsive
+- [X] Make navbar responsive
 - [ ] Illustrations for sections
 - [ ] Background designs
 - [ ] Activate navbar links when scrolled at them
@@ -23,6 +23,8 @@
 - [ ] Illustration hover animations
 - [ ] Create logo animation when page is loaded 
 - [ ] Add sticky social media icons to the side
+- [ ] Add close icon to responsive navbar
+- [ ] Add dark mode option
 
 ## Styles
 * Fonts: Poppins, IBM Plex Serif

diff --git a/src/App.js b/src/App.js
@@ -6,13 +6,6 @@ import Footer from './components/Footer/Footer';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'antd/dist/antd.css';
 
-/*
-
-TODO
-Fix router problem for deployment
-
-*/
-
 function App() {
   return (
     <>

diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
@@ -7,10 +7,6 @@
   font-weight: 300;
 }
 
-/* #nav {
-  transform: translateY(30px);
-} */
-
 .nav-link:after {
   display:block;
   content: '';
@@ -44,4 +40,93 @@
   #nav {
     display: none;
   }
+
+  #collapsed-navbar {
+    display: block !important;
+  }
+}
+
+#collapsed-navbar {
+  display: none;
+}
+
+.wrapper{
+  position: fixed;
+  z-index: 150;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: white;
+  clip-path: circle(25px at calc(100% - 45px) 45px);
+  transition: all 0.3s ease-in-out;
+}
+
+#active:checked ~ .wrapper{
+  clip-path: circle(75%);
+}
+
+.menu-btn{
+  position: fixed;
+  z-index: 200;
+  right: 20px;
+  top: 20px;
+  height: 50px;
+  width: 50px;
+  text-align: center;
+  line-height: 50px;
+  border-radius: 50%;
+  font-size: 20px;
+  color: black;
+  cursor: pointer;
+  background: white;
+  transition: all 0.3s ease-in-out;
+}
+
+#active:checked ~ .menu-btn{
+  background: #fff;
+}
+
+#active:checked ~ .menu-btn i:before{
+  content: "\f00d";
+}
+
+.wrapper ul{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  list-style: none;
+  text-align: center;
+}
+
+.wrapper ul li{
+  margin: 15px 0;
+}
+
+.wrapper ul li a{
+  text-decoration: none;
+  font-size: 20px;
+  font-weight: 400;
+  color: black;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.wrapper ul li a:hover{
+  color: #4158d0;
+}
+
+input[type="checkbox"]{
+  display: none;
+}
+
+#collapsed-navbar .nav-link {
+  margin: 0;
+  padding: 0 !important;
+  height: auto;
+}
+
+.wrapper ul {
+  padding: 0;
 }
diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
@@ -1,11 +1,15 @@
 import React from 'react';
 import './Navbar.css';
-import { FiDownload } from 'react-icons/fi';
+import { FiDownload, FiMenu } from 'react-icons/fi';
 import { Button } from 'antd';
 import { Nav } from 'react-bootstrap';
 import Resume from '../../resume/ErlisaKullaCV.pdf';
 
-function Navbar(props) {
+function Navbar() {
+  const closeNav = () => {
+    document.getElementById("active").checked = false;
+  } 
+
   return (
     <>
       <div id="navbar">
@@ -54,6 +58,68 @@ function Navbar(props) {
           </Nav.Item>
         </Nav>
       </div>
+
+      <div id="collapsed-navbar">
+        <input type="checkbox" id="active"/>
+        <label htmlFor="active" className="menu-btn">
+          <FiMenu style={{marginRight:'5px'}}/>
+        </label>
+
+        <div className="wrapper">
+          <ul>
+            <li>
+              <Nav.Item>
+                <Nav.Link href="#skills" onClick={() => closeNav()}>
+                  Skills
+                </Nav.Link>
+              </Nav.Item>
+            </li>
+
+            <li>
+              <Nav.Item>
+                <Nav.Link href="#about"  onClick={() => closeNav()}>
+                  About
+                </Nav.Link>
+              </Nav.Item>
+            </li>
+
+            <li>
+              <Nav.Item>
+                <Nav.Link href="#projects"  onClick={() => closeNav()}>
+                  Projects
+                </Nav.Link>
+              </Nav.Item>
+            </li>
+
+            <li>
+              <Nav.Item>
+                <Nav.Link href="#contact" id="contact-link" onClick={() => closeNav()}>
+                  Contact
+                </Nav.Link>
+              </Nav.Item>
+            </li>
+
+            <li>
+              <Nav.Link 
+                href={Resume} 
+                target="_blank" 
+                rel="noreferrer noopener" 
+                style={{marginRight:'0px'}}
+                onClick={() => closeNav()}
+              >
+                <Button 
+                  type="secondary" 
+                  shape="round" 
+                  icon={<FiDownload style={{marginRight:'5px'}}/>} 
+                  size="default"
+                >
+                  Resume
+                </Button>
+              </Nav.Link>
+            </li>
+          </ul>
+        </div>
+      </div>
     </>
   );
 }

diff --git a/src/main/Home/HomePage.css b/src/main/Home/HomePage.css
@@ -120,7 +120,6 @@
 }
 
 #projects {
-  /* padding-bottom: 100px; */
   padding-left: 20%;
   padding-right: 20%;
   padding-top: 0px;
@@ -172,11 +171,6 @@ h3 {
   100% {opacity:1;}
 }
 
-#ui-ux-skills {
-  padding-left: 10px;
-  padding-right: 30px;
-}
-
 .ant-progress-bg {
   animation: expand 1.5s;;
 }
@@ -191,8 +185,8 @@ h3 {
 }
 
 .skills-progress {
-  padding-right: 30px;
-  padding-left: 30px;
+  padding-right: 15px;
+  padding-left: 15px;
 }
 
 .MuiGrid-spacing-xs-5 > .MuiGrid-item {