From 4142290bac2102fcabae4cacc3cd4b8ca6d357d3 Mon Sep 17 00:00:00 2001
From: Abhay Pratap Singh <singhisabhaypratap@gmail.com>
Date: Fri, 1 Nov 2024 22:47:08 +0530
Subject: [PATCH] refactor(CompanyLogo): optimize navigation with Next.js Link
 component (#560)

* refactor(CompanyLogo): optimize navigation with Next.js Link component

- Replace window.location.href with Next.js Link for client-side navigation
- Improve page transition performance with built-in prefetching
- Maintain application state during navigation
- Remove manual click handler in favor of declarative routing

Closes #558

* fix: restore padding to CompanyLogo component
---
 src/layouts/header.tsx | 43 ++++++++++++++++++++----------------------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/layouts/header.tsx b/src/layouts/header.tsx
index 9c1bb546..f0dda9c9 100644
--- a/src/layouts/header.tsx
+++ b/src/layouts/header.tsx
@@ -1,23 +1,7 @@
 'use client';
-import { MobileNav } from '@/layouts/mobile-nav';
-import {
-  adminNavbar,
-  nonUserNavbar,
-  userNavbar,
-} from '@/lib/constant/app.constant';
-import { signOut, useSession } from 'next-auth/react';
-import Link from 'next/link';
 import { NavItem } from '@/components/navitem';
-import Image from 'next/image';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Moon, Sun } from 'lucide-react';
-import { useTheme } from 'next-themes';
-import { ADMIN_ROLE, HR_ROLE } from '@/config/app.config';
-import { useEffect, useState } from 'react';
-import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { useRouter } from 'next/navigation';
-import { getNameInitials } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -25,21 +9,34 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ADMIN_ROLE, HR_ROLE } from '@/config/app.config';
+import { MobileNav } from '@/layouts/mobile-nav';
+import {
+  adminNavbar,
+  nonUserNavbar,
+  userNavbar,
+} from '@/lib/constant/app.constant';
 import icons from '@/lib/icons';
+import { getNameInitials } from '@/lib/utils';
+import { Moon, Sun } from 'lucide-react';
+import { signOut, useSession } from 'next-auth/react';
+import { useTheme } from 'next-themes';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
 export const CompanyLogo = () => {
   return (
-    <div
-      className="flex items-center gap-2 cursor-pointer"
-      onClick={() => {
-        window.location.href = '/';
-      }}
-    >
+    <div className="flex items-center gap-2">
       <Image
         src={'/main.svg'}
         alt="100xJobs logo"
         width={30}
         height={30}
         className="rounded"
+        priority
       />
       <h3 className="text-xl font-bold">
         100x<span className="text-blue-700">Jobs</span>