UNPKG

@hakit/components

Version:
38 lines 2.5 kB
import { WeatherCardProps, TimeCardProps } from '../..'; export interface MenuItem { /** The title of the menu item */ title: string; /** the description, this will appear below the title */ description?: string; /** the icon name or JSX element, eg <Icon icon="mdi:cross" /> */ icon: React.ReactNode | string; /** the hash name of the menu item, this is optional */ hash?: string; /** if the item is active or not */ active: boolean; /** onClick action to fire when the menu item is clicked */ onClick: (event: React.MouseEvent<HTMLLIElement>) => void; } export interface SidebarCardProps extends React.ComponentProps<"div"> { /** should the time card be included by default @default true */ includeTimeCard?: boolean; /** should the sidebar start opened, True by default if collapsible=false @default true */ startOpen?: boolean; /** Whether the sidebar can be collapsed by the end-user @default true */ collapsible?: boolean; /** the props for the weather card , if omitted, weather card is not rendered @default undefined */ weatherCardProps?: WeatherCardProps; /** Adding menu items can also add routes by default, disabled this if need be @default true */ autoIncludeRoutes?: boolean; /** the props for the timeCard @default { hideIcon: true, hideIcon: true, center: true }*/ timeCardProps?: TimeCardProps; /** the menu items to add to the sidebar @default [] */ menuItems?: MenuItem[]; /** the children to render in the sidebar */ children?: React.ReactNode; /** a method to apply a sort function to the sidebar menu items before they render */ sortSidebarMenuItems?: (a: MenuItem, b: MenuItem) => number; } /** This component is a nice way of organizing components / groups into an easy to navigate sidebar, the "Area Cards" will automatically insert into the sidebar items if they're present on the page, eg if you have 6 AreaCards, all 6 items will be added to the sidebar automatically, you can also add your own menu items to the start of the list, this all needs a bit more thought but for now it is pretty useful! The TimeCard and WeatherCard are integrate and themed slightly different in the sidebar, if the sidebar is present, the AreaCard will only expand to the available space and not cover the sidebar */ export declare function SidebarCard(props: SidebarCardProps): import("@emotion/react/jsx-runtime").JSX.Element; //# sourceMappingURL=index.d.ts.map