Skip to content

Commit 407b6f1

Browse files
kmiqbal19kmiqbal19
committed
added hamburger menu
1 parent 8b501c3 commit 407b6f1

File tree

8 files changed

+191
-65
lines changed

8 files changed

+191
-65
lines changed

‎package-lock.json

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"node-sass": "^7.0.1",
1414
"react": "^18.2.0",
1515
"react-dom": "^18.2.0",
16+
"react-icons": "^4.4.0",
1617
"react-locomotive-scroll": "^0.2.0",
1718
"react-redux": "^8.0.2",
1819
"react-router-dom": "^6.3.0",

‎src/App.js

+2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { LocomotiveScrollProvider } from "react-locomotive-scroll";
77
import "locomotive-scroll/dist/locomotive-scroll.css";
88
import { AnimatePresence } from "framer-motion";
99
import Home from "./sections/Home";
10+
import Projects from "./sections/Projects";
1011
function App() {
1112
const containerRef = useRef(null);
1213
return (
@@ -36,6 +37,7 @@ function App() {
3637
<AnimatePresence>
3738
<main className="App" data-scroll-container ref={containerRef}>
3839
<Home />
40+
<Projects />
3941
</main>
4042
</AnimatePresence>
4143
</LocomotiveScrollProvider>

‎src/components/Navbar.jsx

-63
This file was deleted.

‎src/components/Navbar/Navbar.jsx

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import React, { useState } from "react";
2+
import styled from "styled-components";
3+
import { motion } from "framer-motion";
4+
import "./Navbar.scss";
5+
const Nav = styled(motion.nav)`
6+
width: 100%;
7+
height: ${(props) => props.theme.navHeight};
8+
border: 1px solid red;
9+
display: flex;
10+
justify-content: space-between;
11+
align-items: center;
12+
`;
13+
const LogoContainer = styled.div`
14+
width: 200px;
15+
height: 100%;
16+
img {
17+
width: 100%;
18+
height: 100%;
19+
object-fit: contain;
20+
}
21+
`;
22+
const ListContainer = styled.ul`
23+
flex: 1;
24+
border: 1px solid green;
25+
display: flex;
26+
justify-content: flex-end;
27+
align-items: center;
28+
height: 100%;
29+
@media screen and (max-width: 900px) {
30+
display: none;
31+
}
32+
`;
33+
const List = styled.a`
34+
margin: 0 2rem;
35+
list-style: none;
36+
font-size: ${(props) => props.theme.fontxl};
37+
transition: all 0.3s ease;
38+
&:hover {
39+
transform: translateY(-10%);
40+
}
41+
&:last-child {
42+
margin-right: calc(4rem + 2vw);
43+
}
44+
`;
45+
const HamburgerContainer = styled.div`
46+
width: 70px;
47+
height: 70px;
48+
display: flex;
49+
align-items: center;
50+
justify-content: center;
51+
flex-direction: column;
52+
padding: 0rem 1rem;
53+
margin-right: 2rem;
54+
cursor: pointer;
55+
/* position: relative; */
56+
@media screen and (min-width: 901px) {
57+
display: none;
58+
}
59+
&:hover {
60+
div.line-1 {
61+
transform: translateX(-50%);
62+
width: 50%;
63+
}
64+
div.line-2 {
65+
width: 80%;
66+
}
67+
div.line-3 {
68+
width: 50%;
69+
transform: translateX(50%);
70+
}
71+
}
72+
`;
73+
const MobileMenu = styled(motion.ul)`
74+
position: fixed;
75+
width: 100%;
76+
height: 100%;
77+
top: 0;
78+
right: 0;
79+
bottom: 0;
80+
left: 0;
81+
background-color: blue;
82+
z-index: 3;
83+
display: flex;
84+
flex-direction: column;
85+
`;
86+
const Cross = styled.div`
87+
width: 60px;
88+
height: 60px;
89+
90+
position: relative;
91+
align-self: flex-end;
92+
cursor: pointer;
93+
&:hover {
94+
div.cross-line-1 {
95+
transform: rotateZ(0deg);
96+
}
97+
div.cross-line-2 {
98+
transform: rotateZ(0deg);
99+
}
100+
}
101+
`;
102+
// NAVBAR COMPONENT
103+
function Navbar() {
104+
const [clicked, setClicked] = useState(false);
105+
return (
106+
<>
107+
<Nav
108+
initial={{ y: "-100%" }}
109+
animate={{ y: "0%" }}
110+
transition={{ delay: 0.5, ease: "backOut", duration: 1 }}
111+
>
112+
<LogoContainer>
113+
<img src="https://i.ibb.co/ZHFdJhW/city.png" alt="logo" />
114+
</LogoContainer>
115+
<ListContainer>
116+
<List href="#projects">projects</List>
117+
<List href="#skills">skills</List>
118+
<List href="#about">about me</List>
119+
</ListContainer>
120+
<HamburgerContainer onClick={() => setClicked(true)}>
121+
<div className="line line-1"></div>
122+
<div className="line line-2"></div>
123+
<div className="line line-3"></div>
124+
</HamburgerContainer>
125+
</Nav>
126+
{clicked && (
127+
<MobileMenu>
128+
<Cross onClick={() => setClicked(false)}>
129+
<div className="cross-line cross-line-1"></div>
130+
<div className="cross-line cross-line-2"></div>
131+
</Cross>
132+
</MobileMenu>
133+
)}
134+
</>
135+
);
136+
}
137+
138+
export default Navbar;

‎src/components/Navbar/Navbar.scss

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
div.line {
2+
background-color: red;
3+
margin: 0.4rem 0rem;
4+
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
5+
}
6+
div.line-1 {
7+
width: 40%;
8+
height: 3px;
9+
align-self: flex-end;
10+
}
11+
div.line-2 {
12+
width: 60%;
13+
height: 5px;
14+
}
15+
div.line-3 {
16+
width: 40%;
17+
height: 3px;
18+
align-self: flex-start;
19+
}
20+
div.cross-line {
21+
width: 80%;
22+
height: 3px;
23+
background-color: white;
24+
position: absolute;
25+
transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
26+
}
27+
div.cross-line-1 {
28+
transform: rotateZ(40deg);
29+
top: 45%;
30+
left: 8%;
31+
}
32+
div.cross-line-2 {
33+
transform: rotateZ(-41deg);
34+
top: 47%;
35+
left: 8%;
36+
}

‎src/sections/Home.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from "react";
2-
import Navbar from "../components/Navbar";
2+
import Navbar from "../components/Navbar/Navbar.jsx";
33
import styled from "styled-components";
44
const HomeContainer = styled.div`
55
width: 100vw;
6-
height: 200vh;
6+
height: 100vh;
77
border: 2px solid black;
88
`;
99
function Home() {

‎src/sections/Projects.jsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from "react";
2+
3+
function Projects() {
4+
return <div style={{ height: "100vh" }}>Projects</div>;
5+
}
6+
7+
export default Projects;

0 commit comments

Comments
 (0)