refactor: extract client component from navbar

src/components/navigationBar/nav.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import Link from "next/link";
 import Image from "next/image";
@@ -7,8 +5,6 @@ import Image from "next/image";
 import { cn } from "@/lib/utils";
 import { Separator } from "@/components/ui/separator";
 import { ThemeToggle } from "@/components/theme-toggle";
-import { Button } from "@/components/ui/button";
-import { useRouter } from "next/navigation";
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -16,36 +12,10 @@ import {
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu";
-import {
+import { SearchBar } from "./serchBar";
-  DropdownMenu,
+import { ProfileBar } from "./profileBar";
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Search, Bell, Heart, Wallet } from "lucide-react";
 
-import { LogoutButton } from "@/components/auth/logoutButton";
-
-import useSession from "@/lib/supabase/useSession";
-
-const landings = [
-  {
-    id: 1,
-    title: "Landing 01",
-    route: "/project-management",
-  },
-  {
-    id: 2,
-    title: "Landing 02",
-    route: "/crm-landing",
-  },
-];
 const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
   ({ className, title, children, ...props }, ref) => {
     return (
@@ -69,83 +39,7 @@ const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWit
 );
 ListItem.displayName = "ListItem";
 
-const unAuthenticatedComponents = () => {
-  return (
-    <div className="flex gap-2 pl-2">
-      <Link href="/auth">
-        <Button variant="secondary" className="border-2 border-border">
-          Login
-        </Button>
-      </Link>
-      <Link href="/auth/signup">
-        <Button>Sign up</Button>
-      </Link>
-    </div>
-  );
-};
-
-const authenticatedComponents = () => {
-  let notifications = 100;
-  const displayValue = notifications >= 100 ? "..." : notifications;
-  return (
-    <div className="flex gap-3 pl-2 items-center">
-      <Link href={"/notification"}>
-        {" "}
-        <div className="relative inline-block">
-          <Bell className="h-6 w-6" />
-          <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full">
-            {displayValue}
-          </span>
-        </div>
-      </Link>
-      <Heart />
-      <Wallet />
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline" size="icon" className="overflow-hidden rounded-full">
-            <Avatar>
-              <AvatarImage src="https://api.dicebear.com/9.x/pixel-art/svg" />
-              <AvatarFallback>1</AvatarFallback>
-            </Avatar>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuLabel>My Account</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>Settings</DropdownMenuItem>
-          <DropdownMenuItem>Support</DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>
-            <LogoutButton />
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-};
-
 export function NavigationBar() {
-  const { session, loading } = useSession();
-  const user = session?.user;
-  const [sessionLoaded, setSessionLoaded] = React.useState(false);
-  const [searchActive, setSearchActive] = React.useState(false);
-  const router = useRouter();
-
-  React.useEffect(() => {
-    if (!loading) {
-      setSessionLoaded(true);
-    }
-  }, [loading]);
-
-  const handleKeyDown = async (k: React.KeyboardEvent<HTMLInputElement>) => {
-    if (k.key === "Enter") {
-      const query = (k.target as HTMLInputElement).value.trim();
-      if (query) {
-        router.push(`/find?query=${encodeURIComponent(query)}`);
-      }
-    }
-  };
-
   const businessComponents = [
     {
       title: "Businesses",
@@ -234,17 +128,7 @@ export function NavigationBar() {
                 </NavigationMenuItem>
 
                 <NavigationMenuItem className="pl-5 flex">
-                  <Search onClick={() => setSearchActive(!searchActive)} className="cursor-pointer" />
+                  <SearchBar />
-                  {/* search bar's input */}
-                  <input
-                    type="text"
-                    placeholder="Enter business name..."
-                    className={cn(
-                      "ml-2 border rounded-md px-2 py-1 transition-all duration-300 ease-in-out ",
-                      searchActive ? "w-48 opacity-100" : "w-0 opacity-0"
-                    )}
-                    onKeyDown={handleKeyDown}
-                  />
                 </NavigationMenuItem>
               </NavigationMenuList>
             </NavigationMenu>
@@ -252,17 +136,7 @@ export function NavigationBar() {
             <div className="flex gap-2 pl-2">
               <ThemeToggle />
               <Separator orientation="vertical" className="mx-3" />
-              {sessionLoaded ? (
+              <ProfileBar />
-                user ? (
-                  authenticatedComponents()
-                ) : (
-                  unAuthenticatedComponents()
-                )
-              ) : (
-                <div>
-                  <Skeleton className="rounded-lg h-full w-[160px]" />
-                </div>
-              )}
             </div>
           </div>
         </div>

src/components/navigationBar/profileBar.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Bell, Heart, Wallet } from "lucide-react";
+import { LogoutButton } from "@/components/auth/logoutButton";
+import useSession from "@/lib/supabase/useSession";
+
+const UnAuthenticatedComponents = () => {
+  return (
+    <div className="flex gap-2 pl-2">
+      <Link href="/auth">
+        <Button variant="secondary" className="border-2 border-border">
+          Login
+        </Button>
+      </Link>
+      <Link href="/auth/signup">
+        <Button>Sign up</Button>
+      </Link>
+    </div>
+  );
+};
+
+const AuthenticatedComponents = () => {
+  let notifications = 100;
+  const displayValue = notifications >= 100 ? "..." : notifications;
+  return (
+    <div className="flex gap-3 pl-2 items-center">
+      <Link href={"/notification"}>
+        <div className="relative inline-block">
+          <Bell className="h-6 w-6" />
+          <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full">
+            {displayValue}
+          </span>
+        </div>
+      </Link>
+      <Heart />
+      <Wallet />
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="icon" className="overflow-hidden rounded-full">
+            <Avatar>
+              <AvatarImage src="https://api.dicebear.com/9.x/pixel-art/svg" />
+              <AvatarFallback>1</AvatarFallback>
+            </Avatar>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Settings</DropdownMenuItem>
+          <DropdownMenuItem>Support</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <LogoutButton />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+export function ProfileBar() {
+  const { session } = useSession();
+  const user = session?.user;
+  const [sessionLoaded, setSessionLoaded] = useState(false);
+
+  useEffect(() => {
+    if (!session) {
+      setSessionLoaded(true);
+    }
+  }, [session]);
+
+  return (
+    <>
+      {sessionLoaded ? (
+        user ? (
+          <AuthenticatedComponents />
+        ) : (
+          <UnAuthenticatedComponents />
+        )
+      ) : (
+        <div>
+          <Skeleton className="rounded-lg h-full w-[160px]" />
+        </div>
+      )}
+    </>
+  );
+}

src/components/navigationBar/serchBar.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { Search } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function SearchBar() {
+  const [searchActive, setSearchActive] = React.useState(false);
+  const router = useRouter();
+
+  const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      const query = (e.target as HTMLInputElement).value.trim();
+      if (query) {
+        router.push(`/find?query=${encodeURIComponent(query)}`);
+      }
+    }
+  };
+
+  return (
+    <div className="flex items-center">
+      <Search onClick={() => setSearchActive(!searchActive)} className="cursor-pointer" />
+      <input
+        type="text"
+        placeholder="Enter business name..."
+        className={cn(
+          "ml-2 border rounded-md px-2 py-1 transition-all duration-300 ease-in-out",
+          searchActive ? "w-48 opacity-100" : "w-0 opacity-0"
+        )}
+        onKeyDown={handleKeyDown}
+      />
+    </div>
+  );
+}