Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrolling does not work for me #542

Open
StasGavrilov opened this issue Jan 26, 2023 · 2 comments
Open

Scrolling does not work for me #542

StasGavrilov opened this issue Jan 26, 2023 · 2 comments

Comments

@StasGavrilov
Copy link

StasGavrilov commented Jan 26, 2023

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
Copy link
Owner

fisshy commented Jan 27, 2023

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
Copy link
Author

StasGavrilov commented Jan 28, 2023 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants