New component : Sidebar

[LeoBlouin]

Hi ! Congratulations for your work. I love NextUI and I think you have a very big potential.

I think a new component like navbar/sidebar should be great idea.

Something like this : https://vuesax.com/docs/components/Sidebar.html#default

[jrgarciadev]

Hi! @LeoBlouin thanks for your words! I'm glad you love NextUI, yeah for sure the Sidebar and Navbar components are on the waiting list 🙌🏻

[sofianso24]

yes, please, a smoth nextUi sideBar with a cool transition and differnt backgrounds effects like blur, and opened from different sides (from left, from bottom ........), it will be awsome, cant wait

[alexander-densley]

any updates?

[unav4ila8le]

I'm looking for a sidebar too

[arjun-mavonic]

Still waiting. ☠️

[J4v4Scr1pt]

It's included in the Pro package ppl:
https://www.nextui.pro/components/application/sidebars

I was a bit hesitant at first, but totally worth the price. The cost of this is very low imo.

[SellersEvan]

Sidebars and navbars would be a great addition. It would also be awesome to have bottom navbars for mobile web apps, and empty states. I saw another UI framework call these patterns, which I think is a great way to differentiate them from regular components.

[lindamacdonald]

Absolutely agree🙂

[rizqijune]

And maybe add some transition and different direction. Like Semantic UI do. I think it will be great with NEXTUI design😄 I'm excited to see all of the waitlist components release😁
Sidebar - Semantic UI React

[sofianso24]

absolutely agree

[Lucasvo1]

How far is this feature?

[Warisaremou]

Sidebar and Timeline 🙏

[Danjavia]

+1

[Yanis02015]

+1

[ZeKap]

+1

[dm-sizov]

+1

[liangwei-artefact]

+1

[franciskodama]

+1

[neelhabib]

side bar is not available till now. Please implement it. Thanks

[gooooooooney]

+1

[AntonAndreevichMoroz]

+1 It may be useful as a template for writing your own component https://github.com/Svetloslav15/react-sidebar-ui

[jimmy-huang]

+1

[AntonAndreevichMoroz]

+1

[johannbuscail]

Why is there no update on this ??

[ApaxPhoenix]

I'm not sure, I believe this will be privated until next year.

[ApaxPhoenix]

1+

[vitalijalbu]

+1

[Body-Alhoha]

• 1

[lainosantos]

Using Modal component with some variations, we can make a simple Sidebar. Just another workaround :)

import React from "react";
import {Modal, ModalContent, ModalBody, Button, useDisclosure, extendVariants, ModalHeader} from "@nextui-org/react";

const Sidebar = extendVariants(Modal, {
  variants: {
    height: {
      "half-full": {
        base: "h-[50%] max-h-full",
      },
      half: {
        base: "h-[50%] max-h-[50%]",
      },
      full: {
        base: "h-full max-h-full",
      },
    },
    placement: {
      "left": {
        wrapper: [
          "fixed",
          "top-0",
          "left-0",
          "bottom-0",
          "items-start",
          "sm:items-start",
          "[--scale-enter:100%]",
          "[--scale-exit:100%]",
          "[--opacity-enter:100%]",
          "[--opacity-exit:0%]",
          "[--slide-y-enter:0px]",
          "[--slide-y-exit:0px]",
          "[--slide-x-enter:0px]",
          "[--slide-x-exit:-200px]",
          "sm:[--scale-enter:100%]",
          "sm:[--scale-exit:100%]",
          "justify-start",
        ],
        base: [
          "m-0",
          "sm:m-0",
          "rounded-none",
        ],
        closeButton: [
          "right-3",
          "top-3",
        ],
        header: [
          "pr-12",
        ],
      },
      "right": {
        wrapper: [
          "fixed",
          "top-0",
          "left-0",
          "bottom-0",
          "items-start",
          "sm:items-start",
          "[--scale-enter:100%]",
          "[--scale-exit:100%]",
          "[--opacity-enter:100%]",
          "[--opacity-exit:0%]",
          "[--slide-y-enter:0px]",
          "[--slide-y-exit:0px]",
          "[--slide-x-enter:0px]",
          "[--slide-x-exit:200px]",
          "sm:[--scale-enter:100%]",
          "sm:[--scale-exit:100%]",
          "justify-end",
        ],
        base: [
          "m-0",
          "sm:m-0",
          "rounded-none",
        ],
        closeButton: [
          "left-3",
          "top-3",
          "right-auto"
        ],
        header: [
          "pl-12",
        ],
      },
    },
  },
  defaultVariants: {
    size: "md",
    height: "full",
    shadow: "sm",
    placement: "left",
    backdrop: "opaque",
    scrollBehavior: "inside",
  },
});

export default function App() {
  const {isOpen, onOpen, onOpenChange} = useDisclosure();
  const [placement, setPlacement] = React.useState("left")

  const placements = ["left", "right"];

  const handleOpen = (placement) => {
    setPlacement(placement)
    onOpen();
  }

  return (
    <div className="flex flex-col gap-2">
      <div className="flex flex-wrap gap-3">
        {placements.map((b) => (
          <Button  
            key={b}
            variant="flat" 
            color="warning" 
            onPress={() => handleOpen(b)}
            className="capitalize"
          >
           {b}
          </Button>
        ))}  
      </div>
      <Sidebar
        placement={placement}
        isOpen={isOpen}
        height={"full"}
        onOpenChange={onOpenChange}
        motionProps={{
          variants: {
            enter: {
              x: "var(--slide-x-enter)",
              opacity: "var(--opacity-enter)",
              scale: "var(--scale-enter)",
              y: "var(--slide-y-enter)",
              transition: {
                duration: 0.3,
                ease: "easeOut",
              },
            },
            exit: {
              x: "var(--slide-x-exit)",
              opacity: "var(--opacity-exit)",
              scale: "var(--scale-exit)",
              y: "var(--slide-y-exit)",
              transition: {
                duration: 0.2,
                ease: "easeIn",
              },
            },
          }
        }}
      >
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
              <ModalBody>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Nullam pulvinar risus non risus hendrerit venenatis.
                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Nullam pulvinar risus non risus hendrerit venenatis.
                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
                </p>
              </ModalBody>
            </>
          )}
        </ModalContent>
      </Sidebar>
    </div>
  );
}

[shipotech]

+1 please

[blockchainer2022]

+1

[J4v4Scr1pt]

It's included in the Pro package ppl:
https://www.nextui.pro/components/application/sidebars

Low cost for great components and upcoming ones.

[cpy-xcend]

+1

[amariwan]

+1

[LucasTrombim]

+1

[thiagomeneguzzi]

+1

[Elwqnn]

+1

[asppj]

+1