fix(navbar): on Mobile Screen Navbar remains open even page is changed (

#1247)

* fix((navbar)): fixed Navbar Collapse was not happening when clicking on Navbar.Link

* fix(navbar): eslint issue fixed for Navbar.Link

* fix: made changes based on Suggested Changes in PR # 1247

* fix: handling Users Custom onClick event as well

* fix: renamed the userOnClick to onClick

* fix: made changes accordingly to latest review by Sutu

src/components/Navbar/NavbarLink.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ComponentProps, ElementType, FC } from 'react';
+import type { ComponentProps, ElementType, FC, MouseEvent } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
@@ -28,12 +28,18 @@ export const NavbarLink: FC<NavbarLinkProps> = ({
   children,
   className,
   theme: customTheme = {},
+  onClick,
   ...props
 }) => {
-  const { theme: rootTheme } = useNavbarContext();
+  const { theme: rootTheme, setIsOpen } = useNavbarContext();
 
   const theme = mergeDeep(rootTheme.link, customTheme);
 
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    setIsOpen(false);
+    onClick?.(event);
+  };
+
   return (
     <li>
       <Component
@@ -44,6 +50,7 @@ export const NavbarLink: FC<NavbarLinkProps> = ({
           theme.disabled[disabled ? 'on' : 'off'],
           className,
         )}
+        onClick={handleClick}
         {...props}
       >
         {children}