Skip to content

Commit 11dcc4d

Browse files
dhavalveeradhavalveera
committed
fix: added Close Icon for NavbarToggle on Mobile Screen
1 parent 29e5f19 commit 11dcc4d

File tree

5 files changed

+143
-2
lines changed

5 files changed

+143
-2
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,12 @@ Use this example to feature a dropdown menu when clicking on the user avatar ins
3535

3636
<Example name="navbar.withDropdown" />
3737

38+
## Navbar with Custom Bar/Menu Icon
39+
40+
Use this example to use the custom Open Menu/Bar Icon
41+
42+
<Example name="navbar.withCustomMenuIcon" />
43+
3844
## Theme
3945

4046
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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export { root } from "./navbar.root";
22
export { withCTAButton } from "./navbar.withCTAButton";
3+
export { withCustomMenuIcon } from "./navbar.withCustomMenuIcon";
34
export { withDropdown } from "./navbar.withDropdown";

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react";
2+
import Link from "next/link";
3+
import { CiMenuFries } from "react-icons/ci";
4+
import { type CodeData } from "~/components/code-demo";
5+
6+
const code = `
7+
"use client";
8+
9+
import Link from "next/link";
10+
import { Navbar } from "flowbite-react";
11+
12+
export function Component() {
13+
return (
14+
<Navbar fluid rounded>
15+
<Navbar.Brand as={Link} href="https://flowbite-react.com">
16+
<img src="/favicon.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite React Logo" />
17+
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite React</span>
18+
</Navbar.Brand>
19+
<Navbar.Toggle barIcon={CiMenuFries} />
20+
<Navbar.Collapse>
21+
<Navbar.Link href="#" active>
22+
Home
23+
</Navbar.Link>
24+
<Navbar.Link as={Link} href="#">
25+
About
26+
</Navbar.Link>
27+
<Navbar.Link href="#">Services</Navbar.Link>
28+
<Navbar.Link href="#">Pricing</Navbar.Link>
29+
<Navbar.Link href="#">Contact</Navbar.Link>
30+
</Navbar.Collapse>
31+
</Navbar>
32+
);
33+
}
34+
`;
35+
36+
const codeRSC = `
37+
import Link from "next/link";
38+
import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react";
39+
40+
export function Component() {
41+
return (
42+
<Navbar fluid rounded>
43+
<NavbarBrand as={Link} href="https://flowbite-react.com">
44+
<img src="/favicon.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite React Logo" />
45+
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite React</span>
46+
</NavbarBrand>
47+
<NavbarToggle barIcon={CiMenuFries} />
48+
<NavbarCollapse>
49+
<NavbarLink href="#" active>
50+
Home
51+
</NavbarLink>
52+
<NavbarLink as={Link} href="#">
53+
About
54+
</NavbarLink>
55+
<NavbarLink href="#">Services</NavbarLink>
56+
<NavbarLink href="#">Pricing</NavbarLink>
57+
<NavbarLink href="#">Contact</NavbarLink>
58+
</NavbarCollapse>
59+
</Navbar>
60+
);
61+
}
62+
`;
63+
64+
export function Component() {
65+
return (
66+
<Navbar fluid rounded>
67+
<NavbarBrand as={Link} href="https://flowbite-react.com">
68+
<img src="/favicon.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite React Logo" />
69+
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite React</span>
70+
</NavbarBrand>
71+
<NavbarToggle barIcon={CiMenuFries} />
72+
<NavbarCollapse>
73+
<NavbarLink href="#" active>
74+
Home
75+
</NavbarLink>
76+
<NavbarLink as={Link} href="#">
77+
About
78+
</NavbarLink>
79+
<NavbarLink href="#">Services</NavbarLink>
80+
<NavbarLink href="#">Pricing</NavbarLink>
81+
<NavbarLink href="#">Contact</NavbarLink>
82+
</NavbarCollapse>
83+
</Navbar>
84+
);
85+
}
86+
87+
export const withCustomMenuIcon: CodeData = {
88+
type: "single",
89+
code: [
90+
{
91+
fileName: "client",
92+
language: "tsx",
93+
code,
94+
},
95+
{
96+
fileName: "server",
97+
language: "tsx",
98+
code: codeRSC,
99+
},
100+
],
101+
githubSlug: "navbar/navbar.withCustomMenuIcon.tsx",
102+
component: <Component />,
103+
iframe: {
104+
height: 300,
105+
noPadding: true,
106+
},
107+
};

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Meta, StoryFn } from "@storybook/react";
2+
import { CiMenuFries } from "react-icons/ci";
23
import { Avatar } from "../Avatar";
34
import { Button } from "../Button";
45
import { Dropdown } from "../Dropdown";
@@ -104,3 +105,26 @@ WithDropdown.args = {
104105
</>
105106
),
106107
};
108+
109+
export const CustomToggleMenuIconNavbar = Template.bind({});
110+
CustomToggleMenuIconNavbar.storyName = "Custom Toggle Menu Icon";
111+
CustomToggleMenuIconNavbar.args = {
112+
children: (
113+
<>
114+
<Navbar.Brand href="https://flowbite.com/">
115+
<img src="https://flowbite.com/docs/images/logo.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
116+
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
117+
</Navbar.Brand>
118+
<Navbar.Toggle barIcon={CiMenuFries} />
119+
<Navbar.Collapse>
120+
<Navbar.Link href="/navbars" active>
121+
Home
122+
</Navbar.Link>
123+
<Navbar.Link href="/navbars">About</Navbar.Link>
124+
<Navbar.Link href="/navbars">Services</Navbar.Link>
125+
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
126+
<Navbar.Link href="/navbars">Contact</Navbar.Link>
127+
</Navbar.Collapse>
128+
</>
129+
),
130+
};

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import type { ComponentProps, FC } from "react";
44
import { FaBars } from "react-icons/fa";
5+
import { IoMdClose } from "react-icons/io";
56
import { twMerge } from "tailwind-merge";
67
import { mergeDeep } from "../../helpers/merge-deep";
78
import type { DeepPartial } from "../../types";
@@ -14,11 +15,13 @@ export interface FlowbiteNavbarToggleTheme {
1415

1516
export interface NavbarToggleProps extends ComponentProps<"button"> {
1617
barIcon?: FC<ComponentProps<"svg">>;
18+
closeIcon?: FC<ComponentProps<"svg">>;
1719
theme?: DeepPartial<FlowbiteNavbarToggleTheme>;
1820
}
1921

2022
export const NavbarToggle: FC<NavbarToggleProps> = ({
2123
barIcon: BarIcon = FaBars,
24+
closeIcon: CloseIcon = IoMdClose,
2225
className,
2326
theme: customTheme = {},
2427
...props
@@ -38,8 +41,8 @@ export const NavbarToggle: FC<NavbarToggleProps> = ({
3841
className={twMerge(theme.base, className)}
3942
{...props}
4043
>
41-
<span className="sr-only">Open main menu</span>
42-
<BarIcon aria-hidden className={theme.icon} />
44+
<span className="sr-only">{isOpen ? "Close" : "Open"} main menu</span>
45+
{isOpen ? <CloseIcon aria-hidden className={theme.icon} /> : <BarIcon aria-hidden className={theme.icon} />}
4346
</button>
4447
);
4548
};

0 commit comments

Comments
 (0)