feat(component): add <Drawer/> (#1342)

* feat(component): add `<Drawer/>` component Thank you to @dhavalveera for your work in #1265 to get this component started! * feat(ui): drawer - cleanup * fix(ui): drawer - import type * chore: web - sort drawer examples index * fix(ui): drawer - tailwind intellisense to theme object --------- Co-authored-by: SutuSebastian <[email protected]>
themesberg · Apr 16, 2024 · 1ffd9dc · 1ffd9dc
1 parent 8c4a546
commit 1ffd9dc
Show file tree

Hide file tree

Showing 29 changed files with 4,126 additions and 2 deletions.
diff --git a/apps/web/content/docs/components/drawer.mdx b/apps/web/content/docs/components/drawer.mdx
@@ -0,0 +1,114 @@
+---
+title: React Drawer (offcanvas) - Flowbite
+description: The Drawer component can be used as a hidden off-canvas sidebar for navigation and to show other information based on multiple styles and placements
+---
+
+Use the Drawer component (or "off-canvas") to show a fixed element relative to the document page from any side for navigation, contact forms, informational purposes or other user actions.
+
+You can set multiple options such as the placement, activate body scrolling, show or hide the backdrop and even use the swipeable edge functionality to show a small part of the drawer when it is not shown completely.
+
+To start using the drawer component you need to import it from `flowbite-react`:
+
+```jsx
+import { Drawer } from "flowbite-react";
+```
+
+## Default drawer
+
+<Example name="drawer.root" />
+
+## Drawer navigation
+
+Use this example to show a navigational sidebar inside the drawer component.
+
+<Example name="drawer.navigation" />
+
+## Contact form
+
+Use this example to show a contact form inside the drawer component.
+
+<Example name="drawer.contactForm" />
+
+## Form elements
+
+Use this example if you want to add form elements inside the drawer component including datepickers.
+
+<Example name="drawer.formElements" />
+
+## Placement
+
+Use the placement options to position the drawer component either on the top, right, bottom, or left side of the document page. This can be done using the `position="{top|right|bottom|left}"` attribute where the default value is "left".
+
+### Left drawer
+
+Use this example where you can position the drawer component on the left side of the page.
+
+<Example name="drawer.left" />
+
+### Right drawer
+
+Use this example to show the drawer component on the right side of the page.
+
+<Example name="drawer.right" />
+
+### Top drawer
+
+Use this example to show the drawer on the top side of the page.
+
+<Example name="drawer.top" />
+
+### Bottom drawer
+
+Use this example to show the drawer on the bottom side of the page.
+
+<Example name="drawer.bottom" />
+
+## Body scrolling
+
+By default, body scrolling is disabled when the drawer is visible, however, you can choose to enable it using the `bodyScrolling="{true|false}"` attribute.
+
+### Disabled (default)
+
+This is an example where the body scrolling behaviour is disabled when the drawer is visible.
+
+<Example name="drawer.noBodyScrolling" />
+
+### Enabled
+
+Get started with this example in order to enable body scrolling even if the drawer component is visible by applying `overflow-y: auto` to your `<body>`.
+
+<Example name="drawer.bodyScrolling" />
+
+## Backdrop
+
+The backdrop element can be used to dim out the background elements when the drawer is visible and also automatically hide the component when clicking outside of it.
+
+Use the `backdrop="{true|false}"` attribute where you can disable or enable the backdrop element.
+
+### Enabled (default)
+
+Use this example to enable the backdrop element by default.
+
+<Example name="drawer.backdrop" />
+
+### Disabled
+
+Use the `backdrop="false"` attribute to disable the backdrop element when the drawer is shown.
+
+<Example name="drawer.noBackdrop" />
+
+## Swipeable edge
+
+The drawer edge functionality allows you to show a small part of the drawer when it is not shown completely by applying the `edge="{true|false}"` attribute, specifying the edge you'd like to set with, e.g., `theme={{ edge: "bottom-16" }}`, and adding `onClick={() => setIsOpen(!isOpen)}` to `<DrawerHeader/>`.
+
+<Example name="drawer.swipeableEdge" />
+
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<Theme name="drawer" />
+
+## References
+
+- [Flowbite Drawer](https://flowbite.com/docs/components/drawer/)
diff --git a/apps/web/data/docs-sidebar.ts b/apps/web/data/docs-sidebar.ts
@@ -64,6 +64,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
       { title: "Card", href: "/docs/components/card" },
       { title: "Carousel", href: "/docs/components/carousel" },
       { title: "Datepicker", href: "/docs/components/datepicker", isNew: true },
+      { title: "Drawer", href: "/docs/components/drawer", isNew: true },
       { title: "Dropdown", href: "/docs/components/dropdown" },
       { title: "Footer", href: "/docs/components/footer" },
       { title: "Forms", href: "/docs/components/forms" },