58 lines
1017 B
TypeScript
58 lines
1017 B
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import './topbar.css';
|
|
|
|
const headerItems = [
|
|
{
|
|
name: 'Races',
|
|
link: '/races'
|
|
},
|
|
{
|
|
name: 'Classes',
|
|
link: '/classes'
|
|
},
|
|
{
|
|
name: 'Feats',
|
|
link: '/feats'
|
|
},
|
|
{
|
|
name: 'Options & Features',
|
|
link: '/options'
|
|
},
|
|
{
|
|
name: 'Backgrounds',
|
|
link: '/backgrounds'
|
|
},
|
|
{
|
|
name: 'Items',
|
|
link: '/items'
|
|
},
|
|
{
|
|
name: 'Spells',
|
|
link: '/spells'
|
|
}
|
|
];
|
|
|
|
export default function Topbar() {
|
|
const pathName = usePathname();
|
|
|
|
return (
|
|
<nav className='navbar'>
|
|
<div className='left'>
|
|
<Link href={'/'} className='title'>
|
|
Siren
|
|
</Link>
|
|
<div className='header-items'>
|
|
{headerItems.map((item) => (
|
|
<Link className={`header-item ${pathName == item.link && 'active'}`} href={item.link} key={item.name}>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|