From 7fa1254fdee130d9f298335bfce40afb7b5076fa Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Mon, 29 Apr 2024 17:15:30 +0530 Subject: [PATCH 1/6] fix: added Close Icon for NavbarToggle on Mobile Screen --- apps/web/content/docs/components/navbar.mdx | 6 + apps/web/examples/navbar/index.ts | 1 + .../navbar/navbar.withCustomMenuIcon.tsx | 107 ++++++++++++++++++ .../src/components/Navbar/Navbar.stories.tsx | 24 ++++ .../ui/src/components/Navbar/NavbarToggle.tsx | 7 +- 5 files changed, 143 insertions(+), 2 deletions(-) create mode 100644 apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx diff --git a/apps/web/content/docs/components/navbar.mdx b/apps/web/content/docs/components/navbar.mdx index b186babd3..aee36aa16 100644 --- a/apps/web/content/docs/components/navbar.mdx +++ b/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 +## Navbar with Custom Bar/Menu Icon + +Use this example to use the custom Open Menu/Bar Icon + + + ## Theme To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme). diff --git a/apps/web/examples/navbar/index.ts b/apps/web/examples/navbar/index.ts index c06f4cf41..8c8f3732b 100644 --- a/apps/web/examples/navbar/index.ts +++ b/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"; diff --git a/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx b/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx new file mode 100644 index 000000000..d5bd58e31 --- /dev/null +++ b/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx @@ -0,0 +1,107 @@ +import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react"; +import Link from "next/link"; +import { CiMenuFries } from "react-icons/ci"; +import { type CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import Link from "next/link"; +import { Navbar } from "flowbite-react"; + +export function Component() { + return ( + + + Flowbite React Logo + Flowbite React + + + + + Home + + + About + + Services + Pricing + Contact + + + ); +} +`; + +const codeRSC = ` +import Link from "next/link"; +import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react"; + +export function Component() { + return ( + + + Flowbite React Logo + Flowbite React + + + + + Home + + + About + + Services + Pricing + Contact + + + ); +} +`; + +export function Component() { + return ( + + + Flowbite React Logo + Flowbite React + + + + + Home + + + About + + Services + Pricing + Contact + + + ); +} + +export const withCustomMenuIcon: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "navbar/navbar.root.tsx", + component: , + iframe: { + height: 300, + noPadding: true, + }, +}; diff --git a/packages/ui/src/components/Navbar/Navbar.stories.tsx b/packages/ui/src/components/Navbar/Navbar.stories.tsx index 039d8eece..21d3be8dd 100644 --- a/packages/ui/src/components/Navbar/Navbar.stories.tsx +++ b/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: ( + <> + + Flowbite Logo + Flowbite + + + + + Home + + About + Services + Pricing + Contact + + + ), +}; diff --git a/packages/ui/src/components/Navbar/NavbarToggle.tsx b/packages/ui/src/components/Navbar/NavbarToggle.tsx index 3c1b58159..f7e98ccb7 100644 --- a/packages/ui/src/components/Navbar/NavbarToggle.tsx +++ b/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>; + closeIcon?: FC>; theme?: DeepPartial; } export const NavbarToggle: FC = ({ barIcon: BarIcon = FaBars, + closeIcon: CloseIcon = IoMdClose, className, theme: customTheme = {}, ...props @@ -38,8 +41,8 @@ export const NavbarToggle: FC = ({ className={twMerge(theme.base, className)} {...props} > - Open main menu - + {isOpen ? "Close" : "Open"} main menu + {isOpen ? : } ); }; From 3fed6d7ad2c910008bbac929610fc3cc3a62b9d2 Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Mon, 29 Apr 2024 17:16:57 +0530 Subject: [PATCH 2/6] undo changes --- apps/web/content/docs/components/navbar.mdx | 6 - apps/web/examples/navbar/index.ts | 1 - .../navbar/navbar.withCustomMenuIcon.tsx | 107 ------------------ .../ui/src/components/Navbar/NavbarToggle.tsx | 7 +- 4 files changed, 2 insertions(+), 119 deletions(-) delete mode 100644 apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx diff --git a/apps/web/content/docs/components/navbar.mdx b/apps/web/content/docs/components/navbar.mdx index aee36aa16..b186babd3 100644 --- a/apps/web/content/docs/components/navbar.mdx +++ b/apps/web/content/docs/components/navbar.mdx @@ -35,12 +35,6 @@ Use this example to feature a dropdown menu when clicking on the user avatar ins -## Navbar with Custom Bar/Menu Icon - -Use this example to use the custom Open Menu/Bar Icon - - - ## Theme To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme). diff --git a/apps/web/examples/navbar/index.ts b/apps/web/examples/navbar/index.ts index 8c8f3732b..c06f4cf41 100644 --- a/apps/web/examples/navbar/index.ts +++ b/apps/web/examples/navbar/index.ts @@ -1,4 +1,3 @@ export { root } from "./navbar.root"; export { withCTAButton } from "./navbar.withCTAButton"; -export { withCustomMenuIcon } from "./navbar.withCustomMenuIcon"; export { withDropdown } from "./navbar.withDropdown"; diff --git a/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx b/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx deleted file mode 100644 index d5bd58e31..000000000 --- a/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react"; -import Link from "next/link"; -import { CiMenuFries } from "react-icons/ci"; -import { type CodeData } from "~/components/code-demo"; - -const code = ` -"use client"; - -import Link from "next/link"; -import { Navbar } from "flowbite-react"; - -export function Component() { - return ( - - - Flowbite React Logo - Flowbite React - - - - - Home - - - About - - Services - Pricing - Contact - - - ); -} -`; - -const codeRSC = ` -import Link from "next/link"; -import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react"; - -export function Component() { - return ( - - - Flowbite React Logo - Flowbite React - - - - - Home - - - About - - Services - Pricing - Contact - - - ); -} -`; - -export function Component() { - return ( - - - Flowbite React Logo - Flowbite React - - - - - Home - - - About - - Services - Pricing - Contact - - - ); -} - -export const withCustomMenuIcon: CodeData = { - type: "single", - code: [ - { - fileName: "client", - language: "tsx", - code, - }, - { - fileName: "server", - language: "tsx", - code: codeRSC, - }, - ], - githubSlug: "navbar/navbar.root.tsx", - component: , - iframe: { - height: 300, - noPadding: true, - }, -}; diff --git a/packages/ui/src/components/Navbar/NavbarToggle.tsx b/packages/ui/src/components/Navbar/NavbarToggle.tsx index f7e98ccb7..3c1b58159 100644 --- a/packages/ui/src/components/Navbar/NavbarToggle.tsx +++ b/packages/ui/src/components/Navbar/NavbarToggle.tsx @@ -2,7 +2,6 @@ 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"; @@ -15,13 +14,11 @@ export interface FlowbiteNavbarToggleTheme { export interface NavbarToggleProps extends ComponentProps<"button"> { barIcon?: FC>; - closeIcon?: FC>; theme?: DeepPartial; } export const NavbarToggle: FC = ({ barIcon: BarIcon = FaBars, - closeIcon: CloseIcon = IoMdClose, className, theme: customTheme = {}, ...props @@ -41,8 +38,8 @@ export const NavbarToggle: FC = ({ className={twMerge(theme.base, className)} {...props} > - {isOpen ? "Close" : "Open"} main menu - {isOpen ? : } + Open main menu + ); }; From 29e5f19c50cdb23de4db8b7814757ee1761ffccd Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Mon, 29 Apr 2024 17:17:12 +0530 Subject: [PATCH 3/6] undo changes --- .../src/components/Navbar/Navbar.stories.tsx | 24 ------------------- 1 file changed, 24 deletions(-) diff --git a/packages/ui/src/components/Navbar/Navbar.stories.tsx b/packages/ui/src/components/Navbar/Navbar.stories.tsx index 21d3be8dd..039d8eece 100644 --- a/packages/ui/src/components/Navbar/Navbar.stories.tsx +++ b/packages/ui/src/components/Navbar/Navbar.stories.tsx @@ -1,5 +1,4 @@ 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"; @@ -105,26 +104,3 @@ WithDropdown.args = { ), }; - -export const CustomToggleMenuIconNavbar = Template.bind({}); -CustomToggleMenuIconNavbar.storyName = "Custom Toggle Menu Icon"; -CustomToggleMenuIconNavbar.args = { - children: ( - <> - - Flowbite Logo - Flowbite - - - - - Home - - About - Services - Pricing - Contact - - - ), -}; From 11dcc4db3b8215c062d766f3b4faa0f22eed7a1a Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Mon, 29 Apr 2024 17:19:09 +0530 Subject: [PATCH 4/6] fix: added Close Icon for NavbarToggle on Mobile Screen --- apps/web/content/docs/components/navbar.mdx | 6 + apps/web/examples/navbar/index.ts | 1 + .../navbar/navbar.withCustomMenuIcon.tsx | 107 ++++++++++++++++++ .../src/components/Navbar/Navbar.stories.tsx | 24 ++++ .../ui/src/components/Navbar/NavbarToggle.tsx | 7 +- 5 files changed, 143 insertions(+), 2 deletions(-) create mode 100644 apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx diff --git a/apps/web/content/docs/components/navbar.mdx b/apps/web/content/docs/components/navbar.mdx index b186babd3..aee36aa16 100644 --- a/apps/web/content/docs/components/navbar.mdx +++ b/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 +## Navbar with Custom Bar/Menu Icon + +Use this example to use the custom Open Menu/Bar Icon + + + ## Theme To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme). diff --git a/apps/web/examples/navbar/index.ts b/apps/web/examples/navbar/index.ts index c06f4cf41..8c8f3732b 100644 --- a/apps/web/examples/navbar/index.ts +++ b/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"; diff --git a/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx b/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx new file mode 100644 index 000000000..88e00dd45 --- /dev/null +++ b/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx @@ -0,0 +1,107 @@ +import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react"; +import Link from "next/link"; +import { CiMenuFries } from "react-icons/ci"; +import { type CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import Link from "next/link"; +import { Navbar } from "flowbite-react"; + +export function Component() { + return ( + + + Flowbite React Logo + Flowbite React + + + + + Home + + + About + + Services + Pricing + Contact + + + ); +} +`; + +const codeRSC = ` +import Link from "next/link"; +import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react"; + +export function Component() { + return ( + + + Flowbite React Logo + Flowbite React + + + + + Home + + + About + + Services + Pricing + Contact + + + ); +} +`; + +export function Component() { + return ( + + + Flowbite React Logo + Flowbite React + + + + + Home + + + About + + Services + Pricing + Contact + + + ); +} + +export const withCustomMenuIcon: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "navbar/navbar.withCustomMenuIcon.tsx", + component: , + iframe: { + height: 300, + noPadding: true, + }, +}; diff --git a/packages/ui/src/components/Navbar/Navbar.stories.tsx b/packages/ui/src/components/Navbar/Navbar.stories.tsx index 039d8eece..21d3be8dd 100644 --- a/packages/ui/src/components/Navbar/Navbar.stories.tsx +++ b/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: ( + <> + + Flowbite Logo + Flowbite + + + + + Home + + About + Services + Pricing + Contact + + + ), +}; diff --git a/packages/ui/src/components/Navbar/NavbarToggle.tsx b/packages/ui/src/components/Navbar/NavbarToggle.tsx index 3c1b58159..f7e98ccb7 100644 --- a/packages/ui/src/components/Navbar/NavbarToggle.tsx +++ b/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>; + closeIcon?: FC>; theme?: DeepPartial; } export const NavbarToggle: FC = ({ barIcon: BarIcon = FaBars, + closeIcon: CloseIcon = IoMdClose, className, theme: customTheme = {}, ...props @@ -38,8 +41,8 @@ export const NavbarToggle: FC = ({ className={twMerge(theme.base, className)} {...props} > - Open main menu - + {isOpen ? "Close" : "Open"} main menu + {isOpen ? : } ); }; From f70c8c220fec561ab64cc311bb404e86ebbab31a Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Mon, 29 Apr 2024 17:26:43 +0530 Subject: [PATCH 5/6] fix: use client added in example --- apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx b/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx index 88e00dd45..68f3fa6cb 100644 --- a/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx +++ b/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx @@ -1,3 +1,5 @@ +"use client"; + import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react"; import Link from "next/link"; import { CiMenuFries } from "react-icons/ci"; From b61bb93a0a086c2259fcba1ffa0821fa141f58a7 Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Thu, 20 Jun 2024 07:35:19 +0530 Subject: [PATCH 6/6] fix: removed the next/link reference from the navbar.withCustomMenuIcon example --- .../navbar/navbar.withCustomMenuIcon.tsx | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx b/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx index 68f3fa6cb..3b8138018 100644 --- a/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx +++ b/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx @@ -1,20 +1,18 @@ "use client"; import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react"; -import Link from "next/link"; import { CiMenuFries } from "react-icons/ci"; import { type CodeData } from "~/components/code-demo"; const code = ` "use client"; -import Link from "next/link"; import { Navbar } from "flowbite-react"; export function Component() { return ( - + Flowbite React Logo Flowbite React @@ -23,7 +21,7 @@ export function Component() { Home - + About Services @@ -36,13 +34,12 @@ export function Component() { `; const codeRSC = ` -import Link from "next/link"; import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react"; export function Component() { return ( - + Flowbite React Logo Flowbite React @@ -51,7 +48,7 @@ export function Component() { Home - + About Services @@ -66,7 +63,7 @@ export function Component() { export function Component() { return ( - + Flowbite React Logo Flowbite React @@ -75,9 +72,7 @@ export function Component() { Home - - About - + About Services Pricing Contact