Skip to content

Commit 63b95ce

Browse files
Alien69FlowAlien69Flow
authored
Update DesktopNav.tsx
Signed-off-by: Aitor Alien <111972684+Alien69Flow@users.noreply.github.com>
1 parent 25cad5d commit 63b95ce

1 file changed

Lines changed: 80 additions & 88 deletions

File tree

‎src/components/Header/DesktopNav.tsx‎

Lines changed: 80 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
21
import React from 'react';
3-
import { Link } from 'react-router-dom';
4-
import { Globe, ChevronDown } from 'lucide-react';
2+
import { Link, useLocation } from 'react-router-dom';
3+
import { Globe, ChevronDown, Sparkles } from 'lucide-react';
54
import {
65
DropdownMenu,
76
DropdownMenuContent,
@@ -10,120 +9,113 @@ import {
109
} from "@/components/ui/dropdown-menu";
1110
import { Button } from "@/components/ui/button";
1211
import { translateTo } from '@/lib/translator';
12+
import { motion } from 'framer-motion';
1313

1414
const DesktopNav = () => {
15+
const location = useLocation();
16+
17+
// Links principales en orden alfabético
1518
const navLinks = [
16-
{ to: "/", label: "Home" },
1719
{ to: "/about", label: "About" },
1820
{ to: "/alien-trip", label: "AlienTrip" },
1921
{ to: "/contact", label: "Contact" }
2022
];
2123

24+
// Espacios ordenados alfabéticamente
2225
const spaceLinks = [
2326
{ to: "/academy", label: "Academy", desc: "Unlock cosmic knowledge through educational resources" },
2427
{ to: "/clubs", label: "Clubs", desc: "Join specialized communities focused on interests" },
2528
{ to: "/conetworking", label: "CoNetWorKing", desc: "Connect with like-minded profits across the multiverse" }
26-
];
29+
].sort((a, b) => a.label.localeCompare(b.label));
2730

2831
const languages = [
2932
{ code: 'us', name: 'English', lang: 'en' },
3033
{ code: 'es', name: 'Español', lang: 'es' },
3134
{ code: 'fr', name: 'Français', lang: 'fr' },
32-
{ code: 'cn', name: '汉语 (Hànyǔ)', lang: 'zh' },
33-
{ code: 'in', name: 'हिन्दी (Hindī)', lang: 'hi' },
35+
{ code: 'cn', name: '汉语', lang: 'zh' },
36+
{ code: 'in', name: 'हिन्दी', lang: 'hi' },
3437
{ code: 'pt', name: 'Português', lang: 'pt' },
35-
{ code: 'jp', name: '日本語 (Nihongo)', lang: 'ja' }
38+
{ code: 'jp', name: '日本語', lang: 'ja' }
3639
];
3740

38-
const handleLanguageSelect = (lang: string) => {
39-
translateTo(lang);
40-
};
41-
4241
return (
43-
<nav className="hidden lg:flex items-center gap-8">
44-
<div className="flex items-center space-x-6">
45-
{/* Main Navigation */}
42+
<nav className="hidden lg:flex items-center gap-8 bg-black/20 backdrop-blur-xl border border-white/10 px-6 py-1.5 rounded-full shadow-[0_0_40px_rgba(0,0,0,0.3)]">
43+
44+
{/* Navegación Principal */}
45+
<div className="flex items-center space-x-2">
4646
{navLinks.map((link) => (
47-
<Link
47+
<Link
4848
key={link.to}
49-
to={link.to}
50-
className="text-alien-gold hover:text-alien-green px-3 py-2 font-nasalization transition-all duration-300 hover:scale-105 relative group"
49+
to={link.to}
50+
className={`px-4 py-2 font-nasalization text-[11px] tracking-[0.2em] transition-all duration-300 relative group ${
51+
location.pathname === link.to ? "text-alien-green" : "text-alien-gold hover:text-white"
52+
}`}
5153
>
5254
{link.label}
53-
<span className="absolute inset-x-0 -bottom-1 h-0.5 bg-alien-green scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
55+
{location.pathname === link.to && (
56+
<motion.div
57+
layoutId="nav-glow"
58+
className="absolute inset-0 bg-alien-green/10 rounded-full -z-10 blur-sm"
59+
/>
60+
)}
5461
</Link>
5562
))}
56-
57-
{/* Explore Spaces Dropdown */}
58-
<DropdownMenu>
59-
<DropdownMenuTrigger asChild>
60-
<Button
61-
variant="ghost"
62-
className="text-alien-gold hover:text-alien-green bg-transparent hover:bg-alien-space-light/20 px-3 py-2 rounded-lg flex items-center group font-nasalization transition-all duration-300 hover:scale-105"
63-
>
64-
<span>Explore Spaces</span>
65-
<ChevronDown className="ml-2 h-4 w-4 transform transition-transform duration-300 group-data-[state=open]:rotate-180" />
66-
</Button>
67-
</DropdownMenuTrigger>
68-
<DropdownMenuContent
69-
className="bg-alien-space-dark/95 backdrop-blur-md border border-alien-gold/30 p-2 rounded-xl w-[380px] shadow-2xl shadow-alien-gold/10 z-[9999]"
70-
sideOffset={8}
63+
</div>
64+
65+
{/* BOTÓN OVNI: EXPLORE SPACES */}
66+
<DropdownMenu>
67+
<DropdownMenuTrigger asChild>
68+
<Button
69+
variant="ghost"
70+
className="bg-alien-space-light/10 hover:bg-alien-space-light/20 border border-alien-green/30 text-alien-green font-nasalization text-[10px] tracking-[0.3em] px-5 rounded-full h-9 group transition-all shadow-[0_0_15px_rgba(57,255,20,0.1)]"
7171
>
72-
<div className="flex flex-col space-y-1">
73-
{spaceLinks.map((link) => (
74-
<DropdownMenuItem key={link.to} asChild>
75-
<Link
76-
to={link.to}
77-
className="flex flex-col items-start p-4 rounded-lg hover:bg-alien-space-light/30 group cursor-pointer transition-all duration-300"
78-
>
79-
<h3 className="text-alien-gold group-hover:text-alien-green mb-2 font-nasalization font-semibold transition-colors duration-300">
80-
{link.label}
81-
</h3>
82-
<p className="text-sm text-gray-400 group-hover:text-gray-300 leading-relaxed transition-colors duration-300">
83-
{link.desc}
84-
</p>
85-
</Link>
86-
</DropdownMenuItem>
87-
))}
88-
</div>
89-
</DropdownMenuContent>
90-
</DropdownMenu>
91-
92-
{/* Language Selector Dropdown */}
93-
<DropdownMenu>
94-
<DropdownMenuTrigger asChild>
95-
<Button
96-
variant="ghost"
97-
className="flex items-center text-alien-gold hover:text-alien-green focus:outline-none group p-2 hover:bg-alien-space-light/20 rounded-lg transition-all duration-300 hover:scale-105"
72+
<Sparkles className="w-3 h-3 mr-2 animate-pulse text-alien-gold" />
73+
EXPLORE SPACES
74+
<ChevronDown className="ml-2 h-3 w-3 opacity-50 group-data-[state=open]:rotate-180 transition-transform" />
75+
</Button>
76+
</DropdownMenuTrigger>
77+
<DropdownMenuContent
78+
className="bg-alien-space-dark/95 backdrop-blur-2xl border border-alien-gold/30 p-2 rounded-2xl w-[350px] shadow-2xl z-[9999]"
79+
sideOffset={12}
80+
>
81+
{spaceLinks.map((link) => (
82+
<DropdownMenuItem key={link.to} asChild>
83+
<Link
84+
to={link.to}
85+
className="flex flex-col items-start p-4 rounded-xl hover:bg-alien-green/10 group transition-all"
86+
>
87+
<h3 className="text-alien-gold group-hover:text-alien-green font-nasalization text-sm transition-colors">
88+
{link.label}
89+
</h3>
90+
<p className="text-[10px] text-gray-400 leading-relaxed mt-1">
91+
{link.desc}
92+
</p>
93+
</Link>
94+
</DropdownMenuItem>
95+
))}
96+
</DropdownMenuContent>
97+
</DropdownMenu>
98+
99+
{/* Selector de Idioma con Banderas */}
100+
<DropdownMenu>
101+
<DropdownMenuTrigger asChild>
102+
<Button variant="ghost" className="text-alien-gold hover:text-alien-green p-2 h-9 w-9 rounded-full transition-transform hover:rotate-12">
103+
<Globe className="h-4 w-4" />
104+
</Button>
105+
</DropdownMenuTrigger>
106+
<DropdownMenuContent className="bg-alien-space-dark/95 backdrop-blur-xl border border-alien-gold/20 p-1 rounded-xl w-48">
107+
{languages.map((lang) => (
108+
<DropdownMenuItem
109+
key={lang.code}
110+
onClick={() => translateTo(lang.lang)}
111+
className="flex items-center gap-3 p-2 hover:bg-white/5 cursor-pointer rounded-lg"
98112
>
99-
<Globe className="h-5 w-5" />
100-
<ChevronDown className="ml-1 h-4 w-4 transform transition-transform duration-300 group-data-[state=open]:rotate-180" />
101-
</Button>
102-
</DropdownMenuTrigger>
103-
<DropdownMenuContent
104-
className="bg-alien-space-dark/95 backdrop-blur-md border border-alien-gold/30 p-2 rounded-xl w-[240px] shadow-2xl shadow-alien-gold/10 z-[9999] max-h-80 overflow-y-auto"
105-
align="end"
106-
sideOffset={8}
107-
>
108-
<div className="flex flex-col space-y-1">
109-
{languages.map((lang) => (
110-
<DropdownMenuItem
111-
key={lang.code}
112-
className="flex items-center gap-3 text-alien-gold hover:text-alien-green hover:bg-alien-space-light/30 cursor-pointer p-3 rounded-lg transition-all duration-300"
113-
onSelect={(e) => { e.preventDefault(); handleLanguageSelect(lang.lang); }}
114-
>
115-
<img
116-
src={`https://flagcdn.com/w20/${lang.code}.png`}
117-
alt={`${lang.name} flag`}
118-
className="w-5 h-4 rounded-sm"
119-
/>
120-
<span className="font-medium">{lang.name}</span>
121-
</DropdownMenuItem>
122-
))}
123-
</div>
124-
</DropdownMenuContent>
125-
</DropdownMenu>
126-
</div>
113+
<img src={`https://flagcdn.com/w20/${lang.code}.png`} className="w-5 h-auto rounded-sm" alt={lang.name} />
114+
<span className="text-[11px] font-nasalization text-alien-gold">{lang.name}</span>
115+
</DropdownMenuItem>
116+
))}
117+
</DropdownMenuContent>
118+
</DropdownMenu>
127119
</nav>
128120
);
129121
};

0 commit comments

Comments
 (0)