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 { 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

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() {
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>