JSFiddle - React, Tailwind, and code Playground

by Nenad Novakovic

HTML

<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<!-- <div id="main" ontouchmove="touchMove(event);">
    <span class='catch'>One</span>
    <span class='catch'>Two</span>
    <span class='catch'>Three</span>
    <span class='catch'>Four</span>
    <span class='catch'>Five</span>
    <span class='catch'>Six</span>
    <span class='catch'>Seven</span>
</div> -->

<div class="Navbar" id="Sidenav">
    <ul class="Navbar__list">
        <li class="Navbar__item">
            <a class="Navbar__link">
                1
            </a>
        </li>

        <li class="Navbar__item">
            <a class="Navbar__link">
                2
            </a>
        </li>

        <li class="Navbar__item">
            <a class="Navbar__link">
                3
            </a>
        </li>
    </ul>
</div>

SCSS

.Navbar {
    background-color: #696969;
    position: fixed;
    right: 0;
    /* left: 0; */
    top: 0;
    bottom: 0;
    width: 40px;
    /* height: 40px; */
    
    &__list {
        position: relative;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        flex-direction: column;
        height: 100%;
    }
    
    &__item {
        display: inline-block;
    }

    &__link {
        width: 15px;
        height: 15px;
        padding: 5px;
        display: block;
        border-radius: 100%;
        text-align: center;

        &--active {
            background-color: red;
        }
    }
}

JavaScript

function navPositionCheck(element, posX, posY) {
    var offset = {
        top: element.offsetTop,
        left: element.offsetLeft,
        width: element.offsetWidth,
        height: element.offsetHeight
    };
    
    /*console.log( posY >= offset.top
        && posX >= offset.left
        && posX <= (offset.left + offset.width) );
    */
    
    console.log( posY >= offset.top
        && posX >= offset.left
        && posY <= (offset.top + offset.height) );
	
    return posY >= offset.top
        && posX >= offset.left
        //&& posX <= (offset.left + offset.width)
        && posY <= (offset.top + offset.height);
}

var anchors = document.querySelectorAll('.Navbar__link');

document.querySelector('#Sidenav').addEventListener('mousemove', function (event) {
	[].forEach.call(anchors, function( element, index ) {
    	element.parentNode.classList.remove('Navbar__link--active');
        
		if ( navPositionCheck(element, event.pageX, event.pageY) ) {
        	element.parentNode.classList.add('Navbar__link--active');
        }
	});
});