Как в next js добавить класс к элементу?

Question

[penta-bongo]

Разбираюсь с next js и столкнулся с такой проблемой - у меня есть меню навбар, работать оно должно, как active links, но с иконками
Задача такая: при определенном якоре (желательно) или ссылке добавлялся класс active
Если раньше в js это я делал, через querrySelectore и classlist.add, то сейчас, я если честно не понимаю, как это реализовывать

Код компонента навбар

"use client"
import React from 'react'
import Icon from './icons/Icon'


const navLinks = [
  { href: "#home_anchor", svgIcon: "home" },
  { href: "#user_anchor", svgIcon: "user"},
  { href: "#project_anchor", svgIcon: "project"},
  { href: "#stack_anchor", svgIcon: "stack"},
  { href: "#mail_anchor", svgIcon: "mail"},
]

const Navbar = () => {

  return (
    <nav className='flex flex-col fixed bg-gray-800 aligh-center'>
      {navLinks.map((link) => {
        return (
          <Icon href={link.href} key={link.svgIcon} title={link.svgIcon}/>
        )
      }
      )}
    </nav>
  )
}

export default Navbar

Код компонента иконок(Прошу не обращайте внимание на if if if, собираюсь в switch переделать

import Link from 'next/link'
import React from 'react'
import SvgHome from './home'
import SvgProject from './project'
import SvgMail from './mail'
import SvgUser from './user'
import SvgStack from './stack'


const Icon = (props:{title:string, href:string}) => {
  if(props.title == "home"){
    return (
        <Link href={props.href} className='svgh m-auto' ><SvgHome width="30" height="30" viewBox="0 0 50 50" /></Link>
      )
      
  }
  if(props.title == "user"){
    return (
      <Link href={props.href} className='svgh m-auto' ><SvgUser width="30" height="30" viewBox="-5 0 50 50" /></Link>
    )
  }
  if(props.title == "project"){
    return (
      <Link href={props.href} className='svgh m-auto' ><SvgProject width="30" height="30" viewBox="0 0 50 50" /></Link>
    )
  }
  if(props.title == "stack"){
    return (
      <Link href={props.href} className='svgh m-auto' ><SvgStack width="30" height="30" viewBox="0 0 50 50" /></Link>
    )
    
  }
  if(props.title == "mail"){
    return (
      <Link href={props.href} className='svgh m-auto' ><SvgMail width="30" height="30" viewBox="0 0 50 50" /></Link>
    )
  }  
}
export default Icon

Answer 1

[Алексей Уколов]

Примерно так:

{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>

https://www.npmjs.com/package/classnames

Comments

[penta-bongo]

Спасибо, помогло

Answer 2

[Михаил Р.]

Как в обычном реакте:

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>
    );
}

Comments

[penta-bongo]

Спасибо!