Feat/BottomNavigation - added BottomNavigation with Example

apps/web/content/docs/components/bottom-navigation.mdx

@@ -0,0 +1,26 @@
+---
+title: React Bottom Navigation - Flowbite
+description: Use the bottom navigation bar component to allow users to navigate through your website or create a control bar using a menu that is positioned at the bottom of the page
+---
+
+The bottom bar component can be used to allow menu items and certain control actions to be performed by the user through the use of a fixed bar positioning on the bottom side of your page.
+
+Check out multiple examples of the bottom navigation component based on various styles, controls, sizes, content and leverage the utility classes from Tailwind CSS to integrate into your own project.
+
+## Default bottom navigation
+
+Use the default bottom navigation bar example to show a list of menu items as buttons to allow the user to navigate through your website based on a fixed position. You can also use anchor tags instead of buttons.
+
+<Example name="bottomNavigation.root" />
+
+## Menu items with border
+
+This example can be used to show a border between the menu items inside the bottom navigation bar.
+
+<Example name="bottomNavigation.withBorder" />
+
+## Example with Tooltip
+
+This example can be used to show a Tooltip on the hover on the menu items.
+
+<Example name="bottomNavigation.withTooltip" />

apps/web/data/components.tsx

@@ -35,6 +35,13 @@ export const COMPONENTS_DATA: Component[] = [
     link: "/docs/components/badge",
     classes: "w-28",
   },
+  {
+    name: "Bottom Navigation",
+    image: "/images/components/bottom-bar.svg",
+    imageDark: "/images/components/bottom-bar-dark.svg",
+    link: `/docs/components/bottom-navigation`,
+    classes: "w-28",
+  },
   {
     name: "Breadcrumbs",
     image: "/images/components/breadcrumbs.svg",

apps/web/data/docs-sidebar.ts

@@ -58,6 +58,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
       { title: "Avatar", href: "/docs/components/avatar" },
       { title: "Badge", href: "/docs/components/badge" },
       { title: "Banner", href: "/docs/components/banner", isNew: true },
+      { title: "Bottom Navigation", href: "/docs/components/bottom-navigation", isNew: true },
       { title: "Breadcrumb", href: "/docs/components/breadcrumb" },
       { title: "Button", href: "/docs/components/button" },
       { title: "Button group", href: "/docs/components/button-group" },

apps/web/examples/bottomNavigation/bottomNavigation.root.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { BottomNavigation } from "flowbite-react";
+import { AiFillHome } from "react-icons/ai";
+import { CgProfile } from "react-icons/cg";
+import { GiSettingsKnobs, GiWallet } from "react-icons/gi";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { BottomNavigation } from "flowbite-react";
+
+function Component() {
+  return (
+    <BottomNavigation>
+      <BottomNavigation.Item label="Home" icon={AiFillHome} />
+      <BottomNavigation.Item label="Wallet" icon={GiWallet} />
+      <BottomNavigation.Item label="Settings" icon={GiSettingsKnobs} />
+      <BottomNavigation.Item label="Profile" icon={CgProfile} />
+    </BottomNavigation>
+  )
+}
+`;
+
+function Component() {
+  return (
+    <div className="relative bottom-0 h-20">
+      <BottomNavigation
+        theme={{
+          root: {
+            base: "absolute bottom-0 left-0 z-50 h-16 w-full border-t border-gray-200 bg-white dark:border-gray-600 dark:bg-gray-700",
+          },
+        }}
+      >
+        <BottomNavigation.Item label="Home" icon={AiFillHome} />
+        <BottomNavigation.Item label="Wallet" icon={GiWallet} />
+        <BottomNavigation.Item label="Settings" icon={GiSettingsKnobs} />
+        <BottomNavigation.Item label="Profile" icon={CgProfile} />
+      </BottomNavigation>
+    </div>
+  );
+}
+
+export const root: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+  ],
+  githubSlug: "bottomNavigation/bottomNavigation.root.tsx",
+  component: <Component />,
+};

apps/web/examples/bottomNavigation/bottomNavigation.withBorder.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { BottomNavigation } from "flowbite-react";
+import { AiFillHome } from "react-icons/ai";
+import { CgProfile } from "react-icons/cg";
+import { GiSettingsKnobs, GiWallet } from "react-icons/gi";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { BottomNavigation } from "flowbite-react";
+
+function Component() {
+  return (
+    <BottomNavigation bordered>
+      <BottomNavigation.Item label="Home" icon={AiFillHome} />
+      <BottomNavigation.Item label="Wallet" icon={GiWallet} />
+      <BottomNavigation.Item label="Settings" icon={GiSettingsKnobs} />
+      <BottomNavigation.Item label="Profile" icon={CgProfile} />
+    </BottomNavigation>
+  )
+}
+`;
+
+function Component() {
+  return (
+    <div className="relative bottom-0 h-20">
+      <BottomNavigation
+        theme={{
+          root: {
+            base: "absolute bottom-0 left-0 z-50 h-16 w-full border-t border-gray-200 bg-white dark:border-gray-600 dark:bg-gray-700",
+          },
+        }}
+        bordered
+      >
+        <BottomNavigation.Item label="Home" icon={AiFillHome} />
+        <BottomNavigation.Item label="Wallet" icon={GiWallet} />
+        <BottomNavigation.Item label="Settings" icon={GiSettingsKnobs} />
+        <BottomNavigation.Item label="Profile" icon={CgProfile} />
+      </BottomNavigation>
+    </div>
+  );
+}
+
+export const withBorder: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+  ],
+  githubSlug: "bottomNavigation/bottomNavigation.withBorder.tsx",
+  component: <Component />,
+};

