Navbar Not Extended Tool Tip Bug (Children)

[rashadraz]

It is showing for main Component but not for child component

[SadmanYasar]

I couldn't find a way to solve this so decided to just replace the hover code with Tooltip. This is the updated version of side-nav.tsx that works for me, using Accordion type multiple and changed the zustand code to use string array instead for openItem:

export function SideNav({ items, setOpen }: SideNavProps) {
    const path = usePathname();
    const { isOpen, openItem, setOpenItems } = useSidebarStore((state) => state,);

    useEffect(() => {
        setOpenItems(openItem);
    }, [isOpen]);

    return (
        <nav className="space-y-2">
            {items.map((item) =>
                item.isChidren ? (
                    <Accordion
                        type="multiple"
                        value={openItem}
                        onValueChange={(value) => setOpenItems(value)}
                        key={item.title}
                    >
                        <AccordionItem value={item.title} className="border-none">
                            {!isOpen && (
                                <TooltipProvider delayDuration={100}>
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <AccordionTrigger
                                                className={cn(
                                                    buttonVariants({ variant: 'ghost' }),
                                                    'group relative z-[51] flex h-12 justify-between px-4 py-2 text-base duration-200 hover:bg-blue-950 hover:text-white text-white hover:no-underline',
                                                )}
                                            >
                                                <div>
                                                    <item.icon className={cn('h-5 w-5', item.color)} />
                                                </div>
                                            </AccordionTrigger>
                                        </TooltipTrigger>
                                        <TooltipContent side="right">
                                            {item.title}
                                        </TooltipContent>
                                    </Tooltip>
                                </TooltipProvider>
                            )}

                            {isOpen && (
                                <AccordionTrigger className={cn(
                                    buttonVariants({ variant: 'ghost' }),
                                    'group relative z-[51] flex h-12 justify-between px-4 py-2 text-base duration-200 hover:bg-blue-950 hover:text-white text-white hover:no-underline',
                                )}>
                                    <div>
                                        <item.icon className={cn('h-5 w-5', item.color)} />
                                    </div>
                                    <div
                                        className={cn(
                                            'absolute z-[51] left-12 text-base duration-200 ',
                                        )}
                                    >
                                        {item.title}
                                    </div>
                                    <ChevronDownIcon className="h-5 w-5" />
                                </AccordionTrigger>
                            )}
                            <AccordionContent className="mt-2 space-y-4 pb-1">
                                {item.children?.map((child) => {
                                    if (!isOpen) {
                                        return (
                                            <>
                                                <TooltipProvider delayDuration={100}>
                                                    <Tooltip>
                                                        <TooltipTrigger asChild>
                                                            <Link
                                                                key={child.title}
                                                                href={child.href}
                                                                onClick={() => {
                                                                    if (setOpen) setOpen(false)
                                                                }}
                                                                className={cn(
                                                                    buttonVariants({ variant: 'ghost' }),
                                                                    'group relative flex h-12 justify-start hover:bg-blue-950 text-white hover:text-white',
                                                                    path === child.href && 'bg-blue-900 hover:bg-blue-950 font-bold hover:text-white',
                                                                )}
                                                            >
                                                                <child.icon className={cn('h-5 w-5', child.color)} />
                                                            </Link>
                                                        </TooltipTrigger>
                                                        <TooltipContent side="right">
                                                            {child.title}
                                                        </TooltipContent>
                                                    </Tooltip>
                                                </TooltipProvider>
                                            </>
                                        );
                                    } else {
                                        return (
                                            <Link
                                                key={child.title}
                                                href={child.href}
                                                onClick={() => {
                                                    if (setOpen) setOpen(false)
                                                }}
                                                className={cn(
                                                    buttonVariants({ variant: 'ghost' }),
                                                    'group relative flex h-12 justify-start hover:bg-blue-950 text-white hover:text-white',
                                                    path === child.href && 'bg-blue-900 hover:bg-blue-950 font-bold hover:text-white',
                                                )}
                                            >
                                                <child.icon className={cn('h-5 w-5', child.color)} />
                                                <div
                                                    className={cn(
                                                        'absolute z-[51] left-12 text-base duration-200 ',
                                                    )}
                                                >
                                                    {child.title}
                                                </div>
                                            </Link>
                                        );
                                    }
                                })}
                            </AccordionContent>
                        </AccordionItem>
                    </Accordion>
                ) : (
                    <>
                        {!isOpen && (
                            <TooltipProvider delayDuration={100}>
                                <Tooltip>
                                    <TooltipTrigger asChild>
                                        <Link
                                            key={item.title}
                                            href={item.href}
                                            onClick={() => {
                                                if (setOpen) setOpen(false)
                                            }}
                                            className={cn(
                                                buttonVariants({ variant: 'ghost' }),
                                                'group relative flex h-12 justify-start hover:bg-blue-950 text-white hover:text-white',
                                                path === item.href && 'bg-blue-900 hover:bg-blue-950 font-bold hover:text-white',
                                            )}
                                        >
                                            <item.icon className={cn('h-5 w-5', item.color)} />
                                        </Link>
                                    </TooltipTrigger>
                                    <TooltipContent side="right">
                                        {item.title}
                                    </TooltipContent>
                                </Tooltip>
                            </TooltipProvider>
                        )}

                        {isOpen && (
                            <Link
                                key={item.title}
                                href={item.href}
                                onClick={() => {
                                    if (setOpen) setOpen(false)
                                }}
                                className={cn(
                                    buttonVariants({ variant: 'ghost' }),
                                    'group relative flex h-12 justify-start hover:bg-blue-950 text-white hover:text-white',
                                    path === item.href && 'bg-blue-900 hover:bg-blue-950 font-bold hover:text-white',
                                )}
                            >
                                <item.icon className={cn('h-5 w-5', item.color)} />
                                <div
                                    className={cn(
                                        'absolute z-[51] left-12 text-base duration-200 ',
                                    )}
                                >
                                    {item.title}
                                </div>
                            </Link>
                        )}
                    </>
                ),
            )
            }
        </nav >
    );
}