@engie-group/fluid-design-system-react
Version:
Fluid Design System React
72 lines (71 loc) • 1.89 kB
TypeScript
import React from 'react';
import { TBreakPoints } from '../../global';
import { INavbarItemProps } from './NJNavbarItem';
export declare const NJNavbar: React.ForwardRefExoticComponent<INavbarProps & React.RefAttributes<HTMLElement>>;
export interface INavbarProps {
/**
* Set the active item by id
*/
activeItemId?: string;
/**
* Navbar size
*/
size?: 'small' | 'normal';
/**
* Whether the navbar has a shadow or not
*/
hasShadow?: boolean;
/**
* Indicate breakpoint threshold to switch between mobile or desktop navbar
*/
breakpoint?: TBreakPoints;
/**
* Whether the navbar is wrapped by a container or not
*/
hasContainer?: boolean;
/**
* Whether the navbar has a white background or is transparent
*/
isTransparent?: boolean;
/**
* Logo object, customize to replace Engie default logo
*/
logo?: ImageLink;
/**
* NavbarItem
*/
children: React.ReactElement<INavbarItemProps>[];
onClickItem: (itemId: string, event: React.MouseEvent<HTMLAnchorElement>) => void;
/**
* Optional additional className
*/
className?: string;
/**
* Whether the navbar has the search widget or not
*/
hasSearch?: boolean;
/**
* Search widget placeholder
*/
searchPlaceholder?: string;
/**
* Search widget button label
*/
searchButtonLabel?: string;
onSearch?: (search: string, event: React.MouseEvent<HTMLButtonElement>) => void;
}
interface ImageLink {
title?: string;
href: string;
target?: '_blank' | '_self';
/**
* Image Element to replace Engie with your own logo
*/
image?: React.ReactNode;
onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
/**
* add classes to Anchor Element
*/
className?: string;
}
export {};