Програмийг удирдах цэсийг нээх болон хаах ажиллагааг хариуцах компонентийг боловсруулъя. Үүний тулд төслийн components хавтаст Navigation хавтасыг үүсгээд түүн дотор цэсний шилжилтийн компонентийн MenuToggle хавтасыг үүсгээрэй. Компонентийн хавтаст
import React from "react";
import classes from "./MenuToggle.module.css";
const MenuToggle = (props) => {
const cls = [classes.MenuToggle, "fa"];
if (props.isOpen) {
cls.push("fa-times");
cls.push(classes.open);
} else {
cls.push("fa-bars");
}
return <i className={cls.join(" ")} onClick={props.onToggle} />;
};
export default MenuToggle;
кодтой MenuToggle.js файлыг үүсгэе. MenuToggle функц ердийн icon буцаана. i тегээр үзүүлэх icon нд cls массиваар тодорхойлогдсон классуудыг join аргаар хоосон зайгаар тусгаарлагдсан мөрд шилжүүлэн className атрибутийн утга болгон өгсөн. Дүрс дээр даралт хийхэд дуудагдах onToggle функц компонентод props -оор дамжин ирнэ. cls массивт MenuToggle.module.css файлд тодорхойлогдсон MenuToggle классийг агуулна. MenuToggle функцээс icon фонтоор хэвжүүлсэн icon буцан ирэх учраас fa классийг агуулах ёстой. Үүний зэрэгцээ компонентод props -оор дамжин ирэх цэс нээлттэй эсэхийг тодорхойлох isOpen параметрээс хамааран cls массивт icon -ий нэрүүд солигдоно. Хэрвээ цэс нээлттэй бол cls массивт MenuToggle.module.css файлд тодорхойлогдсон open классийг нэмэн өгнө.
Компонентийн хэвжүүлэлтийн MenuToggle.module.css файлыг үүсгээд доорх
.MenuToggle {
position: fixed;
top: 40px;
left: 40px;
font-size: 20px;
cursor: pointer;
color: #fff;
transition: opacity, left 0.22s ease-in;
z-index: 100;
}
.MenuToggle:hover {
opacity: 0.7;
}
.MenuToggle.open {
left: 320px;
}классуудыг тодорхойльё.
Удирдах цэсийг нээх болон хаах MenuToggle компонентийг дуудах хамгийн боломжтой компонент бол төслийн hoc хавтас доторх Layout компонент юм. Иймээс Layout компонентийн кодийг
import { useState } from "react"
import MenuToggle from "../../components/Navigation/MenuToggle/MenuToggle"
import classes from "./Layout.module.css";
const Layout = ({children}) => {
const [menu, setMenu] = useState(false)
const toggleMenuHandle = () => {
setMenu(prev => {
return !prev
})
}
return (
<div className={classes.Layout}>
<MenuToggle onToggle={toggleMenuHandle} isOpen={menu} />
<main>
{children}
</main>
</div>
)
}
export default Layout;>/pre>болгон өөрчилье. Компонентод MenuToggle компонентийг импортлоод товчийг сорилго компонентийн дээр оруулан ирсэн. MenuToggle компонентод onToggle, isOpen атрибутуудыг дамжуулах ёстой тул компонентод цэс харагдах эсэхийг тодорхойлох false анхдагч утгатай төлөвийн menu хувьсагчийг үүсгэсэн. onToggle шинжийн утгаар toggleMenuHandle аргыг дамжуулсан. toggleMenuHandle арга цэс харагдах эсэхийг тодорхойлох menu талбарын утгыг сэлгэнэ. Өөрөөр хэлбэл false -оос true эсхүл true -гээс false болгоно. Өөрчлөлтийг хадгалаад хөтөч дээр хуудсаа харвал
menu талбар анхдагчаар false утгатай тул fa-bars иконийг харуулна. Икон дээр даралт хийвэл fa-times икон болон өөрчлөгдөхийн дээр дүрс аажмаар шилжинэ. Програмийн ажиллагааг шалган үзээрэй.
илэрхийллийг хялбарчил.