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

update: add icon TbMenu2 on app header

Browse Source
This commit is contained in:
abiyasa05 2024-11-14 14:02:57 +07:00
parent 3345e2408a
commit 21591abb81
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@ 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";
import { Button } from "@/shadcn/components/ui/button"; import { Button } from "@/shadcn/components/ui/button";
import { TbMenu2 } from "react-icons/tb";
// import getUserMenus from "../actions/getUserMenus"; // import getUserMenus from "../actions/getUserMenus";
// import { useAuth } from "@/modules/auth/contexts/AuthContext"; // import { useAuth } from "@/modules/auth/contexts/AuthContext";
// import UserMenuItem from "./UserMenuItem"; // import UserMenuItem from "./UserMenuItem";
@ -25,6 +26,10 @@ interface User {
photoProfile?: string; photoProfile?: string;
} }
interface Props {
toggle: () => void;
}
// const mockUserData = { // const mockUserData = {
// name: "Fulan bin Fulanah", // name: "Fulan bin Fulanah",
// email: "janspoon@fighter.dev", // email: "janspoon@fighter.dev",
@ -33,6 +38,7 @@ interface User {
export default function AppHeader({ toggle }: Props) { export default function AppHeader({ toggle }: Props) {
const [userMenuOpened, setUserMenuOpened] = useState(false); const [userMenuOpened, setUserMenuOpened] = useState(false);
const [isLeftSidebarOpen, setIsLeftSidebarOpen] = useState(false);
const { user }: { user: User | null } = useAuth(); const { user }: { user: User | null } = useAuth();
const isSuperAdmin = user?.role === "super-admin"; const isSuperAdmin = user?.role === "super-admin";
@ -41,6 +47,8 @@ export default function AppHeader({ toggle }: Props) {
// <UserMenuItem item={item} key={i} /> // <UserMenuItem item={item} key={i} />
// )); // ));
const toggleLeftSidebar = () => setIsLeftSidebarOpen(!isLeftSidebarOpen);
const { pathname } = useLocation(); const { pathname } = useLocation();
const showAssessmentResultLinks = pathname === "/assessmentResult"; const showAssessmentResultLinks = pathname === "/assessmentResult";
const showAssessmentLinks = pathname === "/assessment"; const showAssessmentLinks = pathname === "/assessment";
@ -62,16 +70,20 @@ export default function AppHeader({ toggle }: Props) {
</Button> </Button>
)} )}
{showAssessmentLinks && (
<TbMenu2 onClick={toggleLeftSidebar} className="fixed ml-2 mr-10 w-6 h-6" />
)}
<img <img
src={logo} src={logo}
alt="" alt="Logo"
className="w-44 h-fit px-8 py-5 object-cover" className="w-44 h-fit px-8 py-5 object-cover hidden ml-4 lg:block"
/> />
</div> </div>
{/* Conditional Navlinks */} {/* Conditional Navlinks */}
{!isSuperAdmin && ( {!isSuperAdmin && (
<div className="flex space-x-4 justify-center w-full"> <div className="flex space-x-4 justify-center w-full ml-14">
{showAssessmentResultLinks && ( {showAssessmentResultLinks && (
<> <>
<Link <Link