@octopusdeploy/design-system-components/dist/src/components/GlobalLayout/SideNavBar.d.ts

The design systems component library.

import type { MouseEventHandler } from "react";
import type React from "react";
import type { DesignSystemLinkHref, ShowLinkAsActive } from "../../routing/OctopusRoutingContext";
import type { SideNavBarButtonTabAriaAttributes } from "./SideNavBarIconButtonTab";
import { SideNavBarIconButtonTab } from "./SideNavBarIconButtonTab";
interface SharedSideNavBarTabLink {
    /**
     * The type of vertical menu item.
     */
    type: "link";
    /**
     * The icon for this link.
     */
    icon: React.ReactNode;
    /**
     * The link location.
     */
    href: DesignSystemLinkHref;
    /**
     * Controls when this link is shown as active.
     */
    showLinkAsActive?: ShowLinkAsActive;
    /**
     * Controls the visibility of this link.
     */
    isVisible?: boolean;
}
interface SideNavBarTabLinkIconOnly extends SharedSideNavBarTabLink {
    /**
     * The required accessible name for this icon link.
     */
    accessibleName: string;
}
interface SideNavBarTabLinkIconWithLabel extends SharedSideNavBarTabLink {
    /**
     * An optional accessible name for this icon link. If no accessible name is provided the label will be used.
     */
    accessibleName?: string;
    /**
     * The label for this icon link.
     */
    label: string;
}
export type SideNavBarTabLink = SideNavBarTabLinkIconOnly | SideNavBarTabLinkIconWithLabel;
type SideNavBarCustomItem = {
    /**
     * The type of vertical menu item.
     */
    type: "custom";
    /**
     * A locally unique identifier for the custom item.
     */
    key: string;
    /**
     * A custom react element to use for the item.
     */
    content: React.ReactElement;
};
type SideNavBarIconButtonTab = {
    /**
     * The type of vertical menu item.
     */
    type: "icon-button";
    /**
     * An accessible name for the icon button.
     */
    accessibleName: string;
    /**
     * The icon to use for the icon button.
     */
    icon: React.ReactNode;
    /**
     * The onClick handler associated with the icon button.
     */
    onClick?: MouseEventHandler<Element>;
    /**
     * Additional ARIA menu attributes which can be attached to this icon button if it's
     * being used to show a menu.
     */
    menuAttributes?: SideNavBarButtonTabAriaAttributes;
};
export type SideNavBarItem = SideNavBarTabLink | SideNavBarIconButtonTab | SideNavBarCustomItem;
export type BottomSideNavBarItem = SideNavBarItem;
export type TopSideNavBarItem = SideNavBarTabLinkIconWithLabel;
export type SideNavBarLogo = {
    icon: React.ReactNode;
    href: DesignSystemLinkHref;
    accessibleName: string;
};
export interface SideNavBarProps {
    logo?: SideNavBarLogo;
    topItems: ReadonlyArray<TopSideNavBarItem>;
    bottomItems: ReadonlyArray<BottomSideNavBarItem>;
    onLinkClicked?: SideNavBarTabLinkClickHandler;
    onHoveredLinkChanged?: SideNavBarTabHoveredLinkChangedHandler;
}
export declare function SideNavBar({ logo, topItems, bottomItems, onLinkClicked, onHoveredLinkChanged }: SideNavBarProps): import("react/jsx-runtime").JSX.Element;
type SideNavBarTabLinkClickHandler = (event: React.MouseEvent, item: SideNavBarTabLink) => void;
type SideNavBarTabHoveredLinkChangedHandler = (item: SideNavBarTabLink | undefined) => void;
export {};