Used sheet as sidebar in mobile device. it's preventing routing after clicking close button

[JaznanOfficial]

I used sheet as mobile sidebar. where I have routes to navigate other pages. and some routes contains hash routing like /#testimonials. when I open sheet and click Link component of next.js it's perfectly navigating me to that route and special block connected using hash. but when am clicking which rendering a close button, then hash routing not working. and it's throw me at the top of the page. see it's navigating other page perfectly but preventing only hash routing and throw at the top of the page. below is my code.

` "use client";

import { useEffect, useRef, useState } from "react"; import { Menu, MenuIcon, MinusIcon, MoonIcon, SunIcon } from "lucide-react";

import { Button } from "@/components/ui/button"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { cn, contactItems, routes } from "@/lib/utils"; import { Sheet, SheetClose, SheetContent, SheetTrigger } from "@/components/ui/sheet";

interface SideNavbarProps { themeHandler: () => void; }

const SideNavbar: React.FC = ({ themeHandler }) => { const pathname = usePathname(); const sheetCloseRef = useRef(null); const [isMounted, setIsMounted] = useState(false); useEffect(() => { setIsMounted(true); }, []);

if (!isMounted) {
    return null;
}

// const handleCloseSheet = () => {
//     if (sheetCloseRef.current) {
//         sheetCloseRef.current.click();
//     }
// };
return (
    <Sheet>
        <SheetTrigger>
            <Button variant="ghost" size="icon">
                <MenuIcon />
            </Button>
        </SheetTrigger>
        <SheetContent
            side="right"
            className="p-0 min-h-screen overflow-y-scroll dark:border-l-secondary dark:bg-primary"
        >
            <nav className="space-y-4 py-10 flex flex-col gap-5  ">
                <div className="px-3">
                    <div className="space-y-1">
                        {routes.map((route) => (
                            <Link
                                key={route.link}
                                href={route.link}
                                className={`text-lg group flex p-3  justify-center font-medium cursor-pointer hover:text-white  hover:bg-primary rounded-lg transition
                            ${
                                pathname === route.link
                                    ? "text-secondary bg-primary"
                                    : "text-[#172554] dark:text-white"
                            }`}
                                // onClick={handleCloseSheet}
                            >
                                <div className="flex items-center justify-center flex-1">
                                    {route.name}
                                </div>
                            </Link>
                        ))}
                    </div>
                </div>
            </nav>
            <span className="mx-5 text-secondary flex justify-center items-center">
                <MinusIcon fill="#00C0FF" />
            </span>
            <div
                className="flex justify-center items-center cursor-pointer"
                onClick={themeHandler}
            >
                <MoonIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 text-primary" />
                <SunIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 text-yellow-500" />
            </div>
            <span className="mx-5 text-secondary flex justify-center items-center">
                <MinusIcon fill="#00C0FF" />
            </span>
            <div className="flex justify-center items-center">
                {contactItems.map((contactItem) => {
                    const { link, icon: Icon, color } = contactItem;
                    return (
                        <a
                            className={cn(color, "rounded-full mx-2 p-3")}
                            href={link}
                            target="_blank"
                            rel="noreferrer"
                            key={link}
                        >
                            <Icon />
                        </a>
                    );
                })}
            </div>
        </SheetContent>
        <SheetClose />
    </Sheet>
);

};

export default SideNavbar; `

and

`export const routes = [ { link: "/", name: "Home", }, { link: "/#about", name: "About", }, { link: "/#skills", name: "Skills", }, { link: "/#services", name: "Services", }, { link: "/#testimonials", name: "Testimonials", }, { link: "/#contact", name: "Contact", }, { link: "/projects", name: "Projects", },

{
    link: "/blogs",
    name: "Blogs",
},
{
    link: "/universes",
    name: "Universes",
},

];`

screen-capture.webm

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[jakubtae]

For anyone with such a problem just wrap each link with this tag : <SheetClose asChild>link or whatever</SheetClose> It makes clicking on a link just close the Sheet.

[AdityaRaj0001]

For anyone with such a problem just wrap each link with this tag : <SheetClose asChild>link or whatever</SheetClose> It makes clicking on a link just close the Sheet.

Thanks it worked for me

[adrianszablowski]

If anyone has a problem with handling the opening and closing of the sidebar, there is a hook useSidebar that allows you to control this without interfering with the sidebar component

const { openMobile, setOpenMobile } = useSidebar();