feat: add application layout side navigation components

[huwshimi]

Done

• Add SideNavigation and child components. These components are used by the application layout but can also be a used in other Vanilla layouts.

QA

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

• Open the demo.
• Scroll down to the the SideNavigation docs and check they look OK.

[webteam-app]

Demo

Jenkins

demos.haus

[edlerd]

LGTM, two comments below, none of them are blocking.

One other aspect to think about: Will this be possible to extend for collapsible sections? See the video below for how it looks like. No need to implement this right away, just making sure with the introduced structure we don't make it too hard to extend as a next version of this.

Screencast.from.22.05.2024.10.55.05.webm

[huwshimi]

One other aspect to think about: Will this be possible to extend for collapsible sections? See the video below for how it looks like. No need to implement this right away, just making sure with the introduced structure we don't make it too hard to extend as a next version of this.

I suspect this should probably be a modification in Vanilla that we would then add to react-components.

Right now this is supported in the side nav as you can pass any ReactNode as an item, so you pass in a custom accordion component. For example this is an excerpt from how I handle the side nav accordion in lxd-ui here: https://github.com/canonical/lxd-ui/pull/768/files#diff-0a53ec42b8db78013ad213a9f952a9b25ef65c0ce9ee169bd1b65af00f245607R185

      <SideNavigation<NavLinkProps>
        dark
        items={[
          {
            className: "sidenav-top-ul",
            items: isAuthenticated
              ? [
                  ...
                  {
                    icon: "connected",
                    label: "Networks",
                    onClick: softToggleMenu,
                    title: `Networks (${projectName})`,
                    to: `/ui/project/${projectName}/networks`,
                  },
                  <NavAccordion
                    baseUrl={`/ui/project/${projectName}/storage`}
                    title={`Storage (${projectName})`}
                    iconName="pods"
                    key="storage"
                    label="Storage"
                    onOpen={() => toggleAccordionNav("storage")}
                    open={openNavMenus.includes("storage")}
                  >
                  ...

[github-actions]

🎉 This PR is included in version 0.58.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