-
Notifications
You must be signed in to change notification settings - Fork 4
/
navbar.js
150 lines (147 loc) · 5.05 KB
/
navbar.js
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
function generateNavbar() {
// Flag to track if the menu is open or closed
let isMenuOpen = false;
// Function to handle the toggle button click event
const handleToggleClick = () => {
isMenuOpen = !isMenuOpen; // Toggle the menu state
const menuCollapseElement = document.getElementById(
"bs-example-navbar-collapse-1"
);
if (isMenuOpen) {
menuCollapseElement.classList.add("in"); // Add the "in" class to show the menu
} else {
menuCollapseElement.classList.remove("in"); // Remove the "in" class to hide the menu
}
};
return `
<nav
role="navigation"
id="mainNav"
class="navbar navbar-default navbar-fixed-top"
aria-label="Main Menu"
>
<div class="wrapper">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button
class="navbar-toggle collapsed"
type="button"
data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"
aria-haspopup="true"
onClick="handleToggleClick()"
>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1>
<a class="navbar-brand page-scroll" href="index.html">Helping Hands</a>
</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div
id="bs-example-navbar-collapse-1"
class="collapse navbar-collapse"
role="menubar"
>
<ul class="nav navbar-nav navbar-right">
<li>
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="subnav-menu">
<a
href="#"
class="collapsible menu__link"
role="button"
aria-haspopup="true"
aria-expanded="false"
>About ▼</a
>
<ul class="nav subnav">
<li class="subnav-link">
<a class="nav-link" href="team.html">Our Team</a>
</li>
<li class="subnav-link">
<a class="nav-link" class="page-scroll" href="news.html"
>In the News</a
>
</li>
</ul>
</li>
<li class="subnav-menu">
<a
href="#"
class="collapsible menu__link"
aria-haspopup="true"
aria-expanded="false"
role="button"
>Resources ▼</a
>
<ul class="nav subnav submenu">
<li class="subnav-link">
<a class="nav-link" href="volunteer-opportunities.html"
>Volunteer Opportunities</a
>
</li>
<li class="subnav-link">
<a class="nav-link" href="covid19.html">Covid Response</a>
</li>
<li class="subnav-link">
<a
class="nav-link"
class="page-scroll"
href="covid19.html#anti-black_racism_guidebook"
>Anti-Black Racism Guidebook</a
>
</li>
</ul>
</li>
<li class="subnav-menu">
<a
href="#"
class="collapsible menu__link"
aria-haspopup="true"
role="button"
aria-expanded="false"
>Get Involved ▼</a
>
<ul class="nav subnav">
<li class="subnav-link">
<a class="nav-link" href="jointeam.html">Join the Team</a>
</li>
<li class="subnav-link">
<a class="nav-link" href="donate.html">Donate</a>
</li>
<li class="subnav-link">
<a class="nav-link" href="lendahandsurvey.html">Lend a Hand Survey</a>
</li>
<li class="subnav-link">
<a class="nav-link" href="youth-leading-the-way.html">Youth Leading the Way</a>
</li>
<li class="subnav-link">
<a class="nav-link" href="change-makers-micro-grants.html">Change Makers Micro-grants</a>
</li>
</ul>
</li>
<li>
<a class="nav-link" href="workshops.html">Workshops</a>
</li>
<li>
<a href="./blog">Blog</a>
</li>
<li>
<a class="page-scroll" href="contactus.html">Contact Us</a>
</li>
<li class="nav-button">
<a class="btn btn-seconday btn-sm" href="index.html#help">
How can we help?
</a>
</li>
</ul>
</div>
</div>
</nav>
`;
}