Skip to content

Commit 0ac3a30

Browse files
snigdha-kansalsnigdha-kansal
authored
fix: remove duplicate links from navbar (#766)
1 parent b26f0b1 commit 0ac3a30

File tree

1 file changed

+50
-146
lines changed

1 file changed

+50
-146
lines changed

‎components/Navbar.js‎

Lines changed: 50 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,24 @@ export default function Navbar() {
88

99
// switches mobile menu state
1010
const menuActivate = () => {
11-
setMenuActive(menuActive ? false : true);
11+
setMenuActive(prev => !prev);
1212
};
1313

1414
return (
15-
(<nav id="navbar">
15+
<nav id="navbar">
1616
<section id="nav-container">
1717
<Link
1818
href="/"
1919
id="nav-title"
2020
className="nav-section left"
21-
aria-label="acm home">
22-
21+
aria-label="ACM Home">
2322
{/* TODO: resolve next/image issue */}
2423
{/* eslint-disable-next-line @next/next/no-img-element */}
2524
<img
26-
src={'/images/acm_wordmark_chapter.svg'}
25+
src="/images/acm_wordmark_chapter.svg"
2726
className="acm-logo"
2827
alt="ACM at UCLA"
2928
/>
30-
3129
</Link>
3230
<section id="nav-items-container">
3331
<button
@@ -52,174 +50,84 @@ export default function Navbar() {
5250
<ActiveLink
5351
activeClassName="active"
5452
href="/about"
55-
passHref={true}
5653
>
57-
<button type="button" role="link" onClick={menuActivate}>
54+
<button type="button" onClick={menuActivate}>
5855
About
5956
</button>
6057
</ActiveLink>
6158
</li>
6259
<li>
6360
<ActiveLink
6461
activeClassName="active"
65-
href="/committees"
66-
passHref={true}
67-
>
68-
<button type="button" role="link" onClick={menuActivate}>
62+
href="/committees">
63+
<button type="button" onClick={menuActivate}>
6964
Committees
7065
</button>
7166
</ActiveLink>
7267
</li>
7368
{/* <li><Link href="/gm"><a>{gmData.date.quarter} GM</a></Link></li> */}
7469
<li id="committee-mobile-nav-item">
7570
<ul className="committee-mobile-nav" role="presentation">
76-
<li><ActiveLink activeClassName="active" href="/committees#studio" passHref={true}><button type="button" onClick={menuActivate}>Studio</button></ActiveLink></li>
77-
<li><ActiveLink activeClassName="active" href="/committees#icpc" passHref={true}><button type="button" onClick={menuActivate}>ICPC</button></ActiveLink></li>
78-
<li><ActiveLink activeClassName="active" href="/committees#design" passHref={true}><button type="button" onClick={menuActivate}>Design</button></ActiveLink></li>
79-
<li><ActiveLink activeClassName="active" href="/committees#cyber" passHref={true}><button type="button" onClick={menuActivate}>Cyber</button></ActiveLink></li>
80-
<li><ActiveLink activeClassName="active" href="/committees#teachla" passHref={true}><button type="button" onClick={menuActivate}>Teach LA</button></ActiveLink></li>
81-
<li><ActiveLink activeClassName="active" href="/committees#w" passHref={true}><button type="button" onClick={menuActivate}>W</button></ActiveLink></li>
82-
<li><ActiveLink activeClassName="active" href="/committees#ai" passHref={true}><button type="button" onClick={menuActivate}>AI</button></ActiveLink></li>
83-
<li><ActiveLink activeClassName="active" href="/committees#cloud" passHref={true}><button type="button" onClick={menuActivate}>Cloud</button></ActiveLink></li>
84-
<li><ActiveLink activeClassName="active" href="/committees#hack" passHref={true}><button type="button" onClick={menuActivate}>Hack</button></ActiveLink></li>
85-
<li>
86-
<ActiveLink
87-
activeClassName="active"
88-
href="/committees#studio"
89-
passHref={true}
90-
>
91-
<button type="button" onClick={menuActivate}>
92-
Studio
93-
</button>
94-
</ActiveLink>
95-
</li>
96-
<li>
97-
<ActiveLink
98-
activeClassName="active"
99-
href="/committees#icpc"
100-
passHref={true}
101-
>
102-
<button type="button" onClick={menuActivate}>
103-
ICPC
104-
</button>
105-
</ActiveLink>
106-
</li>
107-
<li>
108-
<ActiveLink
109-
activeClassName="active"
110-
href="/committees#design"
111-
passHref={true}
112-
>
113-
<button type="button" onClick={menuActivate}>
114-
Design
115-
</button>
116-
</ActiveLink>
117-
</li>
118-
<li>
119-
<ActiveLink
120-
activeClassName="active"
121-
href="/committees#cyber"
122-
passHref={true}
123-
>
124-
<button type="button" onClick={menuActivate}>
125-
Cyber
126-
</button>
127-
</ActiveLink>
128-
</li>
129-
<li>
130-
<ActiveLink
131-
activeClassName="active"
132-
href="/committees#teachla"
133-
passHref={true}
134-
>
135-
<button type="button" onClick={menuActivate}>
136-
Teach LA
137-
</button>
138-
</ActiveLink>
139-
</li>
140-
<li>
141-
<ActiveLink
142-
activeClassName="active"
143-
href="/committees#w"
144-
passHref={true}
145-
>
146-
<button type="button" onClick={menuActivate}>
147-
W
148-
</button>
149-
</ActiveLink>
150-
</li>
151-
<li>
152-
<ActiveLink
153-
activeClassName="active"
154-
href="/committees#ai"
155-
passHref={true}
156-
>
157-
<button type="button" onClick={menuActivate}>
158-
AI
159-
</button>
160-
</ActiveLink>
161-
</li>
162-
<li>
163-
<ActiveLink
164-
activeClassName="active"
165-
href="/committees#hack"
166-
passHref={true}
167-
>
168-
<button type="button" onClick={menuActivate}>
169-
Hack
170-
</button>
171-
</ActiveLink>
172-
</li>
71+
{[
72+
{ name: 'Studio', id: 'studio' },
73+
{ name: 'ICPC', id: 'icpc' },
74+
{ name: 'Design', id: 'design' },
75+
{ name: 'Cyber', id: 'cyber' },
76+
{ name: 'Teach LA', id: 'teachla' },
77+
{ name: 'W', id: 'w' },
78+
{ name: 'AI', id: 'ai' },
79+
{ name: 'Cloud', id: 'cloud' },
80+
{ name: 'Hack', id: 'hack' },
81+
].map(({ name, id }) => (
82+
<li key={id}>
83+
<ActiveLink
84+
activeClassName="active"
85+
href={`/committees#${id}`}
86+
>
87+
<button type="button" onClick={menuActivate}>
88+
{name}
89+
</button>
90+
</ActiveLink>
91+
</li>
92+
))}
17393
</ul>
17494
</li>
17595
<li className="hide-on-desktop">initiatives</li>
17696
<li className="hide-on-desktop" id="initiatives-mobile-nav-item">
17797
<ul className="committee-mobile-nav" role="presentation">
178-
<li><ActiveLink activeClassName="active" href="/jedi" passHref={true}><button type="button" onClick={menuActivate}>JEDI</button></ActiveLink></li>
179-
<li><ActiveLink activeClassName="active" href="/impact" passHref={true}><button type="button" onClick={menuActivate}>impact</button></ActiveLink></li>
180-
<li>
181-
<ActiveLink
182-
activeClassName="active"
183-
act
184-
href="/jedi"
185-
passHref={true}
186-
>
187-
<button type="button" onClick={menuActivate}>
188-
JEDI
189-
</button>
190-
</ActiveLink>
191-
</li>
192-
<li>
193-
<ActiveLink
194-
activeClassName="active"
195-
href="/impact"
196-
passHref={true}
197-
>
198-
<button type="button" onClick={menuActivate}>
199-
impact
200-
</button>
201-
</ActiveLink>
202-
</li>
98+
{[
99+
{ name: 'JEDI', href: '/jedi' },
100+
{ name: 'Impact', href: '/impact' },
101+
].map(({ name, href }) => (
102+
<li key={name}>
103+
<ActiveLink
104+
activeClassName="active"
105+
href={href}
106+
>
107+
<button type="button" onClick={menuActivate}>
108+
{name}
109+
</button>
110+
</ActiveLink>
111+
</li>
112+
))}
203113
</ul>
204114
</li>
205115
<li>
206116
<ActiveLink
207117
activeClassName="active"
208118
href="/officers"
209-
passHref={true}
210119
>
211-
<button type="button" role="link" onClick={menuActivate}>
212-
Team
120+
<button type="button" onClick={menuActivate}>
121+
Team
213122
</button>
214123
</ActiveLink>
215124
</li>
216125
<li>
217126
<ActiveLink
218127
activeClassName="active"
219128
href="/events"
220-
passHref={true}
221129
>
222-
<button type="button" role="link" onClick={menuActivate}>
130+
<button type="button" onClick={menuActivate}>
223131
Events
224132
</button>
225133
</ActiveLink>
@@ -228,9 +136,8 @@ export default function Navbar() {
228136
<ActiveLink
229137
activeClassName="active"
230138
href="/internship"
231-
passHref={true}
232139
>
233-
<button type="button" role="link" onClick={menuActivate}>
140+
<button type="button" onClick={menuActivate}>
234141
Join Us
235142
</button>
236143
</ActiveLink>
@@ -239,9 +146,8 @@ export default function Navbar() {
239146
<ActiveLink
240147
activeClassName="active"
241148
href="https://opensource.uclaacm.com/"
242-
passHref={true}
243149
>
244-
<button type="button" role="link" onClick={menuActivate}>
150+
<button type="button" onClick={menuActivate}>
245151
Open Source
246152
</button>
247153
</ActiveLink>
@@ -250,15 +156,13 @@ export default function Navbar() {
250156
<Link
251157
href="https://members.uclaacm.com"
252158
className="button button-transparent button-lg font-header">
253-
254159
Member Login
255-
256160
</Link>
257161
</li>
258162
</ul>
259163
</section>
260164
</section>
261165
</section>
262-
</nav>)
166+
</nav>
263167
);
264168
}

0 commit comments

Comments
 (0)