Forge, CustomUI, PageLayout and SideNavigation

PaoloBolla · February 28, 2023, 6:37pm

I’ve tried to use Atlaskit with PageLayout and SideNavigation but i wasn’t be able to create a LinkItem that works and load the page into Main section.
I’ve tried to use the Router to load the page on Main but with no result.
Does anyone have any working examples? On the net there are only examples of SideNavigation but without working links.

dmorrow · March 1, 2023, 1:59am

Hi @PaoloBolla ,

I think LinkItem is designed for redirecting to another URL while ButtonItem is designed for reacting within the context of your front end.

Here is some code demonstrating LinkItem and ButtonItem. To see the demo, visit https://dx-atlaskit-side-navigation.glitch.me/.

If you are asking something different, can you please provide some code demonstrating what you have and what you are trying to achieve.

Regards,
Dugald

PaoloBolla · March 1, 2023, 8:40am

Thanks Dugald,
i can’t reach the second link, the first is OK.

Meantime I’ve found a solution:

const CustomLink = forwardRef((props: CustomProps) => {
    const navigate = useNavigate()
        const { children, href, ...rest } = props;
        return (
            <a {...rest} onClick={(e) => {
                e.preventDefault();
                navigate(href)
            }}>
                {children}
            </a>
        );
    },
);


 <CustomItem
                                href="/filter"
                                component={CustomLink}
                                iconAfter={<LightbulbIcon label="" />}
                            >Link</CustomItem>

All the link into sidebar must use navigate() to stay into the app and open the link into main section.
I don’t know if is a good or bad solution.

My goal is to open a link into Main section from ButtonItem as the image attached

Regards,
Paolo