penta-bongo

const Icon = ({title, href, active}) => {
    const className = active ? 'active' : '';

    return (
        <Link href={href} className={`svgh m-auto ${className}`}>
            {/* svg */}
        </Link>
    );
}

'use client'
import React, {useState, useEffect} from 'react';
import Icon from './icons/Icon';

const links = [
    {href: '#home_anchor', svgIcon: 'home'},
    {href: '#user_anchor', svgIcon: 'user'}
    // others
];

const Navbar = () => {
    const [activeLink, setActiveLink] = useState('');

    useEffect(() => {
        const handleScroll = () => {
            // logic scroll
        }

        // add anchor
        window.addEventListener('scroll', handleScroll);

        // remove anchor from unmount
        return () => window.removeEventListener('scroll', handleScroll)

    }, []);

    return (
        <nav className="flex flex-col fixed bg-gray-800 align-center">
            {links.map((l) => (
                <Icon href={l.href} key={l.svgIcon} title={l.svgIcon} active={activeLink === l.href}/>
            ))}
        </nav>
    );
}

{navLinks.map((link) => (
    <Icon href={link.href} key={link.svgIcon} title={link.svgIcon} className={isCurrent ? `active` : undefined} />
))}

...
import classNames, { type Argument } from "classnames";

type Props = {
    title: string;
    href: string;
    className: Argument;
}

<Link href={props.href} className={classNames('svgh m-auto', props.className)>
    <SvgMail width="30" height="30" viewBox="0 0 50 50" />
</Link>