@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
JavaScript
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,
});