diff --git a/.changeset/loud-berries-count.md b/.changeset/loud-berries-count.md new file mode 100644 index 0000000000..bd15ae1c32 --- /dev/null +++ b/.changeset/loud-berries-count.md @@ -0,0 +1,6 @@ +--- +'@twilio-paste/sidebar': minor +'@twilio-paste/core': minor +--- + +[Sidebar] Improved ability to place children, like badges, inside a navigation item and have it positioned nicely by default diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts index b002097313..425c3ec1dc 100644 --- a/cypress/integration/sitemap-vrt/constants.ts +++ b/cypress/integration/sitemap-vrt/constants.ts @@ -70,6 +70,7 @@ export const SITEMAP = [ '/components/select/', '/components/separator/', '/components/sidebar/', + '/components/sidebar-navigation/', '/components/stack/', '/components/status-badge/', '/components/status-menu/', diff --git a/packages/paste-core/components/sidebar/src/navigation/SidebarNavigationItem.tsx b/packages/paste-core/components/sidebar/src/navigation/SidebarNavigationItem.tsx index b72d89edf1..076f8cda76 100644 --- a/packages/paste-core/components/sidebar/src/navigation/SidebarNavigationItem.tsx +++ b/packages/paste-core/components/sidebar/src/navigation/SidebarNavigationItem.tsx @@ -70,13 +70,19 @@ const SidebarNavigationItem = React.forwardRef - - {icon} - + {icon && ( + + {icon} + + )} { Settings - + Addons Beta Navigation Item diff --git a/packages/paste-core/components/sidebar/stories/full-composition/flex.stories.tsx b/packages/paste-core/components/sidebar/stories/full-composition/flex.stories.tsx index 7e69dd3a81..50381d50a8 100644 --- a/packages/paste-core/components/sidebar/stories/full-composition/flex.stories.tsx +++ b/packages/paste-core/components/sidebar/stories/full-composition/flex.stories.tsx @@ -42,7 +42,6 @@ export const Flex: StoryFn = () => { return ( - {/* Can be placed anywhere - position fixed */} @@ -100,7 +99,6 @@ export const Flex: StoryFn = () => { - {/* Must wrap content area */} diff --git a/packages/paste-core/components/sidebar/stories/navigation.stories.tsx b/packages/paste-core/components/sidebar/stories/navigation.stories.tsx index 19c682ddfc..67b65db481 100644 --- a/packages/paste-core/components/sidebar/stories/navigation.stories.tsx +++ b/packages/paste-core/components/sidebar/stories/navigation.stories.tsx @@ -9,6 +9,18 @@ import {useUID} from '@twilio-paste/uid-library'; // import {Tabs, TabList, Tab, TabPanels, TabPanel} from '@twilio-paste/tabs'; import {Menu, MenuButton, MenuItem, MenuSeparator, useMenuState} from '@twilio-paste/menu'; import {ProductContactCenterTasksIcon} from '@twilio-paste/icons/esm/ProductContactCenterTasksIcon'; +import {ProductContactCenterAdminIcon} from '@twilio-paste/icons/esm/ProductContactCenterAdminIcon'; +import {ProductContactCenterTeamsIcon} from '@twilio-paste/icons/esm/ProductContactCenterTeamsIcon'; +import {ProductPrivacyIcon} from '@twilio-paste/icons/esm/ProductPrivacyIcon'; +import {ProductUsageIcon} from '@twilio-paste/icons/esm/ProductUsageIcon'; +import {ProductContactCenterQueuesIcon} from '@twilio-paste/icons/esm/ProductContactCenterQueuesIcon'; +import {ProductSegmentIcon} from '@twilio-paste/icons/esm/ProductSegmentIcon'; +import {ProductHomeIcon} from '@twilio-paste/icons/esm/ProductHomeIcon'; +import {ProductConnectionsIcon} from '@twilio-paste/icons/esm/ProductConnectionsIcon'; +import {ProductReverseETLIcon} from '@twilio-paste/icons/esm/ProductReverseETLIcon'; +import {ProductProtocolsIcon} from '@twilio-paste/icons/esm/ProductProtocolsIcon'; +import {ProductSettingsIcon} from '@twilio-paste/icons/esm/ProductSettingsIcon'; +import {ProductEngageIcon} from '@twilio-paste/icons/esm/ProductEngageIcon'; import {MoreIcon} from '@twilio-paste/icons/esm/MoreIcon'; import { @@ -28,8 +40,9 @@ import { SidebarNavigationDisclosureContent, SidebarNavigationItem, useSidebarNavigationDisclosureState, + type SidebarNavigationDisclosureInitialState, + type SidebarNavigationDisclosureStateReturn, } from '../src'; -import type {SidebarNavigationDisclosureInitialState, SidebarNavigationDisclosureStateReturn} from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -73,6 +86,12 @@ export const Default: StoryFn = () => { > Go to Google.com + } + > + Include children Beta + { Go to Google.com Navigation Item + + Include children Beta + @@ -497,3 +519,191 @@ export const StateHookDisclosure: StoryFn = () => { StateHookDisclosure.parameters = { padding: false, }; + +export const FlexExample: StoryFn = () => { + const id = useUID(); + const [overlaySidebarExpanded, setOverlaySidebarExpanded] = React.useState(false); + + return ( + /* eslint-disable react/jsx-max-depth */ + + + + + + + Twilio Flex + + + + } + > + Admin + + } + > + Agent dashboard + + } + > + Teams view + + } + > + Queue stats + + } + > + Privacy + + } + > + Insights + + + + + setOverlaySidebarExpanded(!overlaySidebarExpanded)} + i18nCollapseLabel="Close sidebar" + i18nExpandLabel="Open sidebar" + /> + + + + + + + + + + ); + /* eslint-enable react/jsx-max-depth */ +}; +FlexExample.parameters = { + padding: false, +}; + +export const SegmentExample: StoryFn = () => { + const id = useUID(); + const [pushSidebarCollapsed, setPushSidebarCollapsed] = React.useState(false); + + return ( + /* eslint-disable react/jsx-max-depth */ + + + + + + + Twilio Segment + + + + }> + Home + + + + } selected> + Connections + + + + + Overview + + + + + + }> + Reverse ETL + + Beta + + + Overview + + + + + }> + Privacy + + + + Overview + + + + + }> + Protocols + + + + Overview + + + + + }> + Enagage + + + + Overview + + + + + }> + Settings + + + + Overview + + + + + + setPushSidebarCollapsed(!pushSidebarCollapsed)} + i18nCollapseLabel="Close sidebar" + i18nExpandLabel="Open sidebar" + /> + + + + {/* Must wrap content area */} + + + + + + + ); + /* eslint-enable react/jsx-max-depth */ +}; +SegmentExample.parameters = { + padding: false, +}; diff --git a/packages/paste-website/src/component-examples/SidebarNavigationExamples.ts b/packages/paste-website/src/component-examples/SidebarNavigationExamples.ts new file mode 100644 index 0000000000..31881352c0 --- /dev/null +++ b/packages/paste-website/src/component-examples/SidebarNavigationExamples.ts @@ -0,0 +1,104 @@ +export const navigationActions = ` +const SidebarNavigationExample = () => { + const menu = useMenuState(); + const menuLookup = useMenuState(); + return ( + + + + + + } selected> + Messaging + + + + + + {}}> + Unpin from sidebar + + + Go to docs + + + + + Overview + + + + + }> + Lookup + + {}}>Beta + + + + + {}}> + Unpin from sidebar + + + Go to docs + + + + + Lookup a phone number + + + + + + ) +} +render( + +) +`.trim(); + +export const navigationStateHook = ` +const SidebarNavigationStateHookExample = () => { + const messagingDisclosure = useSidebarNavigationDisclosureState(); + const lookupDisclosure = useSidebarNavigationDisclosureState(); + return ( + <> + + + + + + + + + + } selected> + Messaging + + + + Overview + + + + + }> + Lookup + + + + Lookup a phone number + + + + + + + ) +} +render( + +) +`.trim(); diff --git a/packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx b/packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx index 10263feccf..56965670ce 100644 --- a/packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx +++ b/packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx @@ -360,7 +360,7 @@ const SidebarNavigation = (): JSX.Element => { } > - Sidebar + Sidebar Container Sidebar Navigation diff --git a/packages/paste-website/src/pages/components/screen-reader-only/index.mdx b/packages/paste-website/src/pages/components/screen-reader-only/index.mdx index 4ecebc06ad..7c955b2f6f 100644 --- a/packages/paste-website/src/pages/components/screen-reader-only/index.mdx +++ b/packages/paste-website/src/pages/components/screen-reader-only/index.mdx @@ -67,7 +67,7 @@ When wrapped with the Screen Reader Only component, content is visually hidden b ### Providing visually hidden headings to sectioned content -All sectioning elements, such as Cards, should contain a heading to provide a clear document outline and form of navigation to assistive technology users. However, there may be times a heading is not required (or even redundant) in a particular UI for sighted users. By using the Screen Reader Only component you can provide a visually hidden heading to give additional context and heirarchy. In the example below, we've added "Flex" as a heading that is accessible to assistive technology, but hidden visually. +All sectioning elements, such as Cards, should contain a heading to provide a clear document outline and form of navigation to assistive technology users. However, there may be times a heading is not required (or even redundant) in a particular UI for sighted users. By using the Screen Reader Only component you can provide a visually hidden heading to give additional context and hierarchy. In the example below, we've added "Flex" as a heading that is accessible to assistive technology, but hidden visually. {` diff --git a/packages/paste-website/src/pages/components/sidebar-navigation/index.mdx b/packages/paste-website/src/pages/components/sidebar-navigation/index.mdx new file mode 100644 index 0000000000..b14ccdde6c --- /dev/null +++ b/packages/paste-website/src/pages/components/sidebar-navigation/index.mdx @@ -0,0 +1,849 @@ +export const meta = { + title: 'Sidebar Navigation', + package: '@twilio-paste/sidebar', + description: + "Sidebar Navigation controls both flat and hierarchical navigation structures within an application's sidebar.", + slug: '/components/sidebar-navigation/', +}; + +import {Box} from '@twilio-paste/box'; +import {Anchor} from '@twilio-paste/anchor'; +import {Button} from '@twilio-paste/button'; +import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; +import {ProductFlexIcon} from '@twilio-paste/icons/esm/ProductFlexIcon'; +import {ProductHomeIcon} from '@twilio-paste/icons/esm/ProductHomeIcon'; +import {ProductConnectionsIcon} from '@twilio-paste/icons/esm/ProductConnectionsIcon'; +import {ProductReverseETLIcon} from '@twilio-paste/icons/esm/ProductReverseETLIcon'; +import {ProductPrivacyIcon} from '@twilio-paste/icons/esm/ProductPrivacyIcon'; +import {ProductProtocolsIcon} from '@twilio-paste/icons/esm/ProductProtocolsIcon'; +import {ProductEngageIcon} from '@twilio-paste/icons/esm/ProductEngageIcon'; +import {ProductSettingsIcon} from '@twilio-paste/icons/esm/ProductSettingsIcon'; +import {ProductContactCenterAdminIcon} from '@twilio-paste/icons/esm/ProductContactCenterAdminIcon'; +import {ProductContactCenterTasksIcon} from '@twilio-paste/icons/esm/ProductContactCenterTasksIcon'; +import {ProductContactCenterTeamsIcon} from '@twilio-paste/icons/esm/ProductContactCenterTeamsIcon'; +import {ProductContactCenterQueuesIcon} from '@twilio-paste/icons/esm/ProductContactCenterQueuesIcon'; +import {ProductUsageIcon} from '@twilio-paste/icons/esm/ProductUsageIcon'; +import {ProductMessagingIcon} from '@twilio-paste/icons/esm/ProductMessagingIcon'; +import {ProductVideoIcon} from '@twilio-paste/icons/esm/ProductVideoIcon'; +import {ProductLookupIcon} from '@twilio-paste/icons/esm/ProductLookupIcon'; +import {PlusIcon} from '@twilio-paste/icons/esm/PlusIcon'; +import {MoreIcon} from '@twilio-paste/icons/esm/MoreIcon'; +import {Menu, MenuButton, MenuItem, useMenuState} from '@twilio-paste/menu'; +import { + SidebarBody, + SidebarHeader, + SidebarBetaBadge, + SidebarHeaderLabel, + SidebarHeaderIconButton, + SidebarFooter, + SidebarCollapseButton, + SidebarNavigation, + SidebarNavigationItem, + SidebarNavigationDisclosure, + SidebarNavigationDisclosureHeading, + SidebarNavigationDisclosureHeadingWrapper, + SidebarNavigationDisclosureContent, + SidebarNavigationSeparator, + useSidebarNavigationDisclosureState, +} from '@twilio-paste/sidebar'; +import Changelog from '@twilio-paste/sidebar/CHANGELOG.md'; + +import {SidebarCategoryRoutes} from '../../../constants'; +import packageJson from '@twilio-paste/sidebar/package.json'; +import DefaultLayout from '../../../layouts/DefaultLayout'; +import {getFeature, getNavigationData} from '../../../utils/api'; +import {navigationActions, navigationStateHook} from '../../../component-examples/SidebarNavigationExamples.ts'; + +export default DefaultLayout; + +export const getStaticProps = async () => { + const navigationData = await getNavigationData(); + const feature = await getFeature('Sidebar'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + }, + }; +}; + + + +--- + + + + + + + + + {` + + + }> + Home + + + + } selected> + Connections + + + + + Overview + + + + + + }> + Reverse ETL + + Beta + + + Overview + + + + + }> + Privacy + + + + Overview + + + + + }> + Protocols + + + + Overview + + + + + }> + Enagage + + + + Overview + + + + + }> + Settings + + + + Overview + + + + +`} + + +## Guidelines + +### About Sidebar Navigation + +Sidebar Navigation controls both flat and hierarchical navigation structures within an application's sidebar. The navigation components are presentational and can be used to create navigation structures ranging from simple lists to complex, deeply nested structures. + +We recommend limiting the nesting depth to 3 levels. For navigation beyond this depth, consider also using the [In-page Navigation](/components/in-page-navigation). + +### Accessibility + +Nested sidebar navigation uses the [ARIA Disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/). + +- Additional controls or actions should be placed as siblings to each `SidebarNavigationItem` in the navigation, not nested within. +- Every `SidebarNavigationItem` must implement an anchor element by assigning a valid URL to the `href` attribute. +- A `selected` `SidebarNavigationItem` is designated as the "current page" via `aria-current="page"`. + +## Examples + +### Flat + +In its most basic form, Sidebar Navigation can be used to create a flat list of navigation items. This is ideal for smaller applications or single-product use cases. + +Each `SidebarNavigationItem` should be provided with an `href`, a valid URL that the user will navigate to upon interaction. This facilitates opening links in new tabs via CMD/CTRL + clicking or right-clicking on the item, ensuring proper keyboard navigation for keyboard-only users. + +The `SidebarNavigationItem` can be decorated with an icon by setting the icon property value to any valid [Paste Icon](/components/icons). + +To indicate the current page, the `selected` property should be set on the item that represents the user's current location in the application. + + + {` + + + } + > + Admin + + } + > + Agent dashboard + + } + > + Teams view + + } + > + Queue stats + + } + > + Privacy + + } + > + Insights + + + +`} + + +### Hierarchical + +Sidebar Navigation also supports hierarchical information architectures with nested navigation items. You can establish "groups" of navigation sections by using `SidebarNavigationSeparator` between groups of items. + +Each `SidebarNavigationDisclosure` pairs a heading with its content. `SidebarNavigationDisclosureHeading` accepts a string as content, which describes the navigation items beneath it in the hierarchy. It should not contain clickable actions. For additional actions associated with a parent navigation item, refer to the [Navigation item actions](#navigation-item-actions) section below. + +The `icon` and `selected` properties from `SidebarNavigationItem` can be used on the `SidebarNavigationDisclosureHeading` to display an icon and indicate the user's current section. When implementing multiple levels of navigation, ensure each `selected` parent item is displayed down the navigation tree. For instance, in the example below, I can see that I am currently on the "Send a Whatsapp message" item, which is a child page of "Try it out" and "Messaging". + +`SidebarNavigationItems` are listed in the `SidebarNavigationDisclosureContent` and are displayed when the disclosure is expanded using the `SidebarNavigationDisclosureHeading`. + +When creating a hierarchical navigation structure, ensure the `SidebarNavigation` component's `hierarchical` property is set, as it provides additional context for children placed within. + + + {` + + + + + } selected> + Messaging + + + + Overview + + + Try it out + + + Send an SMS + + Send a Whatsapp message + + + + Services + + + Senders + + + Addons + Navigation Item + Navigation Item + + + + + Settings + + + + Addons + + Navigation Item + Navigation Item + + + + + + + }> + Lookup + + + + Lookup a phone number + + + + + + }> + Video + + + + Overview + + + + +`} + + +### Mixed + +There may be situations where a combination of simple flat structures and nested pages is necessary. The components provided by Sidebar Navigation allow for easy, flexible composition to suit your navigation needs. Pair `SidebarNavigationItems` with `SidebarNavigationDisclosures` to create this form of navigation structure. + +When mixing, you **must** ensure `hierarchical` is set on `SidebarNavigation` to achieve correct indentation. + + + {` + + + }> + Home + + + + } selected> + Connections + + + + + Overview + + + + }> + Reverse ETL Beta + + + + }> + Privacy + + + + Overview + + + + +`} + + +## Composition notes + +### Handling a collapsing Sidebar + +When using a flat navigation list and a `compact` Sidebar variant, only the icons remain visible when the Sidebar collapses. In this situation, ensure the navigation item icons have a title and are not decorative to maintain accessible names for collapsed navigation items. + + + + + + + Twilio Flex + + + + } + > + Admin + + } + > + Agent dashboard + + } + > + Teams view + + } + > + Queue stats + + } + > + Privacy + + } + > + Insights + + + +`} +/> + +If you are using a collapsible, compact sidebar and decide to hide the navigation items completely when collapsed, remember to set `hideItemsOnCollapse` on `SidebarNavigation`. + +Regardless of the situation, Sidebar Navigation Disclosures will always be hidden in a collapsed Sidebar. + + + + + + + Twilio Segment + + + + }> + Home + + + + } selected> + Connections + + + + + Overview + + + + + + }> + Reverse ETL + + Beta + + + Overview + + + + + }> + Privacy + + + + Overview + + + + + }> + Protocols + + + + Overview + + + + + }> + Enagage + + + + Overview + + + + + }> + Settings + + + + Overview + + + + + + setPushSidebarCollapsed(!pushSidebarCollapsed)} + i18nCollapseLabel="Close sidebar" + i18nExpandLabel="Open sidebar" + /> + +`} +/> + +### Navigation item actions + +There may be instances where a navigation item has some additional information or an action that a user can take, other than navigating to, or showing and hiding child pages. In such cases, these actions should be placed as siblings to the navigation items or disclosure headings. Nesting actionable UI elements can make them undiscoverable for assistive technology users. + +Only parent `SidebarNavigationDisclosure` items can have associated actions. These actions should be placed as siblings to the `SidebarNavigationDisclosureHeading`, inside the `SidebarNavigationDisclosureHeadingWrapper`. Alignment will be handled automatically. + + + {navigationActions} + + +### State hooks + +State hooks allow you to integrate the disclosure state with your application state and functionality. This can be particularly useful if your application is controlled via a central state management library like Redux, or if actions within the application control how the navigation is displayed beyond the user's interaction with it. + +In the simple example below, you can control the expanded state of each disclosure without the user interacting with it. + +For more information on using the disclosure state hook, refer to the [Disclosure component docs](/components/disclosure#using-state-hooks) and [Disclosure Primitive docs](/primitives/disclosure-primitive) + + + {navigationStateHook} + + +## Usage Guide + +### API + +#### Installation + +```bash +yarn add @twilio-paste/sidebar - or - yarn add @twilio-paste/core +``` + +#### Usage + +```jsx +import { + Sidebar, + SidebarOverlayContentWrapper, + SidebarBody, + SidebarHeader, + SidebarHeaderLabel, + SidebarHeaderIconButton, + SidebarFooter, + SidebarCollapseButton, + SidebarNavigation, + SidebarNavigationItem, + SidebarNavigationDisclosure, + SidebarNavigationDisclosureHeading, + SidebarNavigationDisclosureHeadingWrapper, + SidebarNavigationDisclosureContent, +} from '@twilio-paste/core/sidebar'; + +const SideModalExample: React.FC = () => { + const [overlaySidebarExpanded, setOverlaySidebarExpanded] = React.useState(true); + return ( + + + + + + + Twilio Flex + + + + } + > + Admin + + } + > + Agent dashboard + + } + > + Teams view + + } + > + Queue stats + + } + > + Privacy + + } + > + Insights + + + + + setOverlaySidebarExpanded(!overlaySidebarExpanded)} + i18nCollapseLabel="Close sidebar" + i18nExpandLabel="Open sidebar" + /> + + + + + + + + + + ); +}; +``` + +#### Props + +##### SidebarNavigation + +| Prop | Type | Description | Default | +| ---------------------- | ----------------- | ----------------------------------------------------------------------------------------- | ---------------------- | +| `element?` | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `'SIDEBAR_NAVIGATION'` | +| `children?` | `React.ReactNode` | | | +| `hideItemsOnCollapse?` | `boolean` | Set whether you would like the navigation item to hide when in a collapsed sidebar | | +| `hierarchical?` | `boolean` | Set whether you are displaying an hierarchical navigation structure. | | + +##### SidebarNavigationItem + +| Prop | Type | Description | Default | +| ----------- | ----------------- | ----------------------------------------------------------------------------------------- | --------------------------- | +| `element?` | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `'SIDEBAR_NAVIGATION_ITEM'` | +| `children?` | `React.ReactNode` | | | +| `href` | `string` | String for the url to link to. | | +| `selected` | `boolean` | Set to indicate this item matches to the current page the user is on | | +| `icon` | `React.ReactNode` | Any product icons can be used here | | + +##### SidebarNavigationDisclosure + +| Prop | Type | Description | Default | +| ----------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------- | +| `element?` | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `'SIDEBAR_NAVIGATION_DISCLOSURE'` | +| `children?` | `React.ReactNode` | | | +| `baseId?` | `string` | Base ID string to base subsequent, dynamic IDs on | | +| `visible?` | `boolean` | Set the initial visibility of the Disclosure | `false` | +| `state?` | `object` | Ability to control the disclosure by passing in the returned values from the `useSidebarNavigationDisclosureState` hook | | + +##### SidebarNavigationDisclosureHeadingWrapper + +| Prop | Type | Description | Default | +| ----------- | ----------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------- | +| `element?` | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `'SIDEBAR_NAVIGATION_DISCLOSURE_HEADING_WRAPPER'` | +| `children?` | `React.ReactNode` | | | + +##### SidebarNavigationDisclosureHeading + +| Prop | Type | Description | Default | +| ------------ | ----------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------- | +| `element?` | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `'SIDEBAR_NAVIGATION_DISCLOSURE_HEADING'` | +| `children?` | `React.ReactNode` | | | +| `disabled?` | `boolean` | Set to disable the ability to expand the Navigation section | | +| `focusable?` | `boolean` | Set to control the focusability of the Navigation Heading | | +| `selected?` | `boolean` | Set to make the Heading part of the selected page hierarchy | | +| `icon?` | `React.ReactNode` | Icon to be displayed within the Heading | | + +##### SidebarNavigationDisclosureContent + +| Prop | Type | Description | Default | +| ----------- | ----------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------- | +| `element?` | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `'SIDEBAR_NAVIGATION_DISCLOSURE_CONTENT'` | +| `children?` | `React.ReactNode` | | | + +##### SidebarNavigationSeparator + +| Prop | Type | Description | Default | +| ---------- | -------- | ----------------------------------------------------------------------------------------- | -------------------------------- | +| `element?` | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `'SIDEBAR_NAVIGATION_SEPARATOR'` | + +##### useSidebarNavigationDisclosureState + +Pass these as part of an object to the hook. + +| Prop | Type | Description | Default | +| ---------- | --------- | ------------------------------------------------------------- | ------- | +| `baseId?` | `string` | Set to create a base ID that all dynamic IDs will be based on | | +| `visible?` | `boolean` | Set the initial visibility of the Disclosure | | + +##### useSidebarNavigationDisclosureState Return props + +These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. + +| Prop | Type | Description | Default | +| ---------- | ------------ | --------------------------------------------------- | ------- | +| `baseId?` | `string` | ID that will serve as a base for all the items IDs. | | +| `visible?` | `boolean` | Whether it's visible or not | | +| `toggle?` | `() => void` | Toggles the visible state | | + + + + + + + +