Skip to content

Commit 99191d2

Browse files
ZibanPirateZibanPirate
authored
Merge pull request #41 from dzcode-io/Navbar
Responsive ,reusable Navbar
2 parents 5479ce4 + 66ee207 commit 99191d2

File tree

4 files changed

+214
-38
lines changed

4 files changed

+214
-38
lines changed

‎frontend/src/apps/main/components/navbar/index.tsx‎

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,45 @@
1-
import React from "react";
2-
import "./style";
3-
import { Link } from "react-router-dom";
1+
import React, { useState } from "react";
2+
import "./style.scss";
3+
import { Link, NavLink } from "react-router-dom";
44

5-
export const Navbar = () => (
6-
<div className="navbar">
7-
<div className="menu">
8-
<div className="item">
9-
<Link to="/">Logo</Link>
10-
</div>
11-
<div className="item">
12-
<Link to="/Learn">Learn</Link>
13-
</div>
14-
<div className="item">
15-
<Link to="/Learn/Getting_Started">Get Started</Link>
16-
</div>
17-
<div className="item">
18-
<Link to="/Learn/Git_Basics/Git_and_Github">Git and Github</Link>
5+
interface NavigationLink {
6+
id: number;
7+
name: string;
8+
to: string;
9+
}
10+
11+
interface Props {
12+
navitems: NavigationLink[];
13+
}
14+
15+
export const Navbar: React.FC<Props> = ({ navitems }) => {
16+
const [isOpen, setOpen] = useState("open");
17+
const navToggle = () => {
18+
isOpen === "" ? setOpen("open") : setOpen("");
19+
};
20+
21+
return (
22+
<nav className="Navbar">
23+
<Link className="brand" to="/">
24+
Dzcode.io
25+
</Link>
26+
<div className="Navbar__burger" onClick={navToggle}>
27+
<div className="burger__button" />
1928
</div>
20-
<div className="item">
21-
<Link to="/Articles">Articles</Link>
29+
<div className={`Navbar__list ${isOpen}`}>
30+
{navitems.map((navitem: NavigationLink) => {
31+
return (
32+
<NavLink
33+
className="navLink"
34+
activeClassName="Navbar__link--active"
35+
key={navitem.id}
36+
to={navitem.to}
37+
>
38+
{navitem.name}
39+
</NavLink>
40+
);
41+
})}
2242
</div>
23-
</div>
24-
</div>
25-
);
43+
</nav>
44+
);
45+
};

‎frontend/src/apps/main/components/navbar/style.scss‎

Lines changed: 137 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,146 @@
11
@import "../../../../common/style/variables";
22

