NAV BAR 🔥
This commit is contained in:
186
client/src/components/NavigationBar.tsx
Normal file
186
client/src/components/NavigationBar.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
import {
|
||||
Button,
|
||||
Avatar,
|
||||
Dropdown,
|
||||
DropdownTrigger,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
DropdownSection,
|
||||
} from "@nextui-org/react";
|
||||
|
||||
import {
|
||||
ArrowRightStartOnRectangleIcon,
|
||||
PencilSquareIcon,
|
||||
RocketLaunchIcon,
|
||||
} from "../icons";
|
||||
|
||||
import config from "../config";
|
||||
import { retrieveUserInformation } from "../security/users";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function NavigationBar() {
|
||||
let [userProfileImageURL, setUserProfileImageURL] = useState("");
|
||||
let [userInformation, setUserInformation] = useState<any>();
|
||||
let [doneLoading, setDoneLoading] = useState(false);
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
|
||||
let navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
retrieveUserInformation()
|
||||
.then((value) => {
|
||||
setUserProfileImageURL(
|
||||
`${config.serverAddress}/users/profile-image/${value.id}`
|
||||
);
|
||||
setUserInformation(value);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
return;
|
||||
})
|
||||
.finally(() => {
|
||||
setDoneLoading(true);
|
||||
});
|
||||
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 10);
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
isScrolled
|
||||
? "transition-all fixed w-full p-2"
|
||||
: "transition-all fixed w-full p-2 mt-8"
|
||||
}
|
||||
>
|
||||
<div className="relative bg-red-100 dark:bg-red-900 border-2 border-red-200 dark:border-red-950 shadow-lg w-full h-full rounded-xl flex flex-col justify-center p-1">
|
||||
<div className=" w-full flex flex-row justify-between gap-4">
|
||||
<div className="flex flex-row gap-0 my-auto *:my-auto">
|
||||
<Button
|
||||
variant="light"
|
||||
size="sm"
|
||||
onPress={() => {
|
||||
navigate("/");
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="../../assets/ecoconnectFull.svg"
|
||||
alt="ecoconnect logo"
|
||||
className="h-6 dark:invert dark:hue-rotate-180"
|
||||
/>
|
||||
</Button>
|
||||
<div className="flex flex-row *:my-auto *:text-red-800 dark:*:text-red-100">
|
||||
<Button variant="light" size="sm">
|
||||
<p className="text-lg">Events</p>
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
size="sm"
|
||||
onPress={() => {
|
||||
navigate("/schedule");
|
||||
}}
|
||||
>
|
||||
<p className="text-lg">Schedules</p>
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
size="sm"
|
||||
onPress={() => {
|
||||
navigate("/community");
|
||||
}}
|
||||
>
|
||||
<p className="text-lg">Community</p>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{userInformation && (
|
||||
<div className="my-auto pr-1">
|
||||
<Dropdown placement="bottom" backdrop="blur">
|
||||
<DropdownTrigger>
|
||||
<Avatar src={userProfileImageURL} as="button" size="sm" />
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu aria-label="Profile Actions">
|
||||
<DropdownSection showDivider>
|
||||
<DropdownItem key="account-overview" isReadOnly>
|
||||
<div className="flex flex-col gap-2 text-center *:mx-auto p-2">
|
||||
<Avatar
|
||||
src={userProfileImageURL}
|
||||
as="button"
|
||||
size="lg"
|
||||
isBordered
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<p>Signed in as</p>
|
||||
<p className="text-lg font-bold">
|
||||
<span>{userInformation.firstName}</span>{" "}
|
||||
<span>{userInformation.lastName}</span>
|
||||
</p>
|
||||
<p className="opacity-50">{userInformation.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
key="dashboard"
|
||||
title="Dashboard"
|
||||
startContent={<RocketLaunchIcon />}
|
||||
onPress={() => {
|
||||
navigate("/springboard");
|
||||
}}
|
||||
/>
|
||||
<DropdownItem
|
||||
key="manage-account"
|
||||
title="Manage your account"
|
||||
startContent={<PencilSquareIcon />}
|
||||
onPress={() => {
|
||||
navigate("/manage-account");
|
||||
}}
|
||||
/>
|
||||
</DropdownSection>
|
||||
<DropdownItem
|
||||
key="signout"
|
||||
startContent={<ArrowRightStartOnRectangleIcon />}
|
||||
color="danger"
|
||||
title="Sign out"
|
||||
onPress={() => {
|
||||
localStorage.clear();
|
||||
window.location.reload();
|
||||
}}
|
||||
/>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
)}
|
||||
{!userInformation && doneLoading && (
|
||||
<div className="flex flex-row gap-1 *:my-auto">
|
||||
<Button
|
||||
variant="light"
|
||||
color="primary"
|
||||
size="sm"
|
||||
onPress={() => {
|
||||
navigate("/signin");
|
||||
}}
|
||||
>
|
||||
<p className="text-lg">Sign in</p>
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
size="sm"
|
||||
onPress={() => {
|
||||
navigate("/signup");
|
||||
}}
|
||||
>
|
||||
<p className="text-lg">Sign up</p>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -97,3 +97,41 @@ export const EyeIcon = () => {
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const RocketLaunchIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="size-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const ArrowRightStartOnRectangleIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="size-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Toaster } from "react-hot-toast";
|
||||
import SingaporeAgencyStrip from "../components/SingaporeAgencyStrip";
|
||||
import NavigationBar from "../components/NavigationBar";
|
||||
|
||||
export default function DefaultLayout({
|
||||
children,
|
||||
@@ -9,8 +10,9 @@ export default function DefaultLayout({
|
||||
return (
|
||||
<div className="relative flex flex-col h-screen">
|
||||
<SingaporeAgencyStrip />
|
||||
<main className=" flex-grow">{children}</main>
|
||||
<main className="pt-16 flex-grow">{children}</main>
|
||||
<Toaster />
|
||||
<NavigationBar />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,9 @@ import config from "../config";
|
||||
import instance from "./http";
|
||||
|
||||
export async function retrieveUserInformation() {
|
||||
if (!localStorage.getItem("accessToken")) {
|
||||
throw "No access token";
|
||||
}
|
||||
try {
|
||||
let userId = await instance.get(`${config.serverAddress}/users/auth`);
|
||||
let userInformation = await instance.get(
|
||||
|
||||
Reference in New Issue
Block a user