fix: add Nextjs router Link for menu navigation

Author: mkubdev

src/components/Global/Navbar.js

@@ -15,28 +15,28 @@ const navigation = [
 const Navbar = () => {
   return (
     <Popover as="header" className="relative">
-      <div className="bg-transparent pt-6">
+      <div className="pt-6 bg-transparent">
         {/* NAVIGATION BAR */}
         <nav
-          className="relative mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6"
+          className="relative flex items-center justify-between px-4 mx-auto max-w-7xl sm:px-6"
           aria-label="Global"
         >
-          <div className="flex flex-1 items-center">
-            <div className="flex w-full items-center justify-between md:w-auto">
+          <div className="flex items-center flex-1">
+            <div className="flex items-center justify-between w-full md:w-auto">
               <Link href="/">
                 <>
                   <span className="sr-only ">WebX DAO</span>
                   <img
-                    className="h-8 w-auto sm:h-10 cursor-pointer"
+                    className="w-auto h-8 cursor-pointer sm:h-10"
                     src="/images/logo/white_logo.png"
                     alt="WebX DAO White Logo"
                   />
                 </>
               </Link>
-              <div className="-mr-2 flex items-center md:hidden">
-                <Popover.Button className="focus-ring-inset inline-flex items-center justify-center rounded-md bg-transparent p-2 text-gray-400 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
+              <div className="flex items-center -mr-2 md:hidden">
+                <Popover.Button className="inline-flex items-center justify-center p-2 text-gray-400 bg-transparent rounded-md focus-ring-inset hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
                   <span className="sr-only">Open main menu</span>
-                  <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+                  <Bars3Icon className="w-6 h-6" aria-hidden="true" />
                 </Popover.Button>
               </div>
             </div>
@@ -45,25 +45,20 @@ const Navbar = () => {
           <div className="hidden md:flex md:items-center md:space-x-6">
             <div className="hidden space-x-8 md:ml-10 md:flex">
               {navigation.map((item) => (
-                <a
-                  key={item.name}
-                  href={item.href}
-                  className="text-base font-medium text-white hover:text-gray-300"
-                >
-                  {item.name}
-                </a>
+                <Link href={item.href} key={item.name}>
+                  <a className="text-base font-medium text-white hover:text-gray-300">
+                    {item.name}
+                  </a>
+                </Link>
               ))}
             </div>
 
             <a
               href="#"
-              className="inline-flex items-center rounded-md border border-transparent bg-gray-100 px-4 py-2 text-base font-medium text-gray-600 hover:text-white/80  hover:bg-gray-700"
+              className="inline-flex items-center px-4 py-2 text-base font-medium text-gray-600 bg-gray-100 border border-transparent rounded-md hover:text-white/80 hover:bg-gray-700"
             >
               GitHub
-              <SiGithubsponsors
-                className="ml-3 h-5 w-5 text-pink-600"
-                aria-hidden="true"
-              />
+              <SiGithubsponsors className="w-5 h-5 ml-3 text-pink-600" aria-hidden="true" />
             </a>
           </div>
         </nav>
@@ -80,31 +75,27 @@ const Navbar = () => {
       >
         <Popover.Panel
           focus
-          className="absolute inset-x-0 top-0 z-10 origin-top transform p-2 transition md:hidden"
+          className="absolute inset-x-0 top-0 z-10 p-2 transition origin-top transform md:hidden"
         >
-          <div className="overflow-hidden rounded-lg backdrop-blur-sm bg-gradient1/50 shadow-xl ring-1 ring-white ring-opacity-5">
+          <div className="overflow-hidden rounded-lg shadow-xl backdrop-blur-sm bg-gradient1/50 ring-1 ring-white ring-opacity-5">
             <div className="flex items-center justify-between px-5 pt-4">
               <div>
-                <img
-                  className="h-8 w-auto"
-                  src="/images/logo/white_logo.png"
-                  alt="WebX DAO"
-                />
+                <img className="w-auto h-8" src="/images/logo/white_logo.png" alt="WebX DAO" />
               </div>
               <div className="-mr-2">
-                <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white/20 p-2 text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyber-webx">
+                <Popover.Button className="inline-flex items-center justify-center p-2 text-gray-400 rounded-md bg-white/20 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyber-webx">
                   <span className="sr-only">Close menu</span>
-                  <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  <XMarkIcon className="w-6 h-6" aria-hidden="true" />
                 </Popover.Button>
               </div>
             </div>
             <div className="pt-5 pb-6">
-              <div className="space-y-1 px-2">
+              <div className="px-2 space-y-1">
                 {navigation.map((item) => (
                   <a
                     key={item.name}
                     href={item.href}
-                    className="block rounded-md px-3 py-2 text-base font-medium text-gray-100 hover:bg-gray-50"
+                    className="block px-3 py-2 text-base font-medium text-gray-100 rounded-md hover:bg-gray-50"
                   >
                     {item.name}
                   </a>