Fix/navbar toggle icon

apps/web/content/docs/components/navbar.mdx

@@ -35,6 +35,12 @@ Use this example to feature a dropdown menu when clicking on the user avatar ins
 
 <Example name="navbar.withDropdown" />
 
+## Navbar with Custom Bar/Menu Icon
+
+Use this example to use the custom Open Menu/Bar Icon
+
+<Example name="navbar.withCustomMenuIcon" />
+
 ## Theme
 
 To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

apps/web/examples/navbar/index.ts

@@ -1,3 +1,4 @@
 export { root } from "./navbar.root";
 export { withCTAButton } from "./navbar.withCTAButton";
+export { withCustomMenuIcon } from "./navbar.withCustomMenuIcon";
 export { withDropdown } from "./navbar.withDropdown";

apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react";
+import { CiMenuFries } from "react-icons/ci";
+import { type CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { Navbar } from "flowbite-react";
+
+export function Component() {
+  return (
+    <Navbar fluid rounded>
+      <Navbar.Brand href="https://flowbite-react.com">
+        <img src="/favicon.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite React Logo" />
+        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite React</span>
+      </Navbar.Brand>
+      <Navbar.Toggle barIcon={CiMenuFries} />
+      <Navbar.Collapse>
+        <Navbar.Link href="#" active>
+          Home
+        </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>
+  );
+}
+`;
+
+const codeRSC = `
+import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react";
+
+export function Component() {
+  return (
+    <Navbar fluid rounded>
+      <NavbarBrand href="https://flowbite-react.com">
+        <img src="/favicon.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite React Logo" />
+        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite React</span>
+      </NavbarBrand>
+      <NavbarToggle barIcon={CiMenuFries} />
+      <NavbarCollapse>
+        <NavbarLink href="#" active>
+          Home
+        </NavbarLink>
+        <NavbarLink href="#">
+          About
+        </NavbarLink>
+        <NavbarLink href="#">Services</NavbarLink>
+        <NavbarLink href="#">Pricing</NavbarLink>
+        <NavbarLink href="#">Contact</NavbarLink>
+      </NavbarCollapse>
+    </Navbar>
+  );
+}
+`;
+
+export function Component() {
+  return (
+    <Navbar fluid rounded>
+      <NavbarBrand href="https://flowbite-react.com">
+        <img src="/favicon.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite React Logo" />
+        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite React</span>
+      </NavbarBrand>
+      <NavbarToggle barIcon={CiMenuFries} />
+      <NavbarCollapse>
+        <NavbarLink href="#" active>
+          Home
+        </NavbarLink>
+        <NavbarLink href="#">About</NavbarLink>
+        <NavbarLink href="#">Services</NavbarLink>
+        <NavbarLink href="#">Pricing</NavbarLink>
+        <NavbarLink href="#">Contact</NavbarLink>
+      </NavbarCollapse>
+    </Navbar>
+  );
+}
+
+export const withCustomMenuIcon: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "navbar/navbar.withCustomMenuIcon.tsx",
+  component: <Component />,
+  iframe: {
+    height: 300,
+    noPadding: true,
+  },
+};

packages/ui/src/components/Navbar/Navbar.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@storybook/react";
+import { CiMenuFries } from "react-icons/ci";
 import { Avatar } from "../Avatar";
 import { Button } from "../Button";
 import { Dropdown } from "../Dropdown";
@@ -104,3 +105,26 @@ WithDropdown.args = {
     </>
   ),
 };
+
+export const CustomToggleMenuIconNavbar = Template.bind({});
+CustomToggleMenuIconNavbar.storyName = "Custom Toggle Menu Icon";
+CustomToggleMenuIconNavbar.args = {
+  children: (
+    <>
+      <Navbar.Brand href="https://flowbite.com/">
+        <img src="https://flowbite.com/docs/images/logo.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+      </Navbar.Brand>
+      <Navbar.Toggle barIcon={CiMenuFries} />
+      <Navbar.Collapse>
+        <Navbar.Link href="/navbars" active>
+          Home
+        </Navbar.Link>
+        <Navbar.Link href="/navbars">About</Navbar.Link>
+        <Navbar.Link href="/navbars">Services</Navbar.Link>
+        <Navbar.Link href="/navbars">Pricing</Navbar.Link>
+        <Navbar.Link href="/navbars">Contact</Navbar.Link>
+      </Navbar.Collapse>
+    </>
+  ),
+};

packages/ui/src/components/Navbar/NavbarToggle.tsx

@@ -2,6 +2,7 @@
 
 import type { ComponentProps, FC } from "react";
 import { FaBars } from "react-icons/fa";
+import { IoMdClose } from "react-icons/io";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import type { DeepPartial } from "../../types";
@@ -14,11 +15,13 @@ export interface FlowbiteNavbarToggleTheme {
 
 export interface NavbarToggleProps extends ComponentProps<"button"> {
   barIcon?: FC<ComponentProps<"svg">>;
+  closeIcon?: FC<ComponentProps<"svg">>;
   theme?: DeepPartial<FlowbiteNavbarToggleTheme>;
 }
 
 export const NavbarToggle: FC<NavbarToggleProps> = ({
   barIcon: BarIcon = FaBars,
+  closeIcon: CloseIcon = IoMdClose,
   className,
   theme: customTheme = {},
   ...props
@@ -38,8 +41,8 @@ export const NavbarToggle: FC<NavbarToggleProps> = ({
       className={twMerge(theme.base, className)}
       {...props}
     >
-      <span className="sr-only">Open main menu</span>
-      <BarIcon aria-hidden className={theme.icon} />
+      <span className="sr-only">{isOpen ? "Close" : "Open"} main menu</span>
+      {isOpen ? <CloseIcon aria-hidden className={theme.icon} /> : <BarIcon aria-hidden className={theme.icon} />}
     </button>
   );
 };