retro-react/dist/cjs/components/navbar/Navbar.d.ts

A React component library for building retro-style websites

import React from 'react';
export declare type NavbarVariant = 'default' | 'menu-bar' | 'status-bar';
export interface NavbarProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The visual variant of the Navbar.
     * - default: Standard Windows 3.1 application bar
     * - menu-bar: Top menu bar with Windows 3.1 styling
     * - status-bar: Bottom status bar styling
     *
     * @default 'default'
     */
    variant?: NavbarVariant;
    /**
     * The items of the Navbar.
     */
    children: React.ReactNode;
}
export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The content of the NavItem.
     */
    children: React.ReactNode;
    /**
     * @internal The variant of the NavItem.
     */
    _internalVariant?: NavbarVariant;
    /**
     * @internal On click handler for the NavItem.
     */
    _internalOnClick?: () => void;
    /**
     * On click handler for the NavItem.
     */
    onClick?: () => void;
}
/**
 * Navbar is used to create a navigation bar for your application.
 * Features authentic Windows 3.1 styling with multiple variants.
 *
 * @example
 * <Navbar variant="menu-bar">
 * 	<NavItem>File</NavItem>
 * 	<NavItem>Edit</NavItem>
 * 	<NavItem>View</NavItem>
 * </Navbar>
 */
export declare const Navbar: React.ForwardRefExoticComponent<NavbarProps & React.RefAttributes<HTMLDivElement>>;
/**
 * NavItem is used inside Navbar to represent an individual navigation item.
 * It can contain any sort of children components, typically anchor (<a>) tags.
 *
 * @example
 * <Navbar color="primary">
 * 	<NavItem><a href="#">Home</a></NavItem>
 * 	<NavItem><a href="#">About</a></NavItem>
 * 	<NavItem><a href="#">Contact</a></NavItem>
 * </Navbar>
 */
export declare const NavItem: React.FC<NavItemProps>;
interface NavLogoProps {
    /**
     * The content of the NavLogo.
     * Typically an image or text.
     *
     * @default undefined
     */
    children: React.ReactNode;
}
export declare const NavLogo: React.FC<NavLogoProps>;
export interface NavMenuProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The label for the menu trigger
     */
    label: string;
    /**
     * Menu items to be displayed in the dropdown
     */
    children: React.ReactNode;
    /**
     * @internal The variant of the NavMenu
     */
    _internalVariant?: NavbarVariant;
}
/**
 * NavMenu creates a dropdown menu within the navbar, perfect for Windows 3.1 style menu bars.
 *
 * @example
 * <Navbar variant="menu-bar">
 * 	<NavMenu label="File">
 * 		<MenuItem>New</MenuItem>
 * 		<MenuItem>Open</MenuItem>
 * 		<MenuItem>Save</MenuItem>
 * 	</NavMenu>
 * </Navbar>
 */
export declare const NavMenu: React.FC<NavMenuProps>;
export {};