React Navbar - Flowbite

'use client';

import { Navbar } from 'flowbite-react';

export default function DefaultNavbar() {
  return (
    <Navbar
      fluid
      rounded
    >
      <Navbar.Brand
        as={{
          $$typeof: Symbol(react.forward_ref),
          default: '[Circular]',
          render: function LinkComponent(props, forwardedRef) {let children;const { href: hrefProp, as: asProp, children: childrenProp, prefetch: prefetchProp = null, passHref, replace, shallow, scroll, locale, onClick, onMouseEnter: onMouseEnterProp, onTouchStart: onTouchStartProp, legacyBehavior = true === false, ...restProps } = props;children = childrenProp;if (legacyBehavior && (typeof children === "string" || typeof children === "number")) {children = /*#__PURE__*/ _react.default.createElement("a", null, children);}const pagesRouter = _react.default.useContext(_routercontext.RouterContext);const appRouter = _react.default.useContext(_approutercontext.AppRouterContext);const router = pagesRouter != null ? pagesRouter : appRouter;// We're in the app directory if there is no pages router.const isAppRouter = !pagesRouter;const prefetchEnabled = prefetchProp !== false;/*** The possible states for prefetch are:* - null: this is the default "auto" mode, where we will prefetch partially if the link is in the viewport* - true: we will prefetch if the link is visible and prefetch the full page, not just partially* - false: we will not prefetch if in the viewport at all*/ const appPrefetchKind = prefetchProp === null ? _routerreducertypes.PrefetchKind.AUTO : _routerreducertypes.PrefetchKind.FULL;if (false) {}if (false) {}const { href, as } = _react.default.useMemo(()=>{if (!pagesRouter) {const resolvedHref = formatStringOrUrl(hrefProp);return {href: resolvedHref,as: asProp ? formatStringOrUrl(asProp) : resolvedHref};}const [resolvedHref, resolvedAs] = (0, _resolvehref.resolveHref)(pagesRouter, hrefProp, true);return {href: resolvedHref,as: asProp ? (0, _resolvehref.resolveHref)(pagesRouter, asProp) : resolvedAs || resolvedHref};}, [pagesRouter,hrefProp,asProp]);const previousHref = _react.default.useRef(href);const previousAs = _react.default.useRef(as);// This will return the first child, if multiple are provided it will throw an errorlet child;if (legacyBehavior) {if (false) {} else {child = _react.default.Children.only(children);}} else {if (false) {}}const childRef = legacyBehavior ? child && typeof child === "object" && child.ref : forwardedRef;const [setIntersectionRef, isVisible, resetVisible] = (0, _useintersection.useIntersection)({rootMargin: "200px"});const setRef = _react.default.useCallback((el)=>{// Before the link getting observed, check if visible state need to be resetif (previousAs.current !== as || previousHref.current !== href) {resetVisible();previousAs.current = as;previousHref.current = href;}setIntersectionRef(el);if (childRef) {if (typeof childRef === "function") childRef(el);else if (typeof childRef === "object") {childRef.current = el;}}}, [as,childRef,href,resetVisible,setIntersectionRef]);// Prefetch the URL if we haven't already and it's visible._react.default.useEffect(()=>{// in dev, we only prefetch on hover to avoid wasting resources as the prefetch will trigger compiling the page.if (false) {}if (!router) {return;}// If we don't need to prefetch the URL, don't do prefetch.if (!isVisible || !prefetchEnabled) {return;}// Prefetch the URL.prefetch(router, href, as, {locale}, {kind: appPrefetchKind}, isAppRouter);}, [as,href,isVisible,locale,prefetchEnabled,pagesRouter == null ? void 0 : pagesRouter.locale,router,isAppRouter,appPrefetchKind]);const childProps = {ref: setRef,onClick (e) {if (false) {}if (!legacyBehavior && typeof onClick === "function") {onClick(e);}if (legacyBehavior && child.props && typeof child.props.onClick === "function") {child.props.onClick(e);}if (!router) {return;}if (e.defaultPrevented) {return;}linkClicked(e, router, href, as, replace, shallow, scroll, locale, isAppRouter, prefetchEnabled);},onMouseEnter (e) {if (!legacyBehavior && typeof onMouseEnterProp === "function") {onMouseEnterProp(e);}if (legacyBehavior && child.props && typeof child.props.onMouseEnter === "function") {child.props.onMouseEnter(e);}if (!router) {return;}if ((!prefetchEnabled || "production" === "development") && isAppRouter) {return;}prefetch(router, href, as, {locale,priority: true,// @see {https://github.com/vercel/next.js/discussions/40268?sort=top#discussioncomment-3572642}bypassPrefetchedCheck: true}, {kind: appPrefetchKind}, isAppRouter);},onTouchStart (e) {if (!legacyBehavior && typeof onTouchStartProp === "function") {onTouchStartProp(e);}if (legacyBehavior && child.props && typeof child.props.onTouchStart === "function") {child.props.onTouchStart(e);}if (!router) {return;}if (!prefetchEnabled && isAppRouter) {return;}prefetch(router, href, as, {locale,priority: true,// @see {https://github.com/vercel/next.js/discussions/40268?sort=top#discussioncomment-3572642}bypassPrefetchedCheck: true}, {kind: appPrefetchKind}, isAppRouter);}};// If child is an <a> tag and doesn't have a href attribute, or if the 'passHref' property is// defined, we specify the current 'href', so that repetition is not needed by the user.// If the url is absolute, we can bypass the logic to prepend the domain and locale.if ((0, _utils.isAbsoluteUrl)(as)) {childProps.href = as;} else if (!legacyBehavior || passHref || child.type === "a" && !("href" in child.props)) {const curLocale = typeof locale !== "undefined" ? locale : pagesRouter == null ? void 0 : pagesRouter.locale;// we only render domain locales if we are currently on a domain locale// so that locale links are still visitable in development/preview envsconst localeDomain = (pagesRouter == null ? void 0 : pagesRouter.isLocaleDomain) && (0, _getdomainlocale.getDomainLocale)(as, curLocale, pagesRouter == null ? void 0 : pagesRouter.locales, pagesRouter == null ? void 0 : pagesRouter.domainLocales);childProps.href = localeDomain || (0, _addbasepath.addBasePath)((0, _addlocale.addLocale)(as, curLocale, pagesRouter == null ? void 0 : pagesRouter.defaultLocale));}return legacyBehavior ? /*#__PURE__*/ _react.default.cloneElement(child, childProps) : /*#__PURE__*/ _react.default.createElement("a", {...restProps,...childProps}, children);}
        }}
        href="https://flowbite-react.com"
      >
        <img
          alt="Flowbite React Logo"
          className="mr-3 h-6 sm:h-9"
          src="/favicon.svg"
        />
        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
          Flowbite React
        </span>
      </Navbar.Brand>
      <Navbar.Toggle />
      <Navbar.Collapse>
        <Navbar.Link
          active
          href="#"
        >
          <p>
            Home
          </p>
        </Navbar.Link>
        <Navbar.Link
          as={{
            $$typeof: Symbol(react.forward_ref),
            default: '[Circular]',
            render: function LinkComponent(props, forwardedRef) {let children;const { href: hrefProp, as: asProp, children: childrenProp, prefetch: prefetchProp = null, passHref, replace, shallow, scroll, locale, onClick, onMouseEnter: onMouseEnterProp, onTouchStart: onTouchStartProp, legacyBehavior = true === false, ...restProps } = props;children = childrenProp;if (legacyBehavior && (typeof children === "string" || typeof children === "number")) {children = /*#__PURE__*/ _react.default.createElement("a", null, children);}const pagesRouter = _react.default.useContext(_routercontext.RouterContext);const appRouter = _react.default.useContext(_approutercontext.AppRouterContext);const router = pagesRouter != null ? pagesRouter : appRouter;// We're in the app directory if there is no pages router.const isAppRouter = !pagesRouter;const prefetchEnabled = prefetchProp !== false;/*** The possible states for prefetch are:* - null: this is the default "auto" mode, where we will prefetch partially if the link is in the viewport* - true: we will prefetch if the link is visible and prefetch the full page, not just partially* - false: we will not prefetch if in the viewport at all*/ const appPrefetchKind = prefetchProp === null ? _routerreducertypes.PrefetchKind.AUTO : _routerreducertypes.PrefetchKind.FULL;if (false) {}if (false) {}const { href, as } = _react.default.useMemo(()=>{if (!pagesRouter) {const resolvedHref = formatStringOrUrl(hrefProp);return {href: resolvedHref,as: asProp ? formatStringOrUrl(asProp) : resolvedHref};}const [resolvedHref, resolvedAs] = (0, _resolvehref.resolveHref)(pagesRouter, hrefProp, true);return {href: resolvedHref,as: asProp ? (0, _resolvehref.resolveHref)(pagesRouter, asProp) : resolvedAs || resolvedHref};}, [pagesRouter,hrefProp,asProp]);const previousHref = _react.default.useRef(href);const previousAs = _react.default.useRef(as);// This will return the first child, if multiple are provided it will throw an errorlet child;if (legacyBehavior) {if (false) {} else {child = _react.default.Children.only(children);}} else {if (false) {}}const childRef = legacyBehavior ? child && typeof child === "object" && child.ref : forwardedRef;const [setIntersectionRef, isVisible, resetVisible] = (0, _useintersection.useIntersection)({rootMargin: "200px"});const setRef = _react.default.useCallback((el)=>{// Before the link getting observed, check if visible state need to be resetif (previousAs.current !== as || previousHref.current !== href) {resetVisible();previousAs.current = as;previousHref.current = href;}setIntersectionRef(el);if (childRef) {if (typeof childRef === "function") childRef(el);else if (typeof childRef === "object") {childRef.current = el;}}}, [as,childRef,href,resetVisible,setIntersectionRef]);// Prefetch the URL if we haven't already and it's visible._react.default.useEffect(()=>{// in dev, we only prefetch on hover to avoid wasting resources as the prefetch will trigger compiling the page.if (false) {}if (!router) {return;}// If we don't need to prefetch the URL, don't do prefetch.if (!isVisible || !prefetchEnabled) {return;}// Prefetch the URL.prefetch(router, href, as, {locale}, {kind: appPrefetchKind}, isAppRouter);}, [as,href,isVisible,locale,prefetchEnabled,pagesRouter == null ? void 0 : pagesRouter.locale,router,isAppRouter,appPrefetchKind]);const childProps = {ref: setRef,onClick (e) {if (false) {}if (!legacyBehavior && typeof onClick === "function") {onClick(e);}if (legacyBehavior && child.props && typeof child.props.onClick === "function") {child.props.onClick(e);}if (!router) {return;}if (e.defaultPrevented) {return;}linkClicked(e, router, href, as, replace, shallow, scroll, locale, isAppRouter, prefetchEnabled);},onMouseEnter (e) {if (!legacyBehavior && typeof onMouseEnterProp === "function") {onMouseEnterProp(e);}if (legacyBehavior && child.props && typeof child.props.onMouseEnter === "function") {child.props.onMouseEnter(e);}if (!router) {return;}if ((!prefetchEnabled || "production" === "development") && isAppRouter) {return;}prefetch(router, href, as, {locale,priority: true,// @see {https://github.com/vercel/next.js/discussions/40268?sort=top#discussioncomment-3572642}bypassPrefetchedCheck: true}, {kind: appPrefetchKind}, isAppRouter);},onTouchStart (e) {if (!legacyBehavior && typeof onTouchStartProp === "function") {onTouchStartProp(e);}if (legacyBehavior && child.props && typeof child.props.onTouchStart === "function") {child.props.onTouchStart(e);}if (!router) {return;}if (!prefetchEnabled && isAppRouter) {return;}prefetch(router, href, as, {locale,priority: true,// @see {https://github.com/vercel/next.js/discussions/40268?sort=top#discussioncomment-3572642}bypassPrefetchedCheck: true}, {kind: appPrefetchKind}, isAppRouter);}};// If child is an <a> tag and doesn't have a href attribute, or if the 'passHref' property is// defined, we specify the current 'href', so that repetition is not needed by the user.// If the url is absolute, we can bypass the logic to prepend the domain and locale.if ((0, _utils.isAbsoluteUrl)(as)) {childProps.href = as;} else if (!legacyBehavior || passHref || child.type === "a" && !("href" in child.props)) {const curLocale = typeof locale !== "undefined" ? locale : pagesRouter == null ? void 0 : pagesRouter.locale;// we only render domain locales if we are currently on a domain locale// so that locale links are still visitable in development/preview envsconst localeDomain = (pagesRouter == null ? void 0 : pagesRouter.isLocaleDomain) && (0, _getdomainlocale.getDomainLocale)(as, curLocale, pagesRouter == null ? void 0 : pagesRouter.locales, pagesRouter == null ? void 0 : pagesRouter.domainLocales);childProps.href = localeDomain || (0, _addbasepath.addBasePath)((0, _addlocale.addLocale)(as, curLocale, pagesRouter == null ? void 0 : pagesRouter.defaultLocale));}return legacyBehavior ? /*#__PURE__*/ _react.default.cloneElement(child, childProps) : /*#__PURE__*/ _react.default.createElement("a", {...restProps,...childProps}, children);}
          }}
          href="#"
        >
          <p>
            About
          </p>
        </Navbar.Link>
        <Navbar.Link href="#">
          Services
        </Navbar.Link>
        <Navbar.Link href="#">
          Pricing
        </Navbar.Link>
        <Navbar.Link href="#">
          Contact
        </Navbar.Link>
      </Navbar.Collapse>
    </Navbar>
  )
}

'use client';

import { Button, Navbar } from 'flowbite-react';

export default function NavbarWithCTAButton() {
  return (
    <Navbar
      fluid
      rounded
    >
      <Navbar.Brand href="https://flowbite-react.com">
        <img
          alt="Flowbite React Logo"
          className="mr-3 h-6 sm:h-9"
          src="/favicon.svg"
        />
        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
          Flowbite React
        </span>
      </Navbar.Brand>
      <div className="flex md:order-2">
        <Button>
          Get started
        </Button>
        <Navbar.Toggle />
      </div>
      <Navbar.Collapse>
        <Navbar.Link
          active
          href="#"
        >
          <p>
            Home
          </p>
        </Navbar.Link>
        <Navbar.Link href="#">
          About
        </Navbar.Link>
        <Navbar.Link href="#">
          Services
        </Navbar.Link>
        <Navbar.Link href="#">
          Pricing
        </Navbar.Link>
        <Navbar.Link href="#">
          Contact
        </Navbar.Link>
      </Navbar.Collapse>
    </Navbar>
  )
}

'use client';

import { Dropdown, Navbar } from 'flowbite-react';

export default function NavbarWithDropdown() {
  return (
    <Navbar
      fluid
      rounded
    >
      <Navbar.Brand href="https://flowbite-react.com">
        <img
          alt="Flowbite React Logo"
          className="mr-3 h-6 sm:h-9"
          src="/favicon.svg"
        />
        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
          Flowbite React
        </span>
      </Navbar.Brand>
      <div className="flex md:order-2">
        <Dropdown
          arrowIcon={false}
          inline
          label={<Avatar alt="User settings" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded/>}
        >
          <Dropdown.Header>
            <span className="block text-sm">
              Bonnie Green
            </span>
            <span className="block truncate text-sm font-medium">
              name@flowbite.com
            </span>
          </Dropdown.Header>
          <DropdownItem>
            Dashboard
          </DropdownItem>
          <DropdownItem>
            Settings
          </DropdownItem>
          <DropdownItem>
            Earnings
          </DropdownItem>
          <Dropdown.Divider />
          <DropdownItem>
            Sign out
          </DropdownItem>
        </Dropdown>
        <Navbar.Toggle />
      </div>
      <Navbar.Collapse>
        <Navbar.Link
          active
          href="#"
        >
          <p>
            Home
          </p>
        </Navbar.Link>
        <Navbar.Link href="#">
          About
        </Navbar.Link>
        <Navbar.Link href="#">
          Services
        </Navbar.Link>
        <Navbar.Link href="#">
          Pricing
        </Navbar.Link>
        <Navbar.Link href="#">
          Contact
        </Navbar.Link>
      </Navbar.Collapse>
    </Navbar>
  )
}