47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
//! Imports
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// --------------------------------------------------- Components ------------------------------------------------------
|
|
import Link from 'next/link';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
|
|
import { usePathname } from 'next/navigation';
|
|
import config from './config';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------- Assets & Styles ---------------------------------------------------
|
|
import './styles.scss';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
const Navbar = () => {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<nav
|
|
className='navbar'
|
|
style={{
|
|
gridTemplateColumns: `repeat(${config.length}, 1fr)`,
|
|
}}
|
|
>
|
|
{config.map((element) => (
|
|
<Link
|
|
key={element.title}
|
|
href={element.link}
|
|
className={`navButton ${
|
|
element.link == pathname ? 'selected' : ''
|
|
}`}
|
|
>
|
|
{element.icon()}
|
|
<span className='navButtonLabel'>{element.title}</span>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|