Skip to content

Commit 89ca738

Browse files
folafunmi-dbfolafunmi-db
committed
Added side drawer for mobile view
1 parent d2cca03 commit 89ca738

6 files changed

Lines changed: 234 additions & 21 deletions

File tree

‎debug.log‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
[0101/134724.452:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

‎src/components/NavBar/navbar.js‎

Lines changed: 37 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
/* eslint-disable import/no-extraneous-dependencies */
2-
import React from "react";
2+
import React, { useState } from "react";
33
import { NavLink } from "react-router-dom";
4+
import SideDrawer from "../SideDrawer/SideDrawer";
45
import {
56
NavBg,
67
NavWrapper,
78
Logo,
89
NavLinksList,
910
NavLinkItem,
11+
Hamburger,
12+
Line,
1013
} from "./navbar.style";
1114

1215
export default function NavBar() {
@@ -29,26 +32,39 @@ export default function NavBar() {
2932
},
3033
];
3134

35+
const [openDrawer, setOpenDrawer] = useState(false);
36+
37+
const handleDrawer = () => {
38+
setOpenDrawer(() => !openDrawer);
39+
};
40+
3241
return (
33-
<NavBg>
34-
<NavWrapper>
35-
<Logo>
36-
<NavLink to="/">
37-
<img src={""} alt="" /> D notebook
38-
</NavLink>
39-
</Logo>
40-
<NavLinksList>
41-
{links.map((item, idx) => (
42-
<NavLinkItem key={`NavLink${idx}`}>
43-
{item.link.includes(":") ? (
44-
<a href={item.link}>{item.title}</a>
45-
) : (
46-
<NavLink to={item.link}>{item.title}</NavLink>
47-
)}
48-
</NavLinkItem>
49-
))}
50-
</NavLinksList>
51-
</NavWrapper>
52-
</NavBg>
42+
<>
43+
<NavBg>
44+
<NavWrapper>
45+
<Logo>
46+
<NavLink to="/">
47+
<img src={""} alt="" /> D notebook
48+
</NavLink>
49+
</Logo>
50+
<NavLinksList>
51+
{links.map((item, idx) => (
52+
<NavLinkItem key={`NavLink${idx}`}>
53+
{item.link.includes(":") ? (
54+
<a href={item.link}>{item.title}</a>
55+
) : (
56+
<NavLink to={item.link}>{item.title}</NavLink>
57+
)}
58+
</NavLinkItem>
59+
))}
60+
</NavLinksList>
61+
62+
<Hamburger onClick={handleDrawer} openDrawer={openDrawer}>
63+
<Line />
64+
</Hamburger>
65+
</NavWrapper>
66+
</NavBg>
67+
{openDrawer && <SideDrawer />}
68+
</>
5369
);
5470
}

