public/stylesheets/scss/_component.chart.nav.scss

$chart-nav-width: 180px;
$chart-icon-width: 32px;
$chart-icon-border: 1px;

#left-chart-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;

    padding-top: $nav-height;
    width: $chart-nav-width;

    background-color: $clr-primary;
    overflow-y: hidden;

    &:hover {
        overflow-y: auto;
    }

    li {
        height: 54px;
        padding: 10px 0 10px 20px;
        transition: 0.5s;

        a {
            color: $clr-gray;
            position: relative;
            display: block;
            transition: 0.5s;

            .chart-name {
                display: inline-block;
                position: relative;
                top: -12px;
                margin-left: 10px;
            }

            .chart-icon {
                content: '';
                display: inline-block;
                width: $chart-icon-width;
                height: $chart-icon-width;
                background-image: url('../images/chart-icon.png');
                background-size: $chart-icon-width;
                background-repeat: no-repeat;
                border-radius: 50%;
                border: $chart-icon-border solid $clr-gray-dark;
            }
        }

        &.active {
            background-color: $clr-contrast;

            a {
                color: $clr-gray-light;
            }

            .chart-icon {
                border-color: $clr-gray-light;
            }
        }

        &:hover {
            background-color: $clr-primary-dark;
        }
    }
}

@media (max-width: 768px) {
    #left-chart-nav {
        display: none;
    }
}



// icon sprites
$chart-types: 'line', 'bar', 'scatter', 'pie', 'radar', 'funnel', 'gauge', 'map',
    'graph', 'treemap', 'parallel', 'sankey', 'candlestick', 'boxplot', 'heatmap',
    'pictorialBar', 'themeRiver', 'calendar', 'custom', 'sunburst', 'tree',
    'globe', 'bar3D', 'scatter3D', 'surface', 'map3D', 'lines3D', 'line3D',
    'scatterGL', 'linesGL', 'flowGL', 'graphGL', 'geo3D', 'geo', 'lines', 'dataset';
$chart-position: 0, 1, 2, 4, 5, 10, 9, 8, 7, 15, 16, 17, 3, 18, 11, 24, 25, 26, 27, 28, 14,
    29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 8, 20, 22;

@each $type in $chart-types {
    $i: index($chart-types, $type);
    $pos: nth($chart-position, $i);
    #left-chart-nav-#{$type} .chart-icon {
        background-position-x: - $chart-icon-border;
        background-position-y: - $chart-icon-border - $pos * $chart-icon-width;
    }
}