0

I have one vertical navbar. When the width falls below 951 pixels, I take this navbar from the verticalnavbar class and throw it into the nav-links in my navbar class to provide a hamburger view. There is no problem in transferring, but the Link operation does not work correctly after transferring. The transitions are smooth on the first click, while the page reloads on the second click. In addition, the active name that I added to the classname by checking with routher.pathname works only when it is in desktop view. What could be the reason for this?

Vertical Navbar:

function VerticalNavbar({ ...props }) {
const { t } = useTranslation("dashboard");


const router = useRouter()

return (
    <div className="navbar-vertical border-right" id="navbarVertical">
        <div className="container-fluid navbar-vertical-links">
            <ul className="navbar-nav" >
                <li className="nav-item " key="navbarvertical_0">


                    <a className="nav-link navlinkimg text-center justify-content-center " style={{ cursor: "pointer" }} >
                        <Image width={"120px"} height={"130px"} style={{ borderRadius: "50%" }} src={typeof activeuser == 'undefined' || (Array.isArray(activeuser) && !activeuser.length) || activeuser == null ? profileimg : activeuser.profile_img} />
                    </a>


                    <div className="nav-link  justify-content-center" id="name" style={{ cursor: "pointer" }}>
                        <h4 className='text-center'>{activeuser == null || (Array.isArray(activeuser) && !activeuser.length) || typeof activeuser == 'undefined' ? null : activeuser.first_name + " " + activeuser.last_name}</h4>
                    </div>
                </li>
                <li className={router.pathname == "/dashboard" ? "nav-item" + " active" : "nav-item"} key="navbarvertical_1" >
                    <Link href="/dashboard" >
                        <a className={router.pathname == "/dashboard" ? "nav-link" + " active" : "nav-link"} >
                            <FontAwesomeIcon style={{ marginRight: "10px" }} className="fontawesomeicon" icon={faMap}></FontAwesomeIcon> {t("map_header")}
                        </a>
                    </Link>
                </li>
                <li className={router.pathname == "/statistic" ? "nav-item" + " active" : "nav-item"} key="navbarvertical_2"  >
                    <Link href="/statistic">
                        <a className={router.pathname == "/statistic" ? "nav-link" + " active" : "nav-link"} >
                            <FontAwesomeIcon style={{ marginRight: "10px" }} className="fontawesomeicon" icon={faChartColumn}></FontAwesomeIcon> {t("statistic_header")}
                        </a></Link>
                </li>
            </ul>
            <div className='vertical-footer' style={{ position: "fixed", left: "0", bottom: "0", marginLeft: "15px", width: "400px" }}>

                <a style={{ fontSize: "10px", display: "block", width: "400px", marginRight: "10px" }}>Powered By Bewell Technology</a></div>
        </div>

    </div>
);

}

I'm passing the navbar-vertical-links class to the nav-links class in the navbar.

Navbar :

function Navi({ ...props }) {
    const router = useRouter()

    const { t } = useTranslation("navbar")

    return (
        <div>
            <div className="nav border-bottom">
                <input type="checkbox" id="nav-check" />
                <div className='nav-header'>
                    <Image className="nav_logo" width="120px" height="50px" src={logo} onClick={() => router.push("/dashboard")} alt="" />
                </div>
                <div className="nav-btn">
                    <label className='nav-line' htmlFor="nav-check">
                        <span></span>
                        <span></span>
                        <span></span>
                    </label>
                </div>
                <div className="nav-links">
                    <Navlogin />
                    <Navlang />
                </div>


            </div>

        </div>
    );
}

Desktop View works correctly enter image description here

Mobile View not working correctly enter image description here

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Selim Başpınar
  • 11
  • 1
  • Why are you wrapping raw anchor tags in the `Link` component? In other words, why are you nesting a link inside a link? – Drew Reese Oct 24 '22 at 15:30
  • 1
    https://nextjs.org/docs/api-reference/next/link If you look inside this page, you can see that the anchor tag in the Link component. I think it was giving an error when I didn't use a tag in the Link component, if I'm not mistaken. – Selim Başpınar Oct 25 '22 at 06:24
  • I see, never really noticed that in the docs before. Perhaps the next.js `Link` *doesn't* render an anchor tag to the DOM so it's still valid HTML. – Drew Reese Oct 25 '22 at 06:26

0 Answers0