SideDots

This is a small navigation that appears on the right side Components and Sections Pages that makes it a bit easier for your to navigate on these pages.

This component you will not find in our components folder file, this is just a static component made just inside the above pages.

For it to work properly if you want to add them in another page you need to move the following functions inside your page:

• componentDidMount()
• componentDidUpdate()
• componentWillUnmount()
• easeInOutQuad(t, b, c, d)
• updateView()
• smoothScroll(target)
• scrollTo(element, to, duration)

All these functions you can copy/paste from any of the above mentioned pages.

For the component itself you need to copy <nav id="cd-vertical-nav"> and all of it's contents from one of the above mentioned pages.

Small sample code

<nav id="cd-vertical-nav">
  <ul>
    <li>
      <a
        href="#buttons"
        data-number="1"
        className=""
        onClick={e => {
          e.preventDefault();
           smoothScroll("buttons");
        }}
      >
        <span className="cd-dot" />
        <span className="cd-label">Basic Elements</span>
      </a>
    </li>
  </ul>
</nav>

You will need three things to make the SideDots work.

As you can see, in the sampe code we have an href to an id set to our anchor element, you will need to add this id somewhere in your page as well and where you add that id (on the component) you will also need to add the class cd-section, for the example above, it will look like this:

<div id="buttons" className="cd-section">

So the three things that were mentioned above are the required functions, the actual code (sample code above) and the id set on a tag / component

Styles

You will find these styles inside assets/scss/core/_misc.scss from line 138 to line 226, as you will see, the styels are made through it's id.