From f7fbea53cb1d882f288bb5620257907b4b025986 Mon Sep 17 00:00:00 2001
From: falendikategar <falendikapratama@gmail.com>
Date: Thu, 14 Nov 2024 15:19:32 +0700
Subject: [PATCH] update: integrate the leftSideBar toggle in the index.lazy
 assessment so that it is connected to the AppHeader

---
 apps/frontend/src/components/AppHeader.tsx    | 12 +++++++++---
 .../assessment/index.lazy.tsx                 | 19 +++++++++++++++----
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/apps/frontend/src/components/AppHeader.tsx b/apps/frontend/src/components/AppHeader.tsx
index 6b306d0..a4841b8 100644
--- a/apps/frontend/src/components/AppHeader.tsx
+++ b/apps/frontend/src/components/AppHeader.tsx
@@ -12,6 +12,7 @@ import { TbMenu2 } from "react-icons/tb";
 // import getUserMenus from "../actions/getUserMenus";
 // import { useAuth } from "@/modules/auth/contexts/AuthContext";
 // import UserMenuItem from "./UserMenuItem";
+// import { toggleLeftSidebar } from "../../src/routes/_assessmentLayout/assessment/index.lazy";
 
 interface Props {
 	openNavbar: boolean;
@@ -36,7 +37,12 @@ interface Props {
 // 	image: "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-5.png",
 // };
 
-export default function AppHeader({ toggle }: Props) {
+interface Props {
+	toggle: () => void;
+	toggleLeftSidebar: () => void; // Add this prop
+  }
+
+export default function AppHeader({ toggle, toggleLeftSidebar }: Props) {
 	const [userMenuOpened, setUserMenuOpened] = useState(false);
 	const [isLeftSidebarOpen, setIsLeftSidebarOpen] = useState(false);
 
@@ -47,7 +53,7 @@ export default function AppHeader({ toggle }: Props) {
 	// 	<UserMenuItem item={item} key={i} />
 	// ));
 
-	const toggleLeftSidebar = () => setIsLeftSidebarOpen(!isLeftSidebarOpen);
+	// const toggleLeftSidebar = () => setIsLeftSidebarOpen(!isLeftSidebarOpen);
 
 	const { pathname } = useLocation();
 	const showAssessmentResultLinks = pathname === "/assessmentResult";
@@ -71,7 +77,7 @@ export default function AppHeader({ toggle }: Props) {
 					)}
 
 					{showAssessmentLinks && (
-						<TbMenu2 onClick={toggleLeftSidebar} className="fixed ml-2 mr-10 w-6 h-6" />
+						<TbMenu2 onClick={toggleLeftSidebar} className="ml-4 mt-8 w-6 h-fit pb-4 mb-4 cursor-pointer" />
 					)}
 					
 					<img
diff --git a/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx b/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
index f33f79b..ab2ab79 100644
--- a/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
+++ b/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
@@ -93,6 +93,12 @@ export interface SubmitOptionResponse {
   };
 }
 
+// const [isLeftSidebarOpen, setIsLeftSidebarOpen] = useState(false);
+
+// export const toggleLeftSidebar = () => setIsLeftSidebarOpen(!isLeftSidebarOpen);
+
+// import AppHeader from '../../../components/AppHeader';
+
 export default function AssessmentPage() {
   const [page, setPage] = useState(1);
   const limit = 10;
@@ -642,15 +648,20 @@ export default function AssessmentPage() {
 
           {/* LEFT-SIDE */}
           {/* Aspek dan Sub-Aspek */}
-            <TbMenu2
+            {/* <TbMenu2
               onClick={toggleLeftSidebar}
               className="ml-4 w-6 h-fit pb-4 mb-4 cursor-pointer"
+            /> */}
+            <AppHeader
+              openNavbar={isLeftSidebarOpen}
+              toggle={toggleLeftSidebar}
+              toggleLeftSidebar={toggleLeftSidebar}
             />
 
           {/* Sidebar for Mobile */}
           {isMobile && (
             <LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}>
-              <LeftSheetContent className="h-full w-75 overflow-auto mt-8">
+              <LeftSheetContent className="h-full w-75 overflow-auto">
                 <Flex direction="column" gap="xs" className="w-64">
                   <div className="space-y-2">
                     {/* Aspek */}
@@ -703,7 +714,7 @@ export default function AssessmentPage() {
           )}
 
           {/* Sidebar for Desktop (Always Visible) */}
-            <div className="hidden md:block fixed h-screen w-64 overflow-auto mt-8">
+            <div className="hidden md:block fixed h-screen w-64 overflow-auto">
               <Flex direction="column" gap="xs" className="w-64">
                 <div className="space-y-2">
                   {/* Aspek */}
@@ -885,7 +896,7 @@ export default function AssessmentPage() {
           {/* Sidebar for mobile (only when toggled) */}
           <div className="hidden md:block">
             <Sheet open={isSidebarOpen} onOpenChange={(open) => setIsSidebarOpen(open)}>
-              <SheetContent className="h-full w-70 overflow-auto mr-4">
+              <SheetContent className="h-full w-70 overflow-auto">
                 <SheetTitle className="font-medium text-lg text-gray-800 mb-2">
                   Nomor Soal
                 </SheetTitle>