import React from 'react'
import NubraScrollSpy from '../../../components/@nubra-scroll-spy/@nubra-scroll-spy'

const HorizontalScrollSpy = () => {
  return (
    <div>
        <nav id="scrollspy_demo_h" className="navbar border-bottom px-30 pb-0">
            <ul className="nav nav-line nav-light">
                <li className="nav-item">
                    <a className="nav-link active" href="#section1">Section One</a>
                </li>
                <li className="nav-item">
                    <a className="nav-link" href="#section2">Section Two</a>
                </li>
                <li className="nav-item dropdown">
                    <a className="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
                        Section Three
                    </a>
                    <div className="dropdown-menu">
                        <a className="dropdown-item" href="#section31">Link One</a>
                        <a className="dropdown-item" href="#section32">Link Two</a>
                    </div>
                </li>
            </ul>
        </nav>

        <NubraScrollSpy target="#scrollspy_demo_h" offset={80} className="h-600p  px-30  position-relative overflow-y-scroll" >
            <div id="section1" className="pt-7">
                <h6 className="sub-heading  sub-heading-uppercase text-theme">section 1.0</h6>
                <h1>High quallity bootstrap template</h1>
                <p className="p-xl mb-5">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,</p>
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident.</p>
            </div>
            <div className="hk-separator-full mt-7" />
            <div id="section2">
                <h6 className="sub-heading  sub-heading-uppercase text-theme">section 2.0</h6>
                <h1>Start your next web project</h1>
                <p className="p-xl mb-5">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,</p>
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident.</p>
            </div>
            <div className="hk-separator-full mt-7" />
            <div id="section31">
                <h6 className="sub-heading  sub-heading-uppercase text-theme">section 3.1</h6>
                <h1>High quallity bootstrap template</h1>
                <p className="p-xl mb-5">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,</p>
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident.</p>
            </div>
            <div className="hk-separator-full mt-7" />
            <div id="section32" className="mb-14">
                <h6 className="sub-heading  sub-heading-uppercase text-theme">section 3.2</h6>
                <h1>High quallity bootstrap template</h1>
                <p className="p-xl mb-5">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,</p>
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident.</p>
            </div>
        </NubraScrollSpy>
    </div>
  )
}

export default HorizontalScrollSpy

import React from 'react'
import { Col, Row } from 'react-bootstrap'
import NubraScrollSpy from '../../../components/@nubra-scroll-spy/@nubra-scroll-spy'

const VerticalScrollSpy = () => {
  return (
    <Row>
        <Col xs={4} sm={3}>
            <div className="h-100 border-right">
                <nav id="scrollspy_demo_v" className="navbar">
                    <ul className="nav nav-line nav-light flex-column mx-auto">
                        <li className="nav-item">
                            <a className="nav-link active" href="#section5">Section One</a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#section6">Section Two</a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#section7">Section Three</a>
                        </li>
                        <li className="nav-item dropdown">
                            <a className="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
                                Section Four
                            </a>
                            <div className="dropdown-menu">
                                <a className="dropdown-item" href="#section81">Link One</a>
                                <a className="dropdown-item" href="#section82">Link Two</a>
                            </div>
                        </li>
                    </ul>
                </nav>

            </div>
        </Col>
        <Col xs={8} sm={9} className="ps-0">
            <NubraScrollSpy target="#scrollspy_demo_v" className="h-600p  px-30  position-relative overflow-y-scroll" >
                <div id="section5" className="pt-7">
                    <h6 className="sub-heading  sub-heading-uppercase text-theme">section 1.0</h6>
                    <h1>High quallity bootstrap template</h1>
                    <p className="p-xl mb-7">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,</p>
                    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident.</p>
                </div>
                <div className="hk-separator-full mt-7" />
                <div id="section6">
                    <h6 className="sub-heading  sub-heading-uppercase text-theme">section 2.0</h6>
                    <h1>Start your next web project</h1>
                    <p className="p-xl mb-7">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,</p>
                    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident.</p>
                </div>
                <div className="hk-separator-full mt-7" />
                <div id="section7">
                    <h6 className="sub-heading  sub-heading-uppercase text-theme">section 3.0</h6>
                    <h1>High quallity bootstrap template</h1>
                    <p className="p-xl mb-7">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,</p>
                    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident.</p>
                </div>
                <div className="hk-separator-full mt-7" />
                <div id="section81">
                    <h6 className="sub-heading  sub-heading-uppercase text-theme">section 4.1</h6>
                    <h1>High quallity bootstrap template</h1>
                    <p className="p-xl mb-7">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,</p>
                    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident.</p>
                </div>
                <div className="hk-separator-full mt-7" />
                <div id="section82" className="mb-14">
                    <h6 className="sub-heading  sub-heading-uppercase text-theme">section 4.2</h6>
                    <h1>High quallity bootstrap template</h1>
                    <p className="p-xl mb-7">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,</p>
                    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident.</p>
                </div>
            </NubraScrollSpy>
        </Col>
    </Row>
  )
}

export default VerticalScrollSpy