From ea850bc9b952bbe1b34d4c2ee8c1416178cc7bf2 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Mon, 18 Nov 2024 15:30:02 +0700
Subject: [PATCH] feat: enhance mobile menu and search bar with improved
 animations and accessibility features

---
 src/components/navigationBar/mobileMenu.tsx | 127 +++++++++++---------
 src/components/navigationBar/serchBar.tsx   |  96 ++++++++++++---
 2 files changed, 154 insertions(+), 69 deletions(-)

diff --git a/src/components/navigationBar/mobileMenu.tsx b/src/components/navigationBar/mobileMenu.tsx
index e88bf71..30a03e9 100644
--- a/src/components/navigationBar/mobileMenu.tsx
+++ b/src/components/navigationBar/mobileMenu.tsx
@@ -2,7 +2,7 @@
 import { useState } from "react";
 import { Menu, X } from "lucide-react";
 import { Button } from "../ui/button";
-import { motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -24,60 +24,79 @@ export function MobileMenu() {
       <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-blue-500  flex items-center"
-        >
-          <X className="cursor-pointer w-8" onClick={() => setIsVisible(false)} />
-          <NavigationMenu>
-            <NavigationMenuList className="grid grid-cols-3 space-x-4 mt-1">
-              <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 ">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  ">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>
+      <AnimatePresence>
+        {isVisible && (
+          <motion.div
+            initial={{ y: -100 }}
+            animate={{ y: 0 }}
+            exit={{ y: -100 }}
+            transition={{ type: "spring", stiffness: 300, damping: 30 }}
+            className="fixed top-0 left-0 w-full bg-white dark:bg-slate-900 border-b dark:border-slate-800 shadow-sm z-50"
+          >
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+              <div className="flex items-center justify-between h-16">
+                <div className="flex items-center">
+                  <button
+                    onClick={() => setIsVisible(false)}
+                    className="p-2 rounded-md hover:bg-slate-100 dark:hover:bg-slate-800"
+                  >
+                    <X className="w-5 h-5" />
+                  </button>
 
-              <NavigationMenuItem className="pl-5 flex mt-5 flex">
-                <ThemeToggle />
-                <SearchBar />
-              </NavigationMenuItem>
-            </NavigationMenuList>
-          </NavigationMenu>
-        </motion.div>
-      )}
+                  <NavigationMenu className="ml-6">
+                    <NavigationMenuList className="flex space-x-4">
+                      <NavigationMenuItem>
+                        <NavigationMenuTrigger className="text-sm font-medium">Businesses</NavigationMenuTrigger>
+                        <NavigationMenuContent>
+                          <ul className="w-[240px] p-4 gap-3">
+                            {businessComponents.map((component) => (
+                              <ListItem key={component.title} title={component.title} href={component.href}>
+                                {component.description}
+                              </ListItem>
+                            ))}
+                          </ul>
+                        </NavigationMenuContent>
+                      </NavigationMenuItem>
+
+                      <NavigationMenuItem>
+                        <NavigationMenuTrigger className="text-sm font-medium">Projects</NavigationMenuTrigger>
+                        <NavigationMenuContent>
+                          <ul className="w-[240px] p-4 gap-3">
+                            {projectComponents.map((component) => (
+                              <ListItem key={component.title} title={component.title} href={component.href}>
+                                {component.description}
+                              </ListItem>
+                            ))}
+                          </ul>
+                        </NavigationMenuContent>
+                      </NavigationMenuItem>
+
+                      <NavigationMenuItem>
+                        <NavigationMenuTrigger className="text-sm font-medium">Dataroom</NavigationMenuTrigger>
+                        <NavigationMenuContent>
+                          <ul className="w-[240px] p-4 gap-3">
+                            {dataroomComponents.map((component) => (
+                              <ListItem key={component.title} title={component.title} href={component.href}>
+                                {component.description}
+                              </ListItem>
+                            ))}
+                          </ul>
+                        </NavigationMenuContent>
+                      </NavigationMenuItem>
+                    </NavigationMenuList>
+                  </NavigationMenu>
+                </div>
+
+                <div className="flex items-center space-x-4">
+                  <div className="relative">
+                    <SearchBar />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }
diff --git a/src/components/navigationBar/serchBar.tsx b/src/components/navigationBar/serchBar.tsx
index 026e52b..00dd390 100644
--- a/src/components/navigationBar/serchBar.tsx
+++ b/src/components/navigationBar/serchBar.tsx
@@ -2,34 +2,100 @@
 
 import * as React from "react";
 import { useRouter } from "next/navigation";
-import { Search } from "lucide-react";
+import { Search, X } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { useEffect, useRef } from "react";
 
 export function SearchBar() {
   const [searchActive, setSearchActive] = React.useState(false);
+  const [query, setQuery] = React.useState("");
   const router = useRouter();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   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)}`);
+      const trimmedQuery = query.trim();
+      if (trimmedQuery) {
+        router.push(`/find?query=${encodeURIComponent(trimmedQuery)}`);
+        setSearchActive(false);
+        setQuery("");
       }
+    } else if (e.key === "Escape") {
+      setSearchActive(false);
+      setQuery("");
     }
   };
 
+  // Handle clicks outside of search bar
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setSearchActive(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Focus input when search becomes active
+  useEffect(() => {
+    if (searchActive && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [searchActive]);
+
   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
+      ref={containerRef}
+      className={cn(
+        "relative flex items-center transition-all duration-300",
+        searchActive &&
+          "fixed inset-0 bg-white/95 dark:bg-slate-900/95 z-50 px-4 md:relative md:bg-transparent md:dark:bg-transparent md:px-0"
+      )}
+    >
+      {/* Mobile overlay header when search is active */}
+      {searchActive && (
+        <div className="absolute top-0 left-0 right-0 flex items-center p-4 md:hidden">
+          <X
+            className="w-6 h-6 cursor-pointer text-slate-600 dark:text-slate-400"
+            onClick={() => {
+              setSearchActive(false);
+              setQuery("");
+            }}
+          />
+        </div>
+      )}
+
+      <div className={cn("flex items-center w-full md:w-auto", searchActive ? "mt-16 md:mt-0" : "")}>
+        <Search
+          onClick={() => setSearchActive(!searchActive)}
+          className={cn(
+            "w-5 h-5 cursor-pointer transition-colors",
+            searchActive ? "text-blue-500" : "text-slate-600 dark:text-slate-400",
+            "md:hover:text-blue-500"
+          )}
+        />
+
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Enter business name..."
+          className={cn(
+            "ml-2 rounded-md transition-all duration-300 ease-in-out outline-none",
+            "placeholder:text-slate-400 dark:placeholder:text-slate-500",
+            "bg-transparent md:bg-slate-100 md:dark:bg-slate-800",
+            "md:px-3 md:py-1.5",
+            searchActive
+              ? "w-full opacity-100 border-b md:border md:w-48 lg:w-64 md:border-slate-200 md:dark:border-slate-700"
+              : "w-0 opacity-0 border-transparent"
+          )}
+          onKeyDown={handleKeyDown}
+        />
+      </div>
     </div>
   );
 }