Skip to content

Commit 82ff166

Browse files
AceTheCreatorAceTheCreator
authored
Merge pull request #1 from opensource9ja/main
Updating branch
2 parents 5e59dd9 + ab9a09a commit 82ff166

File tree

11 files changed

+346
-4
lines changed

11 files changed

+346
-4
lines changed

‎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)

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
]
4646
},
4747
"devDependencies": {
48+
"eslint-config-airbnb-base": "^14.2.1",
4849
"eslint-config-prettier": "^7.0.0",
4950
"eslint-plugin-import": "^2.22.1",
5051
"eslint-plugin-jsx-a11y": "^6.4.1",

‎src/App.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Cell from "./Cell";
55
import { reducer } from "./reducer";
66
import { makeGlobal, downLoad_notebook, load_notebook } from "./utils";
77
import Layout from "./components/layout/layout";
8+
import NavBar from "./components/NavBar/navbar";
89

910
const defaultState = {
1011
cells: [{ id: "cell_1", input: "", output: "", type: "code" }],
@@ -17,6 +18,7 @@ function App() {
1718

1819
return (
1920
<Layout>
21+
<NavBar />
2022
<button
2123
onClick={() => {
2224
downLoad_notebook(state);

‎src/Cell.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,6 @@ function TextCell({ refText }) {
180180
}
181181

182182
TextCell.propTypes = {
183-
refText: PropTypes.element,
183+
refText: PropTypes.object,
184184
id: PropTypes.string,
185185
};

‎src/components/NavBar/navbar.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import React, { useState } from "react";
3+
import { NavLink } from "react-router-dom";
4+
import SideDrawer from "../SideDrawer/SideDrawer";
5+
import {
6+
NavBg,
7+
NavWrapper,
8+
Logo,
9+
NavLinksList,
10+
NavLinkItem,
11+
Hamburger,
12+
Line,
13+
} from "./navbar.style";
14+
15+
export default function NavBar() {
16+
const links = [
17+
{
18+
title: "Getting Started",
19+
link: "/getting-started",
20+
},
21+
{
22+
title: "Demo",
23+
link: "/demo",
24+
},
25+
{
26+
title: "About",
27+
link: "/about",
28+
},
29+
{
30+
title: "Github",
31+
link: "https://github.com/opensource9ja/dnotebook-react",
32+
},
33+
];
34+
35+
const [openDrawer, setOpenDrawer] = useState(false);
36+
37+
const handleDrawer = () => {
38+
setOpenDrawer(() => !openDrawer);
39+
};
40+
41+
return (
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+
</>
69+
);
70+
}

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

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/* eslint-disable import/prefer-default-export */
2+
import styled from "styled-components";
3+
4+
export const NavBg = styled.div`
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
background: #2e2e2e;
9+
width: initial;
10+
box-shadow: 0px 2px 1px #ffdf28;
11+
margin: 0;
12+
margin-bottom: 1.5rem;
13+
padding: 1rem;
14+
height: max-content;
15+
`;
16+
17+
export const NavWrapper = styled.div`
18+
width: 100%;
19+
max-width: 1400px;
20+
display: flex;
21+
align-items: center;
22+
justify-content: space-between;
23+
flex-wrap: wrap;
24+
`;
25+
26+
export const NavLinksList = styled.nav`
27+
display: flex;
28+
list-style: none;
29+
justify-content: space-evenly;
30+
align-items: center;
31+
width: 30rem;
32+
33+
@media only screen and (max-width: 768px) {
34+
display: none;
35+
}
36+
37+
a {
38+
color: #fff;
39+
transition: 0.2s;
40+
&:hover {
41+
color: #ffdf28;
42+
}
43+
}
44+
`;
45+
46+
export const NavLinkItem = styled.li`
47+
text-decoration: none;
48+
49+
a {
50+
text-decoration: none;
51+
color: #fff;
52+
}
53+
`;
54+
55+
export const Logo = styled.h2`
56+
width: fit-content;
57+
padding: 0;
58+
margin: 0;
59+
60+
a {
61+
color: #fff;
62+
font-size: 1.3rem;
63+
font-weight: 700;
64+
text-decoration: none;
65+
}
66+
`;
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
`;

‎src/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from "react";
22
import ReactDOM from "react-dom";
33
import "./index.css";
4+
import { BrowserRouter as Router } from "react-router-dom";
45
import App from "./App";
56

67
ReactDOM.render(
7-
<React.StrictMode>
8+
<Router>
89
<App />
9-
</React.StrictMode>,
10+
</Router>,
1011
document.getElementById("root")
1112
);

0 commit comments

Comments
 (0)