MainNavigation hrefs aren't working in first level

[christopherGdynia]

Hi again :D,

I am trying to setup the AppNavigation in the ScaleAppSchell component.

The goal:
I want to click on a first level element and want to perform a page switch.

What I have tried:

 const mainNav = [
    { name: "Home", id: "home", href: "/" },
    { name: "About", id: "about", href: "/about" },
  ];

<ScaleAppShell ... mainNavigation={mainNav}> ...

The component doesnt render the content of the href attribute as defined, but it renders javascript:void(0);

You can see the problem in your default example in storybook

[acstll]

Hi @christopherGdynia, thanks for your question.

I'm assuming from #361 that you're using Next.js, right?

The links inside the Scale header are plain <a> tags, so they won't directly work with client-side routing depending on the framework you're using (some work, some don't).

There is a way to work around this, by providing an onClick prop in the mainNavigation data and handling the routing programmatically using the useRouter hook from Next.js:

Something like this should work (haven't tested it myself):

import { useRouter } from 'next/router'

function NavigationExample({ children, href }) {
  const router = useRouter()

  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
  }
  const mainNav = [
    { name: "Home", id: "home", href: "/", onClick: handleClick },
    { name: "About", id: "about", href: "/about", onClick: handleClick },
  ]

  return (
    <ScaleAppShell mainNavigation={mainNav}>
      {/* ... */}
    </ScaleAppShell>
  )
}

Would you be able to try this out?

[nowseemee]

Hi @christopherGdynia, thanks for reporting this issue - it really seems like the href property is not drilled down to the child component: #363

[nowseemee]

OK, fix is released: 3.0.0-beta.11. Thanks again for raising this issue!

[christopherGdynia]

Thanks for your answers :)

I found this solution, based on your ideas @acstll

  const handleClick = (e: MouseEvent, href: string) => {
    e.preventDefault();
    router.push(href);
  };

const navExample = {
      name: "Search",
      id: "Search41",
      href: "#search",
      onClick: (e: MouseEvent) => handleClick(e, "#search"),
      icon: "action-search",
    };

I will close #361 and link this post.

[acstll]

Amazing, glad to hear.