Skip to content

Commit dbb0132

Browse files
elangosundarelangosundar
authored
Merge branch 'master' into master
2 parents d5d1516 + 426a5c6 commit dbb0132

File tree

7 files changed

+353
-98
lines changed

7 files changed

+353
-98
lines changed

‎Contributors.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,4 +66,5 @@ When you modified the template you need to add them to the spaces between the "|
6666
3. [Fadhil Nur Mahardi](https://github.com/fadhilnurmahardi)
6767
4. [D'jay](https://github.com/Djay1407)
6868
5. [Heni Hendaoui](https://github.com/hendaoui)
69+
6. [jamal](https://github.com/jamaluddinfikri)
6970

‎logo/logo-circle.png‎

14.8 KB
Loading

‎logo/logo.png‎

3.35 KB
Loading

‎logo/logo.svg‎

Lines changed: 200 additions & 0 deletions
Loading

‎src/Components/Navigation.js‎

Lines changed: 53 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,59 @@
1-
import React from 'react';
1+
import React from "react";
22
import { Link } from 'react-router-dom';
33

4-
const Navigation = () => (
5-
<div className="main thememain-header">
6-
<div className="container">
7-
<nav className="navbar navbar-expand-lg navbar-light bg-light thememain-header">
8-
<Link to="/"><a className="navbar-brand" href="#" title="10secondsofcode">10secondsofcode</a></Link>
9-
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
10-
<span className="navbar-toggler-icon" />
11-
</button>
4+
const Navigation = () => {
5+
const [currentmode, changeState] = React.useState("Light Mode");
6+
const DocBody = document.getElementById("Apptheme");
7+
const changemode = () => {
8+
currentmode === "Light Mode"
9+
? ((DocBody.className = "thememain-dark"), changeState("Dark Mode"))
10+
: ((DocBody.className = "thememain-white "), changeState("Light Mode"));
11+
};
12+
return (
13+
<div className="main thememain-header">
14+
<div className="container">
15+
<nav className="navbar navbar-expand-lg navbar-light bg-light thememain-header">
16+
<Link to="/"><a className="navbar-brand" href="#" title="10secondsofcode">10secondsofcode</a></Link>
17+
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
18+
<span className="navbar-toggler-icon" />
19+
</button>
1220

13-
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
14-
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
15-
<li className="nav-item active">
16-
<Link to="/">
17-
<a className="nav-link" href="#" title="10secondsofcode">
18-
Home
19-
<span className="sr-only">(current)</span>
20-
</a>
21-
</Link>
22-
</li>
23-
<li className="nav-item">
24-
<a className="nav-link" href="#" title="ReactJs Tutorial">ReactJs</a>
25-
</li>
26-
<li className="nav-item">
27-
<a className="nav-link disabled" href="#" title="Javascript Tutorial">Javascript</a>
28-
</li>
29-
</ul>
30-
<form className="form-inline my-2 my-lg-0">
31-
<input className="form-control mr-sm-2" type="search" placeholder="Search" />
32-
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
33-
</form>
34-
<Link to="/login">
35-
<button className="btn btn-login ml-2">Login</button>
36-
</Link>
37-
</div>
38-
</nav>
21+
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
22+
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
23+
<li className="nav-item active">
24+
<Link to="/">
25+
<a className="nav-link" href="#" title="10secondsofcode">
26+
Home
27+
<span className="sr-only">(current)</span>
28+
</a>
29+
</Link>
30+
</li>
31+
<li className="nav-item">
32+
<a className="nav-link" href="#" title="ReactJs Tutorial">ReactJs</a>
33+
</li>
34+
<li className="nav-item">
35+
<a className="nav-link disabled" href="#" title="Javascript Tutorial">Javascript</a>
36+
</li>
37+
</ul>
38+
<form className="form-inline my-2 my-lg-0">
39+
<input className="form-control mr-sm-2" type="search" placeholder="Search" />
40+
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
41+
</form>
42+
<Link to="/login">
43+
<button className="btn btn-login ml-2">Login</button>
44+
</Link>
45+
</div>
46+
</nav>
47+
</div>
48+
<button
49+
className="btn btn-outline-success btn-sm d-block h-75 mr-3"
50+
type="button"
51+
onClick={() => changemode()}
52+
>
53+
Switch to {currentmode}
54+
</button>
3955
</div>
40-
</div>
41-
);
56+
);
57+
};
4258

4359
export default Navigation;

‎src/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<link rel="manifest" href="./public/manifest.json">
1515
<link rel="shortcut icon" href="./public/favicon.ico">
1616
</head>
17-
<body>
17+
<body id="Apptheme" class="thememain-white">
1818
<div id="app">
1919
</div>
2020
<script>
@@ -33,4 +33,4 @@
3333
}
3434
</script>
3535
</body>
36-
</html>
36+
</html>

0 commit comments

Comments
 (0)