Skip to content

Commit 223087e

Browse files
added shipyard button in mobile view
1 parent 10afb2a commit 223087e

File tree

1 file changed

+65
-77
lines changed

1 file changed

+65
-77
lines changed

src/components/Navbar.jsx

Lines changed: 65 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -39,55 +39,49 @@ const Navbar = () => {
3939
</h1>
4040
<ul className="hidden md:flex">
4141
<li
42-
className={`p-4 ${
43-
activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
44-
}`}
42+
className={`p-4 ${activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
43+
}`}
4544
>
4645
<Link to="/"> Home </Link>{" "}
4746
</li>
4847
<li
49-
className={`p-4 ${
50-
activeLink === "/about"
48+
className={`p-4 ${activeLink === "/about"
5149
? "text-[#0DFF1C]"
5250
: "hover:text-[#0DFF1C]"
53-
}`}
51+
}`}
5452
>
5553
<Link to="/about">About</Link>
5654
</li>
5755
<li
58-
className={`p-4 ${
59-
activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
60-
}`}
56+
className={`p-4 ${activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
57+
}`}
6158
>
6259
<Link to="/team"> Team </Link>{" "}
6360
</li>
6461

6562
<li
66-
className={`p-4 ${
67-
activeLink === "/resource"
63+
className={`p-4 ${activeLink === "/resource"
6864
? "text-[#0DFF1C]"
6965
: "hover:text-[#0DFF1C]"
70-
} hover:text-[#0DFF1C] translate-x-[-3.2em] hidden absolute bg-white text-gray-900 rounded mt-1 w-48 group-hover:block hover:rounded-md `}
66+
} hover:text-[#0DFF1C] translate-x-[-3.2em] hidden absolute bg-white text-gray-900 rounded mt-1 w-48 group-hover:block hover:rounded-md `}
7167
>
7268
<a href="/resource">Resources</a>
7369
</li>
7470

7571
<li
76-
className={`p-4 ${
77-
activeLink === "/contact"
72+
className={`p-4 ${activeLink === "/contact"
7873
? "text-[#0DFF1C]"
7974
: "hover:text-[#0DFF1C]"
80-
} hover:text-[#0DFF1C]`}
75+
} hover:text-[#0DFF1C]`}
8176
>
8277
<Link to="/contact">Contact</Link>
8378
</li>
8479

8580
<li
86-
className={`p-4 ${
87-
activeLink === "/shipyard"
81+
className={`p-4 ${activeLink === "/shipyard"
8882
? "text-[#0DFF1C]"
8983
: "hover:text-[#0DFF1C]"
90-
} hover:text-[#0DFF1C]`}
84+
} hover:text-[#0DFF1C]`}
9185
>
9286
<Link to="/shipyard">Shipyard</Link>
9387
</li>
@@ -159,65 +153,59 @@ const Navbar = () => {
159153
</h1>
160154
</center>
161155
<ul className="uppercase p-4">
162-
<li
163-
className={`p-4 ${
164-
activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
165-
} border-b border-gray-600`}
166-
>
167-
<Link to="/" onClick={() => handleLinkClick("/")}>
168-
Home
169-
</Link>
170-
</li>
171-
<li
172-
className={`p-4 ${
173-
activeLink === "/about" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
174-
} border-b border-gray-600`}
175-
>
176-
<Link to="/about">About</Link>
177-
</li>
178-
<li
179-
className={`p-4 ${
180-
activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
181-
} border-b border-gray-600`}
182-
>
183-
<Link to="/team">Team</Link>
184-
</li>
185-
<li
186-
className={`p-4 ${
187-
activeLink === "/resource" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
188-
} border-b border-gray-600`}
189-
>
190-
<Link to="/resource">Resources</Link>
191-
</li>
192-
<li className="p-4 border-b border-gray-600">
193-
<a href="https://docs.fosscu.org">Handbook</a>
194-
</li>
195-
<li className="p-4 border-b border-gray-600">
196-
<a href="https://github.com/FOSS-Community">Projects</a>
197-
</li>
198-
<li
199-
className={`p-4 ${
200-
activeLink === "/contact" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
201-
} border-b border-gray-600`}
202-
>
203-
<Link to="/contact">Contact</Link>
204-
</li>
205-
<li className="p-4 border-b border-gray-600">
206-
<a href="https://lu.ma/fosscu">Calendar</a>
207-
</li>
208-
<li className="p-4 border-b border-gray-600">
209-
<a href="https://github.com/FOSS-Community/">Contribute</a>
210-
</li>
211-
<li
212-
className={`p-4 ${
213-
activeLink === "/shipyard" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
214-
}`}
215-
>
216-
<Link to="/shipyard" onClick={() => handleLinkClick("/shipyard")}>
217-
Shipyard
218-
</Link>
219-
</li>
220-
</ul>
156+
<li
157+
className={`p-4 ${activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
158+
} border-b border-gray-600`}
159+
>
160+
<Link to="/" onClick={() => handleLinkClick("/")}>
161+
Home
162+
</Link>
163+
</li>
164+
<li
165+
className={`p-4 ${activeLink === "/about" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
166+
} border-b border-gray-600`}
167+
>
168+
<Link to="/about">About</Link>
169+
</li>
170+
<li
171+
className={`p-4 ${activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
172+
} border-b border-gray-600`}
173+
>
174+
<Link to="/team">Team</Link>
175+
</li>
176+
<li
177+
className={`p-4 ${activeLink === "/resource" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
178+
} border-b border-gray-600`}
179+
>
180+
<Link to="/resource">Resources</Link>
181+
</li>
182+
<li className="p-4 border-b border-gray-600">
183+
<a href="https://docs.fosscu.org">Handbook</a>
184+
</li>
185+
<li className="p-4 border-b border-gray-600">
186+
<a href="https://github.com/FOSS-Community">Projects</a>
187+
</li>
188+
<li
189+
className={`p-4 ${activeLink === "/contact" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
190+
} border-b border-gray-600`}
191+
>
192+
<Link to="/contact">Contact</Link>
193+
</li>
194+
<li className="p-4 border-b border-gray-600">
195+
<a href="https://lu.ma/fosscu">Calendar</a>
196+
</li>
197+
<li className="p-4 border-b border-gray-600">
198+
<a href="https://github.com/FOSS-Community/">Contribute</a>
199+
</li>
200+
<li
201+
className={`p-4 ${activeLink === "/shipyard" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
202+
}`}
203+
>
204+
<Link to="/shipyard" onClick={() => handleLinkClick("/shipyard")}>
205+
Shipyard
206+
</Link>
207+
</li>
208+
</ul>
221209
</div>
222210
</div>
223211
<Outlet />

0 commit comments

Comments
 (0)