sosokker/B2D-Ventures
1
0
Fork 0
mirror of https://github.com/Sosokker/B2D-Ventures.git synced 2025-12-18 13:34:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: enhance mobile menu and search bar with improved animations and accessibility features

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-11-18 15:30:02 +07:00
parent 46abff402d
commit ea850bc9b9
2 changed files with 154 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/components/navigationBar/mobileMenu.tsx
View File

@ -2,7 +2,7 @@
import { useState } from "react"; import { useState } from "react";
import { Menu, X } from "lucide-react"; import { Menu, X } from "lucide-react";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { motion } from "framer-motion"; import { AnimatePresence, motion } from "framer-motion";
import { import {
NavigationMenu, NavigationMenu,
NavigationMenuContent, NavigationMenuContent,
@ -24,60 +24,79 @@ export function MobileMenu() {
<Button onClick={() => setIsVisible((prev) => !prev)}> <Button onClick={() => setIsVisible((prev) => !prev)}>
<Menu /> <Menu />
</Button> </Button>
{isVisible && ( <AnimatePresence>
<motion.div {isVisible && (
initial={{ x: "-100%" }} <motion.div
animate={{ x: 0 }} initial={{ y: -100 }}
exit={{ x: "-100%" }} animate={{ y: 0 }}
transition={{ duration: 0.3 }} exit={{ y: -100 }}
className="fixed top-0 left-0 w-full bg-blue-500 flex items-center" 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"
<X className="cursor-pointer w-8" onClick={() => setIsVisible(false)} /> >
<NavigationMenu> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<NavigationMenuList className="grid grid-cols-3 space-x-4 mt-1"> <div className="flex items-center justify-between h-16">
<NavigationMenuItem> <div className="flex items-center">
<NavigationMenuTrigger className="text-base">Businesses</NavigationMenuTrigger> <button
<NavigationMenuContent> onClick={() => setIsVisible(false)}
{businessComponents.map((component) => ( className="p-2 rounded-md hover:bg-slate-100 dark:hover:bg-slate-800"
<ListItem key={component.title} title={component.title} href={component.href}> >
{component.description} <X className="w-5 h-5" />
</ListItem> </button>
))}
</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>
<NavigationMenuItem className="pl-5 flex mt-5 flex"> <NavigationMenu className="ml-6">
<ThemeToggle /> <NavigationMenuList className="flex space-x-4">
<SearchBar /> <NavigationMenuItem>
</NavigationMenuItem> <NavigationMenuTrigger className="text-sm font-medium">Businesses</NavigationMenuTrigger>
</NavigationMenuList> <NavigationMenuContent>
</NavigationMenu> <ul className="w-[240px] p-4 gap-3">
</motion.div> {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> </div>
); );
} }

96
src/components/navigationBar/serchBar.tsx
View File

@ -2,34 +2,100 @@
import * as React from "react"; import * as React from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { Search } from "lucide-react"; import { Search, X } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useEffect, useRef } from "react";
export function SearchBar() { export function SearchBar() {
const [searchActive, setSearchActive] = React.useState(false); const [searchActive, setSearchActive] = React.useState(false);
const [query, setQuery] = React.useState("");
const router = useRouter(); const router = useRouter();
const inputRef = useRef<HTMLInputElement>(null);
const containerRef = useRef<HTMLDivElement>(null);
const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => { const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") { if (e.key === "Enter") {
const query = (e.target as HTMLInputElement).value.trim(); const trimmedQuery = query.trim();
if (query) { if (trimmedQuery) {
router.push(`/find?query=${encodeURIComponent(query)}`); 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 ( return (
<div className="flex items-center"> <div
<Search onClick={() => setSearchActive(!searchActive)} className="cursor-pointer" /> ref={containerRef}
<input className={cn(
type="text" "relative flex items-center transition-all duration-300",
placeholder="Enter business name..." searchActive &&
className={cn( "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"
"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" >
)} {/* Mobile overlay header when search is active */}
onKeyDown={handleKeyDown} {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> </div>
); );
} }