apps/web/examples/bottomNavigation/bottomNavigation.withTooltip.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { BottomNavigation } from "flowbite-react";
+import { AiFillHome } from "react-icons/ai";
+import { CgProfile } from "react-icons/cg";
+import { GiSettingsKnobs, GiWallet } from "react-icons/gi";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { BottomNavigation } from "flowbite-react";
+
+function Component() {
+  return (
+    <BottomNavigation>
+      <BottomNavigation.Item label="Home" icon={AiFillHome} showTooltip />
+      <BottomNavigation.Item label="Wallet" icon={GiWallet} showTooltip />
+      <BottomNavigation.Item label="Settings" icon={GiSettingsKnobs} showTooltip />
+      <BottomNavigation.Item label="Profile" icon={CgProfile} showTooltip />
+    </BottomNavigation>
+  )
+}
+`;
+
+function Component() {
+  return (
+    <div className="relative bottom-0 h-20">
+      <BottomNavigation
+        theme={{
+          root: {
+            base: "absolute bottom-0 left-0 z-50 h-16 w-full border-t border-gray-200 bg-white dark:border-gray-600 dark:bg-gray-700",
+          },
+        }}
+      >
+        <BottomNavigation.Item label="Home" icon={AiFillHome} showTooltip />
+        <BottomNavigation.Item label="Wallet" icon={GiWallet} showTooltip />
+        <BottomNavigation.Item label="Settings" icon={GiSettingsKnobs} showTooltip />
+        <BottomNavigation.Item label="Profile" icon={CgProfile} showTooltip />
+      </BottomNavigation>
+    </div>
+  );
+}
+
+export const withTooltip: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+  ],
+  githubSlug: "bottomNavigation/bottomNavigation.withBorder.tsx",
+  component: <Component />,
+};

apps/web/examples/bottomNavigation/index.ts

@@ -0,0 +1,3 @@
+export { root } from "./bottomNavigation.root";
+export { withBorder } from "./bottomNavigation.withBorder";
+export { withTooltip } from "./bottomNavigation.withTooltip";

apps/web/examples/index.ts

@@ -4,6 +4,7 @@ export * as avatar from "./avatar";
 export * as badge from "./badge";
 export * as banner from "./banner";
 export * as blockquote from "./blockquote";
+export * as bottomNavigation from "./bottomNavigation";
 export * as breadcrumb from "./breadcrumb";
 export * as button from "./button";
 export * as buttonGroup from "./buttonGroup";