3-
.navbar {
4-
height: $navbar-height;
3+
.Navbar {
4+
width: 100%;
5+
padding: 2% 10%;
6+
display: flex;
7+
flex-direction: row;
8+
justify-content: space-between;
9+
align-items: center;
510
position: relative;
6-
background-color: $light;
7-
.menu {
8-
.item {
11+
background-color: $bg-primary;
12+
font-family: "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
13+
"Helvetica Neue", sans-serif;
14+
15+
position: fixed;
16+
top: 0;
17+
right: 0;
18+
.brand {
19+
font-size: 1.2rem;
20+
color: text-primary;
21+
font-weight: bolder;
22+
display: flex;
23+
align-items: center;
24+
justify-content: flex-start;
25+
padding: 15px 0;
26+
text-decoration: none;
27+
font-weight: bold;
28+
color: $text-primary;
29+
}
30+
31+
.Navbar__burger {
32+
width: 35px;
33+
height: 35px;
34+
position: relative;
35+
display: flex;
36+
align-items: center;
37+
justify-content: center;
38+
39+
.burger__button {
40+
width: 100%;
41+
height: 3px;
42+
position: absolute;
43+
top: 50%;
44+
right: 0;
45+
background-color: $bg-secondary;
46+
z-index: 5;
47+
48+
&::before {
49+
content: "";
50+
width: 100%;
51+
height: 3px;
52+
background-color: $bg-secondary;
53+
position: absolute;
54+
top: -10px;
55+
right: 0;
56+
}
57+
58+
&::after {
59+
content: "";
60+
width: 100%;
61+
height: 3px;
62+
background-color: $bg-secondary;
63+
position: absolute;
64+
top: 10px;
65+
right: 0;
66+
}
67+
}
68+
}
69+
70+
.Navbar__list {
71+
position: absolute;
72+
right: 0;
73+
width: 100%;
74+
top: 100%;
75+
background-color: #fff;
76+
77+
display: flex;
78+
flex-direction: column;
79+
justify-content: center;
80+
align-items: center;
81+
padding: 5px;
82+
transform: scaleY(0);
83+
transform-origin: top;
84+
transition: ease 0.3s;
85+
opacity: 0;
86+
87+
&.open {
88+
transform: scaleY(1);
89+
transition: ease-in-out 0.5s;
90+
opacity: 1;
91+
}
92+
93+
.navLink {
94+
text-decoration: none;
95+
color: $text-primary;
96+
max-width: 150px;
997
text-align: center;
10-
display: inline-block;
11-
width: 20%;
98+
padding: 12px;
1299
position: relative;
13-
height: $navbar-height;
14-
> * {
100+
font-size: 1rem;
101+
font-weight: 500;
102+
103+
&::after {
104+
content: "";
15105
position: absolute;
16-
top: 50%;
17-
transform: translateY(-50%);
106+
top: 100%;
107+
left: 20%;
108+
width: 0;
109+
height: 1px;
110+
background-color: $bg-secondary;
111+
transform: center;
112+
transition: ease-in-out 0.4s;
113+
}
114+
115+
&:hover {
116+
&::after {
117+
width: 60%;
118+
}
119+
}
120+
}
121+
}
122+
}
123+
124+
@media screen and (min-width: $large) {
125+
.Navbar {
126+
width: 100%;
127+
padding: 10px 5%;
128+
129+
.brand {
130+
font-size: 1.4rem;
131+
}
132+
133+
.Navbar__burger {
134+
display: none;
135+
}
136+
.Navbar__list {
137+
position: initial;
138+
flex-direction: row;
139+
max-width: 60%;
140+
141+
.navLink {
142+
margin-left: 40px;
143+
font-size: 1.25rem;
18144
}
19145
}
20146
}

‎frontend/src/apps/main/entry/index.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,19 @@ const Landing = lazy(() => import("t9/apps/main/scenes/landing"));
1212
const Articles = lazy(() => import("t9/apps/main/scenes/articles"));
1313
const Learn = lazy(() => import("t9/apps/main/scenes/learn"));
1414

15+
// Temp data: Todo: replace with props from the store
16+
17+
const navitems = [
18+
{ id: 1, to: "/learn", name: "Learn" },
19+
{ id: 2, to: "/getstarted", name: "Get Started" },
20+
{ id: 3, to: "/gitgithub", name: "Git & Github" },
21+
{ id: 4, to: "/articles", name: "Articles" },
22+
];
23+
1524
export const App: React.SFC<{}> = () => {
1625
return (
1726
<BrowserRouter>
18-
<Navbar />
27+
<Navbar navitems={navitems} />
1928
<Suspense fallback={Loading}>
2029
<Switch>
2130
<Route path="/" exact={true} component={Landing} />

‎frontend/src/common/style/_variables.scss‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,38 @@
1-
// TODO: update color palette
2-
// colors
1+
// Colors
32
$primary: #1c8ad8;
43
$secondary: #dc004e;
54
$dark: #000;
65
$light: #fff;
76
$link: #1890ff;
87

9-
// TODO: update responsiveness range
10-
// responsiveness
8+
$text-primary: #000000;
9+
$text-secondary: #ffffff;
10+
$bg-primary: #ffffff;
11+
$bg-secondary: #000000;
12+
13+
// MediaQueries
14+
$X-large: 1600px;
15+
$large: 1200px;
1116
$regular: 800px;
1217
$medium: 600px;
1318
$small: 420px;
1419
$x-small: 330px;
1520

1621
// others
1722
$navbar-height: 60px;
23+
24+
// Fonts
25+
$font-primary: Helvetica, Arial, sans-serif;
26+
27+
// animation
28+
$transition-speed: 600ms;
29+
30+
// resets
31+
32+
* {
33+
box-sizing: border-box;
34+
}
35+
36+
html {
37+
font-size: 16px;
38+
}

0 commit comments

Comments
 (0)