Closed huwshimi closed 2 weeks ago
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")}
>
...
:tada: This PR is included in version 0.58.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
Done
QA
Storybook
To see rendered examples of all react-components, run:
QA in your project
from
react-components
run:Install the resulting tarball in your project with:
QA steps