feat: refactor mobile menu component and integrate menu items for improved navigation

src/components/listItem.tsx

@@ -0,0 +1,28 @@
+import { NavigationMenuLink } from "@/components/ui/navigation-menu";
+import { cn } from "@/lib/utils";
+import React from "react";
+const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
+  ({ className, title, children, ...props }, ref) => {
+    return (
+      <li>
+        <NavigationMenuLink asChild>
+          <a
+            ref={ref}
+            className={cn(
+              "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+              className
+            )}
+            {...props}
+          >
+            <div className="text-sm font-medium leading-none">{title}</div>
+            <hr />
+            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p>
+          </a>
+        </NavigationMenuLink>
+      </li>
+    );
+  }
+);
+ListItem.displayName = "ListItem";
+
+export default ListItem;

src/components/mobileMenu.tsx

@@ -1,27 +0,0 @@
-"use client";
-import { useState } from "react";
-import { Menu, X } from "lucide-react";
-import { Button } from "./ui/button";
-import { motion } from "framer-motion";
-
-export function MobileMenu() {
-  const [isVisible, setIsVisible] = useState(false);
-  return (
-    <div>
-      <Button onClick={() => setIsVisible((prev) => !prev)}>
-        <Menu />
-      </Button>
-      {isVisible && (
-        <motion.div
-          initial={{ x: "-100%" }}
-          animate={{ x: 0 }}
-          exit={{ x: "-100%" }}
-          transition={{ duration: 0.3 }}
-          className="fixed top-0 left-0 w-full bg-gray-800 text-white"
-        >
-          <X className="cursor-pointer" onClick={() => setIsVisible(false)} />
-        </motion.div>
-      )}
-    </div>
-  );
-}

src/components/navigationBar/menu.ts

@@ -0,0 +1,23 @@
+export const businessComponents = [
+  {
+    title: "Business",
+    href: "/business/apply",
+    description: "Apply to raise on on B2DVentures",
+  },
+];
+
+export const projectComponents = [
+  {
+    title: "Projects",
+    href: "/project/apply",
+    description: "Start your new project on B2DVentures",
+  },
+];
+
+export const dataroomComponents = [
+  {
+    title: "Overview",
+    href: "/dataroom/overview",
+    description: "View all dataroom available to you",
+  },
+];

src/components/navigationBar/mobileMenu.tsx

@@ -0,0 +1,81 @@
+"use client";
+import { useState } from "react";
+import { Menu, X } from "lucide-react";
+import { Button } from "../ui/button";
+import { motion } from "framer-motion";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+import React from "react";
+import { SearchBar } from "./serchBar";
+import ListItem from "../listItem";
+import { businessComponents, projectComponents, dataroomComponents } from "./menu";
+
+export function MobileMenu() {
+  const [isVisible, setIsVisible] = useState(false);
+  return (
+    <div>
+      <Button onClick={() => setIsVisible((prev) => !prev)}>
+        <Menu />
+      </Button>
+      {isVisible && (
+        <motion.div
+          initial={{ x: "-100%" }}
+          animate={{ x: 0 }}
+          exit={{ x: "-100%" }}
+          transition={{ duration: 0.3 }}
+          className="fixed top-0 left-0 w-full bg-gray-800 text-white flex"
+        >
+          <X className="cursor-pointer w-10" onClick={() => setIsVisible(false)} />
+          <NavigationMenu>
+            <NavigationMenuList className="grid grid-cols-3">
+              <NavigationMenuItem>
+                <NavigationMenuTrigger className="text-base">Businesses</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  {businessComponents.map((component) => (
+                    <ListItem key={component.title} title={component.title} href={component.href}>
+                      {component.description}
+                    </ListItem>
+                  ))}
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuTrigger className="text-base font-medium ">Projects</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <ul className="grid w-[400px] ">
+                    {projectComponents.map((component) => (
+                      <ListItem key={component.title} title={component.title} href={component.href}>
+                        {component.description}
+                      </ListItem>
+                    ))}
+                  </ul>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuTrigger className="text-base font-medium ">Dataroom</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <ul className="grid w-[400px] ">
+                    {dataroomComponents.map((component) => (
+                      <ListItem key={component.title} title={component.title} href={component.href}>
+                        {component.description}
+                      </ListItem>
+                    ))}
+                  </ul>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+
+              <NavigationMenuItem className="pl-5 flex">
+                <SearchBar />
+              </NavigationMenuItem>
+            </NavigationMenuList>
+          </NavigationMenu>
+        </motion.div>
+      )}
+    </div>
+  );
+}

