Skip to content

Commit

Permalink
Merge pull request #85 from acm-ucr/vsingh9/navbarState
Browse files Browse the repository at this point in the history
update nav bar to show active tab
  • Loading branch information
rfairooz authored Mar 18, 2024
2 parents 94ecd32 + a89b057 commit 4fa1c80
Showing 1 changed file with 34 additions and 7 deletions.
41 changes: 34 additions & 7 deletions src/components/Navigation.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
"use client";
import React from "react";
import React, { useState } from "react";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import Link from "next/link";
import Image from "next/image";
import Logo from "../public/assets/logo.svg";
import Button from "@/components/Button";
const Navigation = () => {
const [selected, setSelected] = useState("");
return (
<Navbar
collapseOnSelect
Expand All @@ -19,13 +20,14 @@ const Navigation = () => {
eventkey="1"
className="p-0 flex justify-center items-center"
href="/"
onClick={() => setSelected("")}
>
<Image
src={Logo}
width={100}
height={100}
className="h-[7vh]"
alt="WINC at UCR"
alt="HSP at UCR"
/>
<div className="text-white text-3xl md:text-5xl font-montserrat font-bold">
HSP
Expand All @@ -39,39 +41,64 @@ const Navigation = () => {
as={Link}
eventkey="6"
href="/"
className="mb-0 py-2 px-3 no-underline ml-auto text-xl md:text-2xl whitespace-nowrap w-full text-center !text-white !font-montserrat !font-bold hover:!text-hsp-yellow hover:cursor-pointer"
onClick={() => {
setSelected("about");
}}
className={`mb-0 py-2 px-3 no-underline ml-auto text-xl md:text-2xl whitespace-nowrap w-full text-center !text-white !font-montserrat !font-bold hover:!text-hsp-yellow hover:cursor-pointer ${
selected === "about" ? "!text-hsp-yellow" : "text-white"
}`}
>
about
</Nav.Link>
<Nav.Link
as={Link}
eventkey="2"
href="/board"
className="mb-0 py-2 px-3 no-underline ml-auto text-xl md:text-2xl whitespace-nowrap bg-winc-white w-full text-center !text-white !font-montserrat !font-bold hover:!text-hsp-yellow hover:cursor-pointer"
onClick={() => {
setSelected("board");
}}
className={`mb-0 py-2 px-3 no-underline ml-auto text-xl md:text-2xl whitespace-nowrap bg-winc-white w-full text-center !text-white !font-montserrat !font-bold hover:!text-hsp-yellow hover:cursor-pointer ${
selected === "board" ? "!text-hsp-yellow" : "text-white"
}`}
>
board
</Nav.Link>
<Nav.Link
as={Link}
eventkey="3"
href="/events"
className="mb-0 py-2 px-3 no-underline ml-auto text-xl md:text-2xl whitespace-nowrap bg-winc-white w-full text-center !text-white !font-montserrat !font-bold hover:!text-hsp-yellow hover:cursor-pointer"
onClick={() => {
setSelected("events");
}}
className={`mb-0 py-2 px-3 no-underline ml-auto text-xl md:text-2xl whitespace-nowrap bg-winc-white w-full text-center !text-white !font-montserrat !font-bold hover:!text-hsp-yellow hover:cursor-pointer ${
selected === "events" ? "!text-hsp-yellow" : "text-white"
}`}
>
events
</Nav.Link>
<Nav.Link
as={Link}
eventkey="4"
href="/donate"
className="mb-0 py-2 px-3 no-underline ml-auto text-xl md:text-2xl whitespace-nowrap bg-winc-white w-full text-center !text-white !font-montserrat !font-bold hover:!text-hsp-yellow hover:cursor-pointer"
onClick={() => {
setSelected("donate");
}}
className={`mb-0 py-2 px-3 no-underline ml-auto text-xl md:text-2xl whitespace-nowrap bg-winc-white w-full text-center !text-white !font-montserrat !font-bold hover:!text-hsp-yellow hover:cursor-pointer ${
selected === "donate" ? "!text-hsp-yellow" : "text-white"
}`}
>
donate
</Nav.Link>
<Nav.Link
as={Link}
eventkey="5"
href="/projects"
className="mb-0 py-2 px-3 no-underline ml-auto text-xl md:text-2xl whitespace-nowrap bg-winc-white w-full text-center !text-white !font-montserrat !font-bold hover:!text-hsp-yellow hover:cursor-pointer"
onClick={() => {
setSelected("projects");
}}
className={`mb-0 py-2 px-3 no-underline ml-auto text-xl md:text-2xl whitespace-nowrap bg-winc-white w-full text-center !text-white !font-montserrat !font-bold hover:!text-hsp-yellow hover:cursor-pointer ${
selected === "projects" ? "!text-hsp-yellow" : "text-white"
}`}
>
projects
</Nav.Link>
Expand Down

0 comments on commit 4fa1c80

Please sign in to comment.