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

update: integrate the leftSideBar toggle in the index.lazy assessment so that it is connected to the AppHeader

Browse Source
This commit is contained in:
falendikategar 2024-11-14 15:19:32 +07:00
parent 45e1501762
commit f7fbea53cb
2 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,7 @@ 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";
// import { toggleLeftSidebar } from "../../src/routes/_assessmentLayout/assessment/index.lazy";
interface Props { interface Props {
openNavbar: boolean; openNavbar: boolean;
@ -36,7 +37,12 @@ interface Props {
// image: "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-5.png", // 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 [userMenuOpened, setUserMenuOpened] = useState(false);
const [isLeftSidebarOpen, setIsLeftSidebarOpen] = useState(false); const [isLeftSidebarOpen, setIsLeftSidebarOpen] = useState(false);
@ -47,7 +53,7 @@ export default function AppHeader({ toggle }: Props) {
// <UserMenuItem item={item} key={i} /> // <UserMenuItem item={item} key={i} />
// )); // ));
const toggleLeftSidebar = () => setIsLeftSidebarOpen(!isLeftSidebarOpen); // const toggleLeftSidebar = () => setIsLeftSidebarOpen(!isLeftSidebarOpen);
const { pathname } = useLocation(); const { pathname } = useLocation();
const showAssessmentResultLinks = pathname === "/assessmentResult"; const showAssessmentResultLinks = pathname === "/assessmentResult";
@ -71,7 +77,7 @@ export default function AppHeader({ toggle }: Props) {
)} )}
{showAssessmentLinks && ( {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 <img

19
apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
View File

@ -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() { export default function AssessmentPage() {
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const limit = 10; const limit = 10;
@ -642,15 +648,20 @@ export default function AssessmentPage() {
{/* LEFT-SIDE */} {/* LEFT-SIDE */}
{/* Aspek dan Sub-Aspek */} {/* Aspek dan Sub-Aspek */}
<TbMenu2 {/* <TbMenu2
onClick={toggleLeftSidebar} onClick={toggleLeftSidebar}
className="ml-4 w-6 h-fit pb-4 mb-4 cursor-pointer" className="ml-4 w-6 h-fit pb-4 mb-4 cursor-pointer"
/> */}
<AppHeader
openNavbar={isLeftSidebarOpen}
toggle={toggleLeftSidebar}
toggleLeftSidebar={toggleLeftSidebar}
/> />
{/* Sidebar for Mobile */} {/* Sidebar for Mobile */}
{isMobile && ( {isMobile && (
<LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}> <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"> <Flex direction="column" gap="xs" className="w-64">
<div className="space-y-2"> <div className="space-y-2">
{/* Aspek */} {/* Aspek */}
@ -703,7 +714,7 @@ export default function AssessmentPage() {
)} )}
{/* Sidebar for Desktop (Always Visible) */} {/* 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"> <Flex direction="column" gap="xs" className="w-64">
<div className="space-y-2"> <div className="space-y-2">
{/* Aspek */} {/* Aspek */}
@ -885,7 +896,7 @@ export default function AssessmentPage() {
{/* Sidebar for mobile (only when toggled) */} {/* Sidebar for mobile (only when toggled) */}
<div className="hidden md:block"> <div className="hidden md:block">
<Sheet open={isSidebarOpen} onOpenChange={(open) => setIsSidebarOpen(open)}> <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"> <SheetTitle className="font-medium text-lg text-gray-800 mb-2">
Nomor Soal Nomor Soal
</SheetTitle> </SheetTitle>