@tushar-br/desktop 1.0.280 → 1.0.282

package/staging_area/desktop/rilvox/src/components/layout/Sidebar.tsx

@@ -1,213 +0,0 @@
-"use client";
-
-import { usePathname } from "next/navigation";
-import Link from "next/link";
-import { cn } from "@/lib/utils";
-import Logo from "@/components/ui/Logo";
-import { useSidebar } from "./sidebar-context";
-import { X, Search } from "lucide-react";
-import { allTools, toolsCategories } from "@/lib/tools-data";
-import { useState, useEffect } from "react";
-
-export function Sidebar() {
-    const pathname = usePathname();
-    const { isOpen, closeSidebar } = useSidebar();
-    const [scatteredIcons, setScatteredIcons] = useState<{ top: string, left: string, delay: string, fontSize: string }[]>([]);
-    const [search, setSearch] = useState("");
-
-    const filteredTools = allTools.filter(t =>
-        t.title.toLowerCase().includes(search.toLowerCase()) ||
-        t.desc.toLowerCase().includes(search.toLowerCase())
-    );
-
-    useEffect(() => {
-        const body = document.body;
-        const html = document.documentElement;
-
-        if (isOpen) {
-            body.style.overflow = 'hidden';
-            html.style.overflow = 'hidden';
-
-            // Defer heavy icon logic until after transition to prevent lag
-            const timer = setTimeout(() => {
-                const icons = Array.from({ length: 10 }).map(() => ({
-                    top: `${5 + Math.random() * 85}%`,
-                    left: `${5 + Math.random() * 85}%`,
-                    delay: `${Math.random() * 0.5}s`,
-                    fontSize: `${Math.random() * 0.5 + 1}rem`
-                }));
-                setScatteredIcons(icons);
-            }, 300);
-            return () => clearTimeout(timer);
-        } else {
-            body.style.overflow = '';
-            html.style.overflow = '';
-        }
-    }, [isOpen]);
-
-    return (
-        <>
-            {/* Backdrop: Optimized with hardware acceleration */}
-            <div
-                className={cn(
-                    "fixed inset-0 z-[110] transition-opacity duration-300 hidden md:block will-change-opacity",
-                    isOpen
-                        ? "bg-black/80 backdrop-blur-[12px] opacity-100 pointer-events-auto"
-                        : "opacity-0 pointer-events-none"
-                )}
-                onClick={closeSidebar}
-            >
-                {/* Scattered Close Buttons Pattern */}
-                <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
-                    {scatteredIcons.map((style, i) => (
-                        <div
-                            key={i}
-                            className="absolute text-neutral-800/40 hover:text-white transition-all cursor-pointer pointer-events-auto hover:rotate-90 hover:scale-125"
-                            onClick={(e) => { e.stopPropagation(); closeSidebar(); }}
-                            style={{
-                                top: style.top,
-                                left: style.left,
-                                animationDelay: style.delay,
-                            }}
-                        >
-                            <X style={{ width: style.fontSize, height: style.fontSize }} />
-                        </div>
-                    ))}
-                </div>
-
-                <div className="absolute inset-0 flex items-start justify-center p-20 pt-32 gap-32 z-10 intro-section pointer-events-none">
-                    {/* Left: Original SVG Ornament & jumbo Close */}
-                    <div className={cn(
-                        "flex flex-col items-center gap-12 transition-all duration-500 delay-100",
-                        isOpen ? "opacity-100 translate-y-0 scale-100" : "opacity-0 -translate-y-20 scale-90"
-                    )}>
-                        <div className="relative w-72 h-72 drop-shadow-[0_0_100px_rgba(255,255,255,0.1)] animate-float">
-                            <svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <defs>
-                                    <linearGradient id="metal-grad" x1="0" y1="0" x2="200" y2="200" gradientUnits="userSpaceOnUse">
-                                        <stop offset="0" stopColor="#333" />
-                                        <stop offset="0.5" stopColor="#fafafa" />
-                                        <stop offset="1" stopColor="#333" />
-                                    </linearGradient>
-                                    <filter id="glow">
-                                        <feGaussianBlur stdDeviation="4" result="coloredBlur" />
-                                        <feMerge>
-                                            <feMergeNode in="coloredBlur" />
-                                            <feMergeNode in="SourceGraphic" />
-                                        </feMerge>
-                                    </filter>
-                                </defs>
-                                <g className="animate-spin-slow origin-center">
-                                    <circle cx="100" cy="100" r="90" stroke="url(#metal-grad)" strokeWidth="0.5" strokeOpacity="0.4" strokeDasharray="12 8" />
-                                    <circle cx="100" cy="100" r="70" stroke="url(#metal-grad)" strokeWidth="0.5" strokeOpacity="0.2" />
-                                </g>
-                                <path d="M100 40 L152 70 L152 130 L100 160 L48 130 L48 70 Z" fill="#111" stroke="url(#metal-grad)" strokeWidth="2" strokeOpacity="0.8" />
-                                <rect x="90" y="90" width="20" height="20" fill="#fff" filter="url(#glow)" className="animate-pulse" />
-                            </svg>
-                        </div>
-                        <div className="text-center group cursor-pointer pointer-events-auto" onClick={closeSidebar}>
-                            <h2 className="text-4xl font-black text-white tracking-[0.5em] uppercase mb-4 drop-shadow-2xl group-hover:scale-110 transition-transform">Close</h2>
-                            <p className="text-neutral-500 font-mono tracking-[0.3em] text-[10px] uppercase opacity-70">CLICK ANYWHERE TO DISMISS</p>
-                        </div>
-                    </div>
-
-                    {/* Right: Original Advertising Box Layout */}
-                    <div className={cn(
-                        "w-[380px] h-[500px] border border-white/10 rounded-[2.5rem] bg-black/60 backdrop-blur-3xl flex flex-col items-center justify-center text-center p-12 transition-all duration-500 delay-200 pointer-events-auto hover:bg-black/80 hover:border-white/20 shadow-2xl",
-                        isOpen ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-20 scale-95"
-                    )}>
-                        <div className="w-24 h-24 bg-white/5 rounded-full flex items-center justify-center mb-8 border border-white/10 shadow-2xl">
-                            <span className="text-4xl">📢</span>
-                        </div>
-                        <h3 className="text-2xl font-black text-white mb-4 uppercase tracking-widest">Advertising Box</h3>
-                        <p className="text-neutral-500 text-sm leading-relaxed mb-12">
-                            Your ad could be here. Reach thousands of developers and creators using Rilvox tools daily.
-                        </p>
-                        <button className="px-12 py-5 bg-white text-black text-[10px] font-black uppercase tracking-[0.2em] rounded-full hover:scale-105 transition-transform active:scale-95 shadow-[0_0_30px_rgba(255,255,255,0.2)]">
-                            Contact Us
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            {/* Mobile Sidebar Overlay */}
-            <div
-                className={cn(
-                    "fixed inset-0 bg-black z-[110] md:hidden transition-opacity duration-200 will-change-opacity",
-                    isOpen ? "opacity-95 pointer-events-auto" : "opacity-0 pointer-events-none"
-                )}
-                onClick={closeSidebar}
-            />
-
-            <aside
-                className={cn(
-                    "fixed top-0 left-0 z-[120] h-screen w-72 sm:w-80 bg-black border-r border-white/10 transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)] flex flex-col shadow-2xl will-change-transform",
-                    isOpen ? "translate-x-0" : "-translate-x-full"
-                )}
-            >
-                {/* Fixed Premium Header */}
-                <div className="h-24 flex items-center justify-between px-8 border-b border-white/10 shrink-0">
-                    <Link href="/" onClick={closeSidebar} className="flex items-center gap-4 group">
-                        <Logo />
-                        <span className="text-2xl font-black tracking-tighter uppercase text-white">
-                            RILVOX
-                        </span>
-                    </Link>
-                    <button onClick={closeSidebar} className="p-2 text-neutral-500 hover:text-white transition-all transform hover:rotate-90">
-                        <X className="w-6 h-6" />
-                    </button>
-                </div>
-
-                {/* Filter */}
-                <div className="px-6 py-8 shrink-0">
-                    <div className="relative group">
-                        <Search className="absolute left-4 top-3.5 w-4 h-4 text-neutral-600 transition-colors group-focus-within:text-white" />
-                        <input
-                            type="text"
-                            placeholder="Search Tools..."
-                            value={search}
-                            onChange={(e) => setSearch(e.target.value)}
-                            className="w-full bg-white/5 border border-white/10 rounded-2xl pl-12 pr-4 py-3 text-sm text-neutral-300 focus:bg-white/10 outline-none transition-all"
-                        />
-                    </div>
-                </div>
-
-                {/* List */}
-                <div className="flex-1 overflow-y-auto px-4 pb-12 custom-scrollbar">
-                    <Link href="/" onClick={closeSidebar} className={cn(
-                        "flex items-center gap-4 px-6 py-4 mx-2 rounded-2xl text-[13px] font-bold transition-all mb-8",
-                        pathname === "/" ? "bg-white text-black shadow-lg" : "text-neutral-500 hover:text-white hover:bg-white/5"
-                    )}>
-                        All Tools Dashboard
-                    </Link>
-
-                    {toolsCategories.map((cat) => {
-                        const catTools = filteredTools.filter(t => t.cat.toLowerCase().includes(cat.id.toLowerCase()));
-                        if (catTools.length === 0) return null;
-                        return (
-                            <div key={cat.id} className="mb-10">
-                                <h4 className="px-6 mb-4 text-[10px] font-black text-neutral-600 uppercase tracking-[0.4em]">{cat.name}</h4>
-                                <div className="space-y-1 px-2">
-                                    {catTools.map((tool) => (
-                                        <Link
-                                            key={tool.href}
-                                            href={tool.href}
-                                            onClick={closeSidebar}
-                                            className={cn(
-                                                "flex items-center gap-4 px-6 py-3 rounded-xl text-[13px] font-semibold transition-all",
-                                                pathname === tool.href ? "bg-white/5 text-white border-l-4 border-white pl-4" : "text-neutral-500 hover:text-white hover:bg-white/5"
-                                            )}
-                                        >
-                                            <tool.icon className="w-4 h-4 opacity-50 group-hover:opacity-100" />
-                                            <span className="truncate">{tool.title}</span>
-                                        </Link>
-                                    ))}
-                                </div>
-                            </div>
-                        )
-                    })}
-                </div>
-            </aside>
-        </>
-    );
-}