Nextjs: Button onclick toggle in sidebar overlay - reactjs

Question

I have a case regarding the onclick button to open the "choose template" sidebar.
the interface is like this.
So when the button is pressed, the "choose template" sidebar will appear.
However, when I click the button, the sidebar won't appear. do you think that's why? is there something wrong with my coding? Thank you
My Code=
Editor.jsx
import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/router";
import styles from "./Editor.module.scss";
import PropTypes from "prop-types";
import { Button } from "../../global/Button";
import ColorPicker from "./ColorPicker";
import "react-edit-text/dist/index.css";
import RightArrow from "../../../public/images/qrcode/rightArrow.svg";
let qrCode;
if (typeof window !== "undefined") {
console.log("i am client");
const QRCodeStyling = require("qr-code-styling");
qrCode = new QRCodeStyling({
width: 1000,
height: 1000,
margin: 50,
qrOptions: { typeNumber: "0", mode: "Byte", errorCorrectionLevel: "Q" },
imageOptions: { hideBackgroundDots: true, imageSize: 0.2, margin: 10 },
dotsOptions: {
type: "rounded",
color: "#756ce0",
gradient: {
type: "radial",
rotation: 0,
colorStops: [
{ offset: 0, color: "#aa80f9" },
{ offset: 1, color: "#756ce0" },
],
},
},
backgroundOptions: { color: "#ffffff", gradient: null },
image: "https://i.ibb.co/SrpHzTQ/icon-200px.png",
dotsOptionsHelper: {
colorType: { single: true, gradient: false },
gradient: { linear: true, radial: false, color1: "#6a1a4c", color2: "#6a1a4c", rotation: "0" },
},
cornersSquareOptions: { type: "extra-rounded", color: "#756ce0" },
cornersSquareOptionsHelper: {
colorType: { single: true, gradient: false },
gradient: { linear: true, radial: false, color1: "#000000", color2: "#000000", rotation: "0" },
},
cornersDotOptions: { type: "", color: "#613583", gradient: null },
cornersDotOptionsHelper: {
colorType: { single: true, gradient: false },
gradient: { linear: true, radial: false, color1: "#000000", color2: "#000000", rotation: "0" },
},
backgroundOptionsHelper: {
colorType: { single: true, gradient: false },
gradient: { linear: true, radial: false, color1: "#ffffff", color2: "#ffffff", rotation: "0" },
},
});
}
import { BsFileEarmarkPdfFill } from "react-icons/bs";
import { IoIosArrowBack } from "react-icons/io";
const Editor = ({ isResponsive, template, list, merchant, setActive, color, toggleClick }) => {
const { Template } = template;
const warna = "linear-gradient(180deg, #aa80f9 0%, #756ce0 100%)";
const router = useRouter();
const qrRef = useRef();
const [colorProps, setColorProps] = useState(warna);
useEffect(() => {
setTimeout(() => {
if (qrRef.current) qrCode.append(qrRef.current);
}, 100);
}, [Template]);
useEffect(() => {
qrCode.update({
data: process.env.NEXT_PUBLIC_SHARE_URL + "/" + router.query.shareKey,
});
}, [Template]);
// const handleklik = (e) => {
// console.log('Free pizza!');
// }
return (
<>
<div className={styles.container}>
<ColorPicker colorProps={color} callback={(event) => setColorProps(event)} />
<Button onClick={toggleClick} className={styles.button}>
Open Template
</Button>
<IoIosArrowBack
className={styles.arrow + " " + styles.back}
onClick={() => {
setActive(template.id === 0 ? list.length - 1 : template.id - 1);
}}
/>
<div className={styles.paper_container}>
<Template qrRef={qrRef} merchant={merchant} color={colorProps.hex} isResponsive={isResponsive} />
<div className={styles.paper_overlay} id="paper-overlay">
<BsFileEarmarkPdfFill />
<span>Generating PDF</span>
</div>
</div>
<RightArrow
className={styles.arrow + " " + styles.next}
onClick={() => {
setActive(template.id === list.length - 1 ? 0 : template.id + 1);
}}
/>
</div>
</>
);
};
Editor.propTypes = {
template: PropTypes.string,
list: PropTypes.string,
merchant: PropTypes.string,
setActive: PropTypes.string,
color: PropTypes.string,
isResponsive: PropTypes.bool,
toggleClick: PropTypes.func,
};
export default Editor;
Template.jsx
import { useState, useEffect } from "react";
import Image from "next/image";
import styles from "./Template.module.scss";
import PropTypes from "prop-types";
import { FaCheck } from "react-icons/fa";
import { Button } from "../../global/Button";
const Card = ({ data, active, setActive }) => {
return (
<div className={styles.card} onClick={() => setActive(data.id)}>
<Image src={data.image} alt={"template " + data.id} width={116} height={164} />
{active === data.id && (
<div className={styles.overlay}>
<FaCheck />
</div>
)}
</div>
);
};
const Template = ({ list, active, setActive, download }) => {
const [isResponsive, setResponsive] = useState(typeof window !== "undefined" ? window.innerWidth <= 800 : false);
const [isHide, setHide] = useState(true);
useEffect(() => {
const handleResize = () => {
if (window.innerWidth <= 800) {
setResponsive(true);
} else {
setResponsive(false);
}
};
if (window !== "undefined") window.addEventListener("resize", handleResize);
}, []);
useEffect(() => {
setHide(true);
}, [isResponsive]);
return (
<div className={styles.container}>
<div className={styles.card_container} style={{ right: isHide ? null : 0, position: isResponsive && "fixed" }}>
{isResponsive && !isHide && <div className={styles.template_overlay} onClick={() => setHide(true)} />}
<h3>Pilih Template</h3>
{list.map((template) => {
return <Card data={template} key={template.id} active={active} setActive={setActive} />;
})}
</div>
<Button onClick={download} className={styles.button}>
DOWNLOAD
</Button>
</div>
);
};
Card.propTypes = {
data: PropTypes.string,
active: PropTypes.string,
setActive: PropTypes.string
};
Template.propTypes = {
list: PropTypes.string,
active: PropTypes.string,
setActive: PropTypes.string,
download: PropTypes.string,
isResponsive: PropTypes.bool
};
export default Template;
[sharekey].jsx
import { useState, useEffect } from "react";
import { jsPDF } from "jspdf";
import html2canvas from "html2canvas";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import styles from "./Qrcode.module.scss";
import { useRecoilValue } from "recoil";
import { userProfile } from "../../../utils/recoil";
import Sidebar from "../../../components/global/Wrapper/Sidebar/index";
import Editor from "../../../components/edit-survey/qrcode/Editor";
import Template from "../../../components/edit-survey/qrcode/Template";
import TemplateOne from "../../../components/edit-survey/qrcode/template/One";
import TemplateTwo from "../../../components/edit-survey/qrcode/template/Two";
import TemplateThree from "../../../components/edit-survey/qrcode/template/Three";
import TemplateFour from "../../../components/edit-survey/qrcode/template/Four";
import TemplateFive from "../../../components/edit-survey/qrcode/template/Five";
import TemplateSix from "../../../components/edit-survey/qrcode/template/Six";
const Template1 = "/images/qrcode/Template1.jpg";
const Template2 = "/images/qrcode/Template2.jpg";
const Template3 = "/images/qrcode/Template3.jpg";
const Template4 = "/images/qrcode/Template4.jpg";
const Template5 = "/images/qrcode/Template5.jpg";
const Template6 = "/images/qrcode/Template6.jpg";
const templateList = [
{ Template: TemplateOne, id: 0, image: Template1 },
{ Template: TemplateTwo, id: 1, image: Template2 },
{ Template: TemplateThree, id: 2, image: Template3 },
{ Template: TemplateFour, id: 3, image: Template4 },
{ Template: TemplateFive, id: 4, image: Template5 },
{ Template: TemplateSix, id: 5, image: Template6 },
];
const color = {
r: "170",
g: "128",
b: "249",
a: "1",
};
const Qrcode = () => {
const [activeTemplate, setActiveTemplate] = useState(0);
const profile = useRecoilValue(userProfile);
const [isResponsive, setResponsive] = useState(typeof window !== "undefined" ? window.innerWidth <= 800 : false);
const [isHide, setHide] = useState(true);
useEffect(() => {
const handleResize = () => {
if (window.innerWidth <= 800) {
setResponsive(true);
} else {
setResponsive(false);
}
};
if (window !== "undefined") window.addEventListener("resize", handleResize);
}, []);
useEffect(() => {
setHide(true);
}, [isResponsive]);
const download = () => {
const paper = document.getElementById("paper-pdf");
const overlay = document.getElementById("paper-overlay");
overlay.style.display = "flex";
paper.style.transform = "scale(2)";
html2canvas(paper).then((canvas) => {
const imgData = canvas.toDataURL("image/jpg");
const pdf = new jsPDF({
orientation: "potrait",
unit: "pt",
format: "a5",
});
const imgProps = pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, "JPG", 0, 0, pdfWidth, pdfHeight);
pdf.save("QRCode.pdf");
paper.style.transform = null;
overlay.style.display = null;
});
};
return (
<Sidebar style={{ paddingTop: 0, paddingBottom: 0, paddingRight: 0 }}>
<div className={styles.container}>
<Editor
color={color}
template={templateList[activeTemplate]}
list={templateList}
merchant={profile.merchant}
setActive={setActiveTemplate}
toggleClick={() => setHide(!isHide)}
isResponsive={isResponsive}
/>
<Template list={templateList} active={activeTemplate} setActive={setActiveTemplate} download={download} isResponsive={isResponsive} />
</div>
</Sidebar>
);
};
export const getServerSideProps = async ({ locale }) => ({
props: {
...(await serverSideTranslations(locale, ["common", "edit-survey"])),
},
});
export default Qrcode;

Answer 1

you should pass down the isHide and setIsHide down to Template component. and remove the isHide, setIsHide useState from the Template component
so in [sharekey].jsx
<Template list={templateList} active={activeTemplate} setActive={setActiveTemplate} download={download} isResponsive={isResponsive} isHide={isHide} setIsHide={setIsHide}/>