From 21591abb8163a0cfdedf82da973e9a7ad7d36181 Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Thu, 14 Nov 2024 14:02:57 +0700
Subject: [PATCH] update: add icon TbMenu2 on app header

---
 apps/frontend/src/components/AppHeader.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

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