src/components/navigationBar/nav.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import Link from "next/link";
 import Image from "next/image";
 
-import { cn } from "@/lib/utils";
 import { Separator } from "@/components/ui/separator";
 import { ThemeToggle } from "@/components/theme-toggle";
 import {
@@ -21,31 +20,9 @@ import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
 import { getUserId } from "@/lib/supabase/actions/getUserId";
 import { getUnreadNotificationCountByUserId } from "@/lib/data/notificationQuery";
 
-import { MobileMenu } from "../mobileMenu";
+import { MobileMenu } from "./mobileMenu";
-
+import ListItem from "../listItem";
-const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
+import { businessComponents, projectComponents, dataroomComponents } from "./menu";
-  ({ className, title, children, ...props }, ref) => {
-    return (
-      <li>
-        <NavigationMenuLink asChild>
-          <a
-            ref={ref}
-            className={cn(
-              "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-              className
-            )}
-            {...props}
-          >
-            <div className="text-sm font-medium leading-none">{title}</div>
-            <hr />
-            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p>
-          </a>
-        </NavigationMenuLink>
-      </li>
-    );
-  }
-);
-ListItem.displayName = "ListItem";
 
 export async function NavigationBar() {
   const client = createSupabaseClient();
@@ -59,30 +36,6 @@ export async function NavigationBar() {
     notification_count = 0;
   }
 
-  const businessComponents = [
-    {
-      title: "Business",
-      href: "/business/apply",
-      description: "Apply to raise on on B2DVentures",
-    },
-  ];
-
-  const projectComponents = [
-    {
-      title: "Projects",
-      href: "/project/apply",
-      description: "Start your new project on B2DVentures",
-    },
-  ];
-
-  const dataroomComponents = [
-    {
-      title: "Overview",
-      href: "/dataroom/overview",
-      description: "View all dataroom available to you",
-    },
-  ];
-
   return (
     <header className="sticky top-0 flex flex-wrap w-full bg-card text-sm py-3 border-b-2 border-border z-50">
       <nav className="max-w-screen-xl w-full mx-auto px-4">
@@ -93,15 +46,31 @@ export async function NavigationBar() {
               href="/"
               aria-label="Brand"
             >
-              <span className="inline-flex items-center gap-x-2 text-xl font-semibold dark:text-white">
+              <span className="lg:inline-flex flex items-center gap-x-2 text-xl font-semibold dark:text-white">
-                <Image src="/logo.svg" alt="logo" width={50} height={50} />
+                <Image src="/logo.svg" alt="logo" width={50} height={50} className="w-10 h-10 sm:w-16 sm:h-16" />
-                B2DVentures
+                <span className="block lg:inline">
+                  B2D<span className=" lg:inline">Ventures</span>
+                </span>
               </span>
             </Link>
           </div>
-          <div className="md:hidden">
+          <div className="md:hidden grid grid-cols-2">
-            <MobileMenu />
+            <div className="flex justify-end w-10">
+              {userId ? (
+                <AuthenticatedComponents
+                  uid={userId}
+                  avatarUrl={avatarUrl?.avatar_url}
+                  notificationCount={notification_count}
+                />
+              ) : (
+                <UnAuthenticatedComponents />
+              )}
+            </div>
+            <div className="justify-end flex">
+              <MobileMenu />
+            </div>
           </div>
+
           <div className="hidden md:flex items-center ">
             <NavigationMenu>
               <NavigationMenuList>