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. 🔥

[HamedMP]

Thanks for sharing both solutions, <SheetClose> is way more performant (on my dev) than using States. With states the page loads on each sheet open or link click.

[sahnisarbjit]

Thanks @joaom00. Adding more, if you use SSR (For example Next.js server component), then <SheetClose> is the way to go. In other solution, navigation links won't be visible in HTML response. Hence bots can't see links to easily navigate the site.

[Hombre2014]

Thank you very much @joaom00 !

[itpaulin]

Thank you @joaom00

[PritamMagdum]

Thank You @joaom00

[jadejamig]

You saved me @joaom00

[MANOJ-M-01]

Thank you @joaom00

[michaelcanonizado]

Thanks @joaom00🙌!

Went with the second option. But it seems to introduce another issue when you are rendering the component within another section of the website that doesn't need to trigger the sheet close and the setOpen() function. It totally hard reloads the page and throws a NextJS error.

Solved this by marking setOpen() as optional within the component:

const Navbar = ({
setOpen
}:{
setOpen?: (value: boolean) => void;
}) => {
...
}

and conditional setting it on the onClick prop:

<Link
    key={item.id}
    href={item.href}
    onClick={setOpen ? () => setOpen(false) : () => {}}
/>

[Ahmad-Omar-design]

Thank you so much @joaom00 !!