‎src/components/NavBar/navbar.style.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ export const NavLinksList = styled.nav`
3030
align-items: center;
3131
width: 30rem;
3232
33+
@media only screen and (max-width: 768px) {
34+
display: none;
35+
}
36+
3337
a {
3438
color: #fff;
3539
transition: 0.2s;
@@ -60,3 +64,60 @@ export const Logo = styled.h2`
6064
text-decoration: none;
6165
}
6266
`;
67+
68+
export const Line = styled.div`
69+
background-color: #fff;
70+
width: 1.7rem;
71+
height: 0.2rem;
72+
border-radius: 1rem;
73+
position: relative;
74+
transition: all 0.2s ease-in-out;
75+
76+
&::before,
77+
&::after {
78+
content: "";
79+
position: absolute;
80+
background-color: #fff;
81+
width: 1.7rem;
82+
height: 0.2rem;
83+
border-radius: 1rem;
84+
transition: all 0.2s ease-in-out;
85+
}
86+
87+
&::before {
88+
transform: translateY(-8px);
89+
}
90+
91+
&::after {
92+
transform: translateY(8px);
93+
}
94+
`;
95+
96+
export const Hamburger = styled.div`
97+
transition: 0.2s;
98+
cursor: pointer;
99+
display: flex;
100+
flex-direction: column;
101+
justify-content: space-around;
102+
align-items: center;
103+
height: 1.5rem;
104+
transition: 0.2s;
105+
106+
${({ openDrawer }) =>
107+
openDrawer &&
108+
`
109+
& > div {
110+
background-color: #2e2e2e;
111+
&::before {
112+
transform: translateY(0px) rotate(45deg);
113+
}
114+
&::after {
115+
transform: translateY(0px) rotate(-45deg);
116+
}
117+
}
118+
`}
119+
120+
@media only screen and (min-width: 769px) {
121+
display: none;
122+
}
123+
`;

‎src/components/SideDrawer/SideDrawer.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import React from "react";
3+
import { NavLink } from "react-router-dom";
4+
import {
5+
DrawerBg,
6+
DrawerWrapper,
7+
DrawerLinksList,
8+
DrawerLinkItem,
9+
} from "./SideDrawer.style";
10+
11+
export default function SideDrawer() {
12+
const links = [
13+
{
14+
title: "Getting Started",
15+
link: "/getting-started",
16+
},
17+
{
18+
title: "Demo",
19+
link: "/demo",
20+
},
21+
{
22+
title: "About",
23+
link: "/about",
24+
},
25+
{
26+
title: "Github",
27+
link: "https://github.com/opensource9ja/dnotebook-react",
28+
},
29+
];
30+
31+
return (
32+
<DrawerBg>
33+
<DrawerWrapper>
34+
<DrawerLinksList>
35+
{links.map((item, idx) => (
36+
<DrawerLinkItem key={`NavLink${idx}`}>
37+
{item.link.includes(":") ? (
38+
<a href={item.link}>{item.title}</a>
39+
) : (
40+
<NavLink to={item.link}>{item.title}</NavLink>
41+
)}
42+
</DrawerLinkItem>
43+
))}
44+
</DrawerLinksList>
45+
</DrawerWrapper>
46+
</DrawerBg>
47+
);
48+
}

‎src/components/SideDrawer/SideDrawer.style.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/* eslint-disable import/prefer-default-export */
2+
import styled from "styled-components";
3+
4+
export const DrawerBg = styled.div`
5+
@-webkit-keyframes slide-in-right {
6+
0% {
7+
-webkit-transform: translateX(1000px);
8+
transform: translateX(1000px);
9+
opacity: 0;
10+
}
11+
100% {
12+
-webkit-transform: translateX(0);
13+
transform: translateX(0);
14+
opacity: 1;
15+
}
16+
}
17+
@keyframes slide-in-right {
18+
0% {
19+
-webkit-transform: translateX(1000px);
20+
transform: translateX(1000px);
21+
opacity: 0;
22+
}
23+
100% {
24+
-webkit-transform: translateX(0);
25+
transform: translateX(0);
26+
opacity: 1;
27+
}
28+
}
29+
30+
display: flex;
31+
align-items: center;
32+
justify-content: flex-end;
33+
background: transparent;
34+
width: 100%;
35+
margin: 0;
36+
padding: 0;
37+
height: 100vh;
38+
margin-top: -1.5rem;
39+
position: absolute;
40+
z-index: 99;
41+
-webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
42+
both;
43+
animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
44+
45+
@media only screen and (min-width: 769px) {
46+
display: none;
47+
}
48+
`;
49+
50+
export const DrawerWrapper = styled.div`
51+
width: 40vw;
52+
min-width: 12rem;
53+
background: #2e2e2e;
54+
height: 100vh;
55+
max-width: 250px;
56+
display: flex;
57+
align-items: flex-start;
58+
justify-content: space-between;
59+
`;
60+
61+
export const DrawerLinksList = styled.nav`
62+
display: flex;
63+
list-style: none;
64+
justify-content: space-evenly;
65+
align-items: flex-start;
66+
flex-direction: column;
67+
margin-left: 1rem;
68+
69+
a {
70+
color: #fff;
71+
transition: 0.2s;
72+
&:hover {
73+
color: #ffdf28;
74+
}
75+
}
76+
`;
77+
78+
export const DrawerLinkItem = styled.li`
79+
text-decoration: none;
80+
margin: 1rem;
81+
82+
a {
83+
text-decoration: none;
84+
color: #fff;
85+
}
86+
`;

‎src/components/layout/layout.style.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ export const Layout = styled.div`
55
margin: 0 auto;
66
max-width: 1500px;
77
padding: 0px;
8+
position: relative;
89
`;

0 commit comments

Comments
 (0)