@accelint/design-toolkit
Version:
An open-source component library to serve as part of the entire ecosystem of UX for Accelint.
68 lines (65 loc) • 2.03 kB
TypeScript
import * as react_jsx_runtime from 'react/jsx-runtime';
import { SidenavProps } from './types.js';
import '@accelint/bus';
import '@accelint/core';
import 'react';
import 'react-aria-components';
import './events.js';
/**
* Sidenav - Collapsible side navigation panel
*
* Provides a hierarchical collapsible side navigation intended to be used
* inside a DrawerLayout. Supports headers, avatars, nested menus, and items.
*
* @example
* <DrawerLayout push="left">
* <DrawerLayoutMain className="col-start-2">
* <SidenavTrigger>
* <Button variant="icon" size="large">
* <Icon>
* <MenuIcon />
* </Icon>
* </Button>
* </SidenavTrigger>
* </DrawerLayoutMain>
* <Sidenav>
* <SidenavHeader>
* <SidenavAvatar>
* <Icon><AppLogo /></Icon>
* <Heading>Application Header</Heading>
* <Text>subheader</Text>
* </SidenavAvatar>
* </SidenavHeader>
* <SidenavContent>
* <Heading>Navigation</Heading>
* <SidenavItem>
* <Icon><HomeIcon /></Icon>
* <Text>Home</Text>
* </SidenavItem>
* <Divider />
* <SidenavItem isSelected>
* <Icon><SettingsIcon /></Icon>
* <Text>Settings</Text>
* </SidenavItem>
* <Divider />
* <SidenavMenu title="More Options" icon={<Icon><MenuIcon /></Icon>}>
* <SidenavMenuItem>
* <Text>Sub Item 1</Text>
* </SidenavMenuItem>
* <SidenavMenuItem>
* <Text>Sub Item 2</Text>
* </SidenavMenuItem>
* </SidenavMenu>
* </SidenavContent>
* <SidenavFooter>
* <SidenavAvatar>
* <Icon><UserIcon /></Icon>
* <Heading>User Name</Heading>
* <Text>john@example.com</Text>
* </SidenavAvatar>
* </SidenavFooter>
* </Sidenav>
* </DrawerLayout>
*/
declare function Sidenav({ id, className, isHiddenWhenClosed, children, ...rest }: SidenavProps): react_jsx_runtime.JSX.Element | null;
export { Sidenav };