Closing Sheet component from within a component inside the SheetContent

[AbhayaShankar]

I have a use case where I wanna close the sheet component when I click on any link.
But the thing is the all links are wrapped inside another component.

 <Sheet>
      <SheetTrigger asChild>
        <Button variant={"ghost"} size={"icon"} className="lg:hidden">
          <Menu />
        </Button>
      </SheetTrigger>
      <SheetContent side={"left"} className="p-0">
        <Navbar />
      </SheetContent>
 </Sheet>

{NavbarLinks.map((item) => (
          <Link
            key={item.id}
            className={cn(
              "font-semibold transition-all delay-75 text-[17px] dark:text-muted-foreground 
               dark:hover:text-white  text-gray-500 hover:text-gray-900 ",
              font.className
            )}
            href={item.href}
          >
            {item.label}
          </Link>
))}

And, I want the SheetClose component to close the sheet when a link which is inside Navbar Component is clicked. How can it be done ?

Upon clicking on these links the sheet component closes. Can someone suggest me a way of doing that!

[joaom00]

You can do:

{NavbarLinks.map((item) => (
     <SheetClose asChild>
          <Link
            key={item.id}
            className={cn(
              "font-semibold transition-all delay-75 text-[17px] dark:text-muted-foreground 
               dark:hover:text-white  text-gray-500 hover:text-gray-900 ",
              font.className
            )}
            href={item.href}
          >
            {item.label}
          </Link>
    </SheetClose>
))}

[joaom00]

Yeah, so you need to render <SheetClose /> only when <Navbar /> in inside <SheetContent />

[joaom00]

i have the same doubt, Is this the most optimal way to do it? thx

I would say so. another way is to control the open state with open and onOpenChange props and pass down the setter state

[AbhayaShankar]

So let's say I pass on the open state and onOpenChange props such like this

// sheetOpen state
const [sheetOpen, setSheetOpen] = useState(false);

 <Sheet  open={sheetOpen} onOpenChange={setSheetOpen}>
      {...content}
      <SheetContent side={"left"} className="p-0">
        <Navbar />
      </SheetContent>
 </Sheet>

How do I pass on the props down to Navbar component
How does the Sheet component knows that the SheetClose is being called from inside the SheetContent?

 {NavbarLinks.map((item) => (
          <SheetClose asChild key={item.id}>
            <Link
              key={item.id}
              href={item.href}
            >
              {item.label}
            </Link>
          </SheetClose>
        ))}

Can you suggest a way of achieving this ?

[joaom00]

Here an example: https://codesandbox.io/s/upbeat-galileo-6rxfm7?file=/src/App.tsx

How does the Sheet component knows that the SheetClose is being called from inside the SheetContent?

because it uses context to close the sheet so it needs to be inside <Sheet /> which is the context provider

[AbhayaShankar]

Great! Thanks for the explanation @joaom00 That helps a lot. 🔥

[Hombre2014]

Thank you very much @joaom00 !

[itpaulin]

Thank you @joaom00

[PritamMagdum]

Thank You @joaom00

[jadejamig]

You saved me @joaom00