-
Notifications
You must be signed in to change notification settings - Fork 0
/
navBar.html
105 lines (83 loc) · 3.24 KB
/
navBar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!--
Welcome to the "Navigation bar" code. What I mean by this if you want to inherit the navigation bar to your webpage. Thanks to JQuery - A library of Javascript.
Taken from Stackoverflow: "https://stackoverflow.com/a/42333464/11646278"
This is what helped me. My navigation bar is in the body tag. Entire code for navigation bar is in navBar.html file (without any html or body tag, only the code for navigation bar). In the target page, this goes in the head tag:
Author: Tanu Nanda Prabhu
-->
<div class="container red topBotomBordersOut">
<!-- Navigation bar code -->
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner" id="navbar">
<div class="container">
<!-- This is for the 3 horizontal lines for responsive -->
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand" >Tanu</a>
</div>
<!-- Navigation bar options code -->
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="index.html" title="Home"><i class="fas"></i> Home</a>
</li>
<li>
<a href="publications.html" title="Publications"><i class="fas"></i> Publications</a>
</li>
<li>
<a href = "academics.html" title="Academics"><i class="fas"></i> Academics</a>
</li>
<li>
<a href = "project.html" title="Projects"><i class="fa fa-keyboard-o"></i> Projects</a>
</li>
<li>
<a href="gallery.html" title="Photography"><i class="fas"></i> Photography</a>
</li>
<li>
<!-- Dark Mode Icon -->
<a title="DarkMode"><i id="dark-mode-btn" class="toggler far fa-moon"></i> </a>
</li>
</ul>
</nav>
</div>
</header>
</div>
<!-- This is the javascript code for the slider of dark mode -->
<script>
function myFunction()
{
var element = document.body;
element.classList.toggle("dark-mode");
}
var app = document.getElementsByTagName("BODY")[0];
if (localStorage.lightMode == "dark")
{
app.setAttribute("data-light-mode", "dark");
}
function toggle_light_mode()
{
var app = document.getElementsByTagName("BODY")[0];
if (localStorage.lightMode == "dark")
{
localStorage.lightMode = "light";
app.setAttribute("data-light-mode", "light");
}
else
{
localStorage.lightMode = "dark";
app.setAttribute("data-light-mode", "dark");
}
console.log("lightMode = " + localStorage.lightMode);
}
document.getElementById('dark-mode-btn').addEventListener('click', function (e)
{
const toggler = document.body;
toggler.classList.toggle('dark-mode');
const target = e.target;
target.classList.toggle('fa-moon');
target.classList.toggle('fa-sun');
});
</script>