gitea/amati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add navlink at header

Browse Source
This commit is contained in:
Sukma Gladys 2024-10-31 15:16:47 +07:00
parent ab6c448361
commit 14faf8111a
1 changed files with 81 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
apps/frontend/src/components/AppHeader.tsx
View File

@ -3,7 +3,7 @@ import logo from "@/assets/logos/amati-logo.png";
import cx from "clsx"; import cx from "clsx";
import classNames from "./styles/appHeader.module.css"; import classNames from "./styles/appHeader.module.css";
import { IoMdMenu } from "react-icons/io"; import { IoMdMenu } from "react-icons/io";
import { Link } from "@tanstack/react-router"; import { Link, useLocation } from "@tanstack/react-router";
import useAuth from "@/hooks/useAuth"; import useAuth from "@/hooks/useAuth";
import { Avatar, AvatarFallback, AvatarImage } from "@/shadcn/components/ui/avatar"; import { Avatar, AvatarFallback, AvatarImage } from "@/shadcn/components/ui/avatar";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/shadcn/components/ui/dropdown-menu"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/shadcn/components/ui/dropdown-menu";
@ -21,6 +21,7 @@ interface User {
id: string; id: string;
name: string; name: string;
permissions: string[]; permissions: string[];
role: string;
photoProfile?: string; photoProfile?: string;
} }
@ -34,22 +35,94 @@ export default function AppHeader({ toggle }: Props) {
const [userMenuOpened, setUserMenuOpened] = useState(false); const [userMenuOpened, setUserMenuOpened] = useState(false);
const { user }: { user: User | null } = useAuth(); const { user }: { user: User | null } = useAuth();
const isSuperAdmin = user?.role === "super-admin";
// const userMenus = getUserMenus().map((item, i) => ( // const userMenus = getUserMenus().map((item, i) => (
// <UserMenuItem item={item} key={i} /> // <UserMenuItem item={item} key={i} />
// )); // ));
const { pathname } = useLocation();
const showAssessmentResultLinks = pathname === "/assessmentResult";
const showAssessmentLinks = pathname === "/assessment";
const assessmentRequestsLinks = pathname === "/assessmentRequest";
const managementResultsLinks = pathname === "/assessmentResultsManagement";
const shouldShowButton = !(showAssessmentResultLinks || showAssessmentLinks || assessmentRequestsLinks);
return ( return (
<header className="fixed top-0 left-0 w-full h-16 bg-white z-50 border"> <header className="fixed top-0 left-0 w-full h-16 bg-white z-50 border">
<div className="flex h-full justify-between w-full items-center"> <div className="flex h-full justify-between w-full items-center">
<Button <div className="flex items-center">
onClick={toggle} {shouldShowButton && (
className="flex items-center px-5 py-5 lg:hidden bg-white text-black hover:bg-white hover:text-black focus:bg-white focus:text-black active:bg-white active:text-black" <Button
> onClick={toggle}
<IoMdMenu /> className="flex items-center px-5 py-5 lg:hidden bg-white text-black hover:bg-white hover:text-black focus:bg-white focus:text-black active:bg-white active:text-black"
</Button> >
<IoMdMenu />
</Button>
)}
<img src={logo} alt="" className="w-fit h-full px-8 py-5" /> <img src={logo} alt="" className="w-44 h-fit px-8 py-5" />
</div>
{/* Conditional Navlinks */}
<div className="flex space-x-4 justify-center w-full">
{showAssessmentResultLinks && (
<>
<Link
to="/assessmentRequest"
className={cx("text-sm font-medium", {
"text-blue-600": isSuperAdmin ? managementResultsLinks : assessmentRequestsLinks, // warna aktif
"text-gray-700": isSuperAdmin ? !managementResultsLinks : !assessmentRequestsLinks, // warna default
})}
onClick={() => {
if (window.opener) {
window.close();
}
}}
>
{isSuperAdmin ? "Manajemen Hasil" : "Permohonan Assessment"}
</Link>
<Link
to="/assessmentResult"
className={cx("text-sm font-medium", {
"text-blue-600": showAssessmentResultLinks, // warna aktif
"text-gray-700": !showAssessmentResultLinks, // warna default
})}
>
Hasil Assessment
</Link>
</>
)}
{showAssessmentLinks && (
<>
<Link
to="/assessmentRequest"
className={cx("text-sm font-medium", {
"text-blue-600": assessmentRequestsLinks, // warna aktif
"text-gray-700": !assessmentRequestsLinks, // warna default
})}
onClick={() => {
if (window.opener) {
window.close();
}
}}
>
Permohonan Assessment
</Link>
<Link
to="/assessment"
className={cx("text-sm font-medium", {
"text-blue-600": showAssessmentLinks, // warna aktif
"text-gray-700": !showAssessmentLinks, // warna default
})}
>
Assessment
</Link>
</>
)}
</div>
<DropdownMenu <DropdownMenu
modal={false} modal={false}