fisshy/react-scroll

Scrolling does not work for me

StasGavrilov opened this issue · 2 comments

StasGavrilov commented

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>
    )
}
fisshy commented

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.

StasGavrilov commented