Skip to content

Commit 158519d

Browse files
pradeepravi-csepradeepravi-cse
authored
Update Navigation.js
Dark Mode Toggle and App Theme switch added
1 parent a05c0d1 commit 158519d

File tree

1 file changed

+75
-32
lines changed

1 file changed

+75
-32
lines changed

‎src/Components/Navigation.js‎

Lines changed: 75 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,80 @@
1-
import React from 'react';
1+
import React from "react";
22

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

12-
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
13-
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
14-
<li className="nav-item active">
15-
<a className="nav-link" href="#" title="10secondsofcode">
16-
Home
17-
<span className="sr-only">(current)</span>
18-
</a>
19-
</li>
20-
<li className="nav-item">
21-
<a className="nav-link" href="#" title="ReactJs Tutorial">ReactJs</a>
22-
</li>
23-
<li className="nav-item">
24-
<a className="nav-link disabled" href="#" title="Javascript Tutorial">Javascript</a>
25-
</li>
26-
</ul>
27-
<form className="form-inline my-2 my-lg-0">
28-
<input className="form-control mr-sm-2" type="search" placeholder="Search" />
29-
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
30-
</form>
31-
</div>
32-
</nav>
30+
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
31+
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
32+
<li className="nav-item active">
33+
<a className="nav-link" href="#" title="10secondsofcode">
34+
Home
35+
<span className="sr-only">(current)</span>
36+
</a>
37+
</li>
38+
<li className="nav-item">
39+
<a className="nav-link" href="#" title="ReactJs Tutorial">
40+
ReactJs
41+
</a>
42+
</li>
43+
<li className="nav-item">
44+
<a
45+
className="nav-link disabled"
46+
href="#"
47+
title="Javascript Tutorial"
48+
>
49+
Javascript
50+
</a>
51+
</li>
52+
</ul>
53+
<form className="form-inline my-2 my-lg-0">
54+
<input
55+
className="form-control mr-sm-2"
56+
type="search"
57+
placeholder="Search"
58+
/>
59+
<button
60+
className="btn btn-outline-success my-2 my-sm-0"
61+
type="submit"
62+
>
63+
Search
64+
</button>
65+
</form>
66+
</div>
67+
</nav>
68+
</div>
69+
<button
70+
className="btn btn-outline-success btn-sm d-block h-75 mr-3"
71+
type="button"
72+
onClick={() => changemode()}
73+
>
74+
Switch to {currentmode}
75+
</button>
3376
</div>
34-
</div>
35-
);
77+
);
78+
};
3679

3780
export default Navigation;

0 commit comments

Comments
 (0)