-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathDndNavbar.jsx
More file actions
83 lines (78 loc) · 3.34 KB
/
DndNavbar.jsx
File metadata and controls
83 lines (78 loc) · 3.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import React, { useContext } from 'react';
import { Link } from 'react-router-dom';
import { DndContext } from '../../context/DndContext';
import { CaretRightIcon, HouseIcon } from '@phosphor-icons/react';
const DndNavbar = () => {
const { breadcrumbs, language, setLanguage } = useContext(DndContext);
const formatBreadcrumbLabel = (label) => {
return label.indexOf(':') !== -1
? label.substring(0, label.indexOf(':'))
: label;
};
return (
<nav className="fixed top-0 left-0 right-0 z-[300] dnd-nav-modern border-b-2 border-dnd-gold">
{/* Top Bar: Navigation & Breadcrumbs */}
<div className="bg-black/40 px-4 md:px-12 py-2 flex items-center justify-between border-b border-white/5 md:mt-[25px]">
<div className="flex items-center gap-4">
<Link
to="/"
className="text-white hover:text-dnd-gold transition-colors"
>
<HouseIcon size={18} weight="fill" />
</Link>
{breadcrumbs && breadcrumbs.length > 0 && (
<div className="hidden sm:flex items-center gap-2 font-mono text-[9px] uppercase tracking-[0.2em]">
{breadcrumbs.map((crumb, index) => (
<React.Fragment key={crumb.path || index}>
<CaretRightIcon size={10} className="text-white/40" />
{crumb.path ? (
<Link
to={crumb.path}
className="text-white/60 hover:text-white transition-colors"
>
{formatBreadcrumbLabel(crumb.label)}
</Link>
) : (
<span className="text-white font-bold">
{formatBreadcrumbLabel(crumb.label)}
</span>
)}
</React.Fragment>
))}
</div>
)}
</div>
<div className="flex items-center gap-6">
<div className="flex items-center gap-2 font-mono text-[10px] font-bold tracking-widest">
<button
onClick={() => setLanguage('en')}
className={`transition-colors ${language === 'en' ? 'text-dnd-gold underline decoration-2 underline-offset-4' : 'text-white/40 hover:text-white'}`}
>
EN
</button>
<span className="text-white/20">/</span>
<button
onClick={() => setLanguage('tr')}
className={`transition-colors ${language === 'tr' ? 'text-dnd-gold underline decoration-2 underline-offset-4' : 'text-white/40 hover:text-white'}`}
>
TR
</button>
</div>
<Link
to="/"
className="text-[10px] font-mono font-bold tracking-[0.4em] text-white/40 hover:text-dnd-gold transition-colors hidden md:block"
>
FEZCODEX_SYSTEM
</Link>
</div>
</div>
{/* Main Bar: Title */}
<div className="px-6 py-4 flex items-center justify-center relative bg-gradient-to-b from-dnd-crimson to-transparent">
<span className="text-3xl md:text-4xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter drop-shadow-2xl">
{language === 'tr' ? 'Serfler ve Sahtekarlar' : 'From Serfs & Frauds'}
</span>
</div>
</nav>
);
};
export default DndNavbar;