UNPKG

@olleemilsson/flowbite-react

Version:

<div align="center"> <h1>:construction: flowbite-react (unreleased) :construction:</h1> <p> <a href="https://flowbite-react.com"> <img alt="Flowbite - Tailwind CSS components" width="350" src=".github/assets/flowbite-react-github.png"> <

27 lines (26 loc) 1.46 kB
import { jsx as _jsx } from "react/jsx-runtime"; import classNames from 'classnames'; import { useState } from 'react'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; import { NavbarBrand } from './NavbarBrand'; import { NavbarCollapse } from './NavbarCollapse'; import { NavbarContext } from './NavbarContext'; import { NavbarLink } from './NavbarLink'; import { NavbarToggle } from './NavbarToggle'; const NavbarComponent = ({ children, menuOpen, fluid = false, rounded, border, className, theme: customTheme = {}, ...props }) => { const [isOpen, setIsOpen] = useState(menuOpen); const theme = mergeDeep(useTheme().theme.navbar.root, customTheme); return (_jsx(NavbarContext.Provider, { value: { isOpen, setIsOpen }, children: _jsx("nav", { className: classNames(theme.base, theme.bordered[border ? 'on' : 'off'], theme.rounded[rounded ? 'on' : 'off'], className), ...props, children: _jsx("div", { className: classNames(theme.inner.base, theme.inner.fluid[fluid ? 'on' : 'off']), children: children }) }) })); }; NavbarComponent.displayName = 'Navbar'; NavbarBrand.displayName = 'Navbar.Brand'; NavbarCollapse.displayName = 'Navbar.Collapse'; NavbarLink.displayName = 'Navbar.Link'; NavbarToggle.displayName = 'Navbar.Toggle'; export const Navbar = Object.assign(NavbarComponent, { Brand: NavbarBrand, Collapse: NavbarCollapse, Link: NavbarLink, Toggle: NavbarToggle, });