/** * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). * * WSO2 LLC. licenses this file to you under the Apache License, * Version 2.0 (the "License"); you may not use this file except * in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. */ import type { ReactNode, ElementType, ForwardRefExoticComponent } from 'react'; import { DrawerProps } from '../Drawer'; import type { NavbarItemProps } from '../NavbarItem'; export type NavbarProps = DrawerProps & { /** * Is the Navbar collapsible. If `true`, a hamburger will be shown. */ collapsible?: boolean; /** * The fill color variant of the Navbar. */ fill?: 'gradient' | 'solid'; /** * Set of Navbar Items. */ items?: NavbarItems[]; /** * Callback to be called when the hamburger is clicked. */ onOpen?: () => void; /** * Navbar toggle icon. * @default */ toggleIcon?: ReactNode; }; export type NavbarItems = { /** * Icon for the item set. */ id?: string; /** * Set of Navbar Items. */ items: NavbarItemProps[]; /** * label for the item set. */ label?: string; }; /** * The Navbar component is used to provide a navigation bar for the application. * * Demos: * * - [Navvar (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-navbar) * * API: * * - inherits [Drawer API](https://mui.com/material-ui/api/drawer/) * * @remarks * - ✨ This is a custom component that is not available in the Material-UI library. * - ✔️ Props of the [Drawer](https://mui.com/material-ui/api/drawer/) component are also available. * - ✅ `component` prop is supported. * - ✅ The `ref` is forwarded to the root element. * * @template C - The type of the component. * @param props - The props for the Navbar component. * @param ref - The ref to be forwarded to the Drawer component. * @returns The rendered Navbar component. */ declare const Navbar: ForwardRefExoticComponent; export default Navbar;