Hino_Thamrin/components/MainWebsite/Header.js

import React, { useState } from "react";
import { Link as LinkScroll} from 'react-scroll'
import Link from 'next/link';

const Header = ({sticky,isHome}) => {
    isHome = (isHome == null)?true:isHome;
    const [menu, setMenu] = React.useState(true)

    const toggleNavbar = () => {
        setMenu(!menu)
    }

    React.useEffect(() => {
        let elementId = document.getElementById("header");
        if(!(sticky||false)){
            document.addEventListener("scroll", () => {
                if (window.scrollY > 170) {
                    elementId.classList.add("is-sticky");
                } else {
                    elementId.classList.remove("is-sticky");
                }
            });
        }
        else{
            elementId.classList.add("is-sticky");
        }
        window.scrollTo(0, 0);
    })

    const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show';
    const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right';

    return (
        <header id="header" className="headroom navbar-color-white navbar-style-four">
            <div className="startp-nav">
                <div className="container">
                    <nav className="navbar navbar-expand-md navbar-light">
                        {
                            (isHome)
                            ?(
                                <LinkScroll href="/#" to="home" spy={true} smooth={true}>
                                    <img src="/images/TBG-Home/Blue.png" width="250px" alt="logo" />
                                </LinkScroll> 
                            )
                            :(
                                <Link href="/">
                                    <a><img src="/images/TBG-Home/Blue.png" width="250px" alt="logo" /></a>
                                </Link> 
                            )
                        }
                        <button
                            onClick={toggleNavbar}
                            className={classTwo}
                            type="button"
                            data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false"
                            aria-label="Toggle navigation"
                        >
                            <span className="icon-bar top-bar"></span>
                            <span className="icon-bar middle-bar"></span>
                            <span className="icon-bar bottom-bar"></span>
                        </button>

                        <div className={classOne} id="navbarSupportedContent">
                            <ul className="navbar-nav ms-auto">
                            {
                                (isHome)
                                ?(
                                    <>
                                        <li className="nav-item">
                                            <LinkScroll href="/#" to="home" spy={true} smooth={true}>
                                                <a onClick={e => e.preventDefault()} className="nav-link">
                                                    Home
                                                </a>
                                            </LinkScroll>
                                        </li>

                                        <li className="nav-item">
                                            <LinkScroll offset={-100} href="/#" to="business_partner" spy={true} smooth={true}>
                                                <a onClick={e => e.preventDefault()} className="nav-link">
                                                    Business Partner
                                                </a>
                                            </LinkScroll>
                                        </li>

                                        <li className="nav-item">
                                            <LinkScroll offset={-100} href="/#" to="industri" spy={true} smooth={true}>
                                                <a onClick={e => e.preventDefault()} className="nav-link">
                                                    Industri We Serve
                                                </a>
                                            </LinkScroll>
                                        </li>

                                        <li className="nav-item">
                                            <LinkScroll offset={-100} href="/#" to="gallery" spy={true} smooth={true}>
                                                <a onClick={e => e.preventDefault()} className="nav-link">
                                                    Gallery
                                                </a>
                                            </LinkScroll>
                                        </li>

                                        <li className="nav-item">
                                            <LinkScroll offset={-100} href="/#" to="subscribe" spy={true} smooth={true}>
                                                <a onClick={e => e.preventDefault()} className="nav-link">
                                                    Subscribe
                                                </a>
                                            </LinkScroll>
                                        </li>
                                    </>
                                )
                                :(
                                    <>
                                        <li className="nav-item">
                                            <Link href={{
                                                pathname: '/',
                                                query: { s: 'home' },
                                            }}>
                                                    Homes
                                            </Link>
                                        </li>

                                        <li className="nav-item">
                                            <Link href={{
                                                pathname: '/',
                                                query: { s: 'business_partner' },
                                            }}>
                                                    Business Partner
                                            </Link>
                                        </li>

                                        <li className="nav-item">
                                            <Link href={{
                                                pathname: '/',
                                                query: { s: 'industri' },
                                            }}>
                                                    Industri We Serve
                                            </Link>
                                        </li>

                                        <li className="nav-item">
                                            <Link href={{
                                                pathname: '/',
                                                query: { s: 'gallery' },
                                            }}>
                                                    Gallery
                                            </Link>
                                        </li>

                                        <li className="nav-item">
                                            <Link href={{
                                                pathname: '/',
                                                query: { s: 'subscribe' },
                                            }}>
                                                    Subscribe
                                            </Link>
                                        </li>
                                    </>
                                )
                            }
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </header>
    );
}

export default Header;