Open StasGavrilov opened 1 year ago
For some reason the scrolling does not work, can you assist to understand why:
import React, { useState } from 'react' import cn from 'classnames' // import Link from 'next/link' import { Link } from "react-scroll" import Logo from '../Logo/Logo' import styles from './Layout.module.scss' interface ILayoutProps { children: React.ReactNode } export default function Layout({ children }: ILayoutProps) { const [activeTab, setActiveTab] = useState('Home') const navigation = ['#Home', '#About', '#Portfolio', '#Contact'] return ( <div> <nav className={styles.navContainer}> <Link to={'/#Home'}> <Logo /> </Link> <ul className={styles.navItems}> {navigation.map((nav, index) => { return ( <li key={index}> <Link to={`/${nav === 'Home' ? '/' : nav}`} className={cn(styles.linkItem, { [styles.activeTab]: activeTab === nav })} onClick={() => setActiveTab(nav)} spy={true} smooth={true} offset={50} duration={500} > {nav.slice(1)} </Link> </li> ) })} </ul> <a className={styles.button} href='assets/Stas_Gavrilov_resume.txt' download>Resume</a> </nav> <main>{children}</main> </div> ) }
Hard to tell without a plunkr/codepen etc, but try remove the onClick event, to see if its the bubbling of events thats causing it.
I was needed to remove the '/' from to call, also the id wasn't right.
For some reason the scrolling does not work, can you assist to understand why: