1. Exclude Header/Footer or any Layout from spacific pages:
const pn = usePathname();
if (["/retailer", "/age-get"].includes(pn)) {
return null;
}2. Dynamically change page title:
const pn = usePathname();
let pageTitle =
pn.replace("/", "").charAt(0).toUpperCase() + pn.replace("/", "").slice(1);
const data = [
{ pn: "/blog/", title: "Blog Details" },
{ pn: "/projects/", title: "Project Details" },
{ pn: "/strains/", title: "Strains Details" },
{ pn: "/terms", title: "Terms and Services" },
{ pn: "/privacy", title: "Privacy Policy" },
{ pn: "/career/", title: "Job Details" },
];
data.forEach((item) => {
if (pn.startsWith(item.pn)) {
pageTitle = item.title;
}
});3. BreadCum
let pathName = usePathname();
const usePath = () => {
if (pathName.split("/")[1].includes("-")) {
return pathName.split("/")[1].split("-").join(" ");
} else if (pathName.split("/")[2]) {
return pathName.split("/")[1] + " " + "details";
}
return pathName.split("/")[1];
};
let path = usePath();
if (path === "join our team") {
path = "career";
}4. Parallax: Scroll Background slower
const bg = document.getElementById("bg");
const parallax = () => {
if (bg) {
// bg.style.backgroundPositionY = '{window.scrollY * 0.5}px';
bg.style.backgroundPositionY = 'calc(50% + {window.scrollY * 0.5}px)';
}
};
window.addEventListener("scroll", parallax);5. Container
._container {
max-width: 1440px;
margin: auto;
padding: 0 5%;
}
@media screen and (max-width: 768px) {
._container {
max-width: 100%;
padding: 0 3%;
}
}5. Container
style={{
background: 'linear-gradient(rgba(15, 51, 118, .8),rgba(15, 51, 118, .8)),url($ {bgImg}) no-repeat center center/cover',
}}