Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/navbar toggle icon #1382

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions apps/web/content/docs/components/navbar.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
1 change: 1 addition & 0 deletions apps/web/examples/navbar/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export { root } from "./navbar.root";
export { withCTAButton } from "./navbar.withCTAButton";
export { withCustomMenuIcon } from "./navbar.withCustomMenuIcon";
export { withDropdown } from "./navbar.withDropdown";
104 changes: 104 additions & 0 deletions apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx
Original file line number Diff line number Diff line change
@@ -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,
},
};
24 changes: 24 additions & 0 deletions packages/ui/src/components/Navbar/Navbar.stories.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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>
</>
),
};
7 changes: 5 additions & 2 deletions packages/ui/src/components/Navbar/NavbarToggle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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
Expand All @@ -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>
);
};
Loading