Improve use cases navigation

Author: ikulikov

_data/use-cases.yml

@@ -1,24 +1,32 @@
 - id: smart-energy
   title: Smart Energy
   link: /smart-energy/
+  icon: /images/case-eng-icon.svg
 - id: smart-farming
   title: Smart Farming
   link: /smart-farming/
+  icon: /images/case-fam-icon.svg
 - id: fleet-tracking
   title: Fleet Tracking
   link: /fleet-tracking/
+  icon: /images/case-trk-icon.svg
 - id: smart-metering
   title: Smart Metering
   link: /smart-metering/
+  icon: /images/case-met-icon.svg
 - id: environment-monitoring
   title: Environment Monitoring
   link: /use-cases/environment-monitoring/
+  icon: /images/case-env-icon.svg
 - id: smart-office
   title: Smart Office
   link: /use-cases/smart-office/
+  icon: /images/case-off-icon.svg
 - id: water-metering
   title: Water Metering
   link: /use-cases/water-metering/
+  icon: /images/case-wat-icon.svg
 - id: smart-retail
   title: Smart Retail
   link: /use-cases/smart-retail/
+  icon: /images/case-ret-icon.svg

_includes/usecase-nav.html

@@ -2,8 +2,36 @@
     <div class="crop-nav">
         <ul>
             {% for usecase in site.data.use-cases %}
-                <li><a href="{{usecase.link}}" class="{% if usecase.id == include.usecase %}active{% endif %}">{{usecase.title}}</a></li>
+                <li><a href="{{usecase.link}}" class="{% if usecase.id == include.usecase %}active{% endif %}"><img src="{{usecase.icon}}">{{usecase.title}}</a></li>
             {% endfor %}
         </ul>
     </div>
 </nav>
+<script type="text/javascript">
+    document.querySelector('.crop-nav ul li a.active').parentElement.scrollIntoView();
+    jqueryDefer(function () {
+        $( document ).ready(function() {
+            var x,left,down;
+
+            $('.crop-nav').mousedown(function(e){
+                e.preventDefault();
+                down = true;
+                x = e.pageX;
+                left = $(this).scrollLeft();
+                $('.crop-nav').css('cursor', 'grabbing');
+            });
+
+            $('body').mousemove(function(e){
+                if(down){
+                    var newX = e.pageX;
+                    $('.crop-nav').scrollLeft(left - newX + x);
+                }
+            });
+
+            $('body').mouseup(function(e){
+                down = false;
+                $('.crop-nav').css('cursor', 'grab');
+            });
+        });
+    });
+</script>

_includes/usecase-nav.sass

@@ -1,6 +1,5 @@
 #docsContent
   .usecase-nav
-    display: flex
     margin-bottom: 56px
     z-index: 2
     position: fixed
@@ -15,8 +14,9 @@
     .crop-nav
       overflow-x: auto
       display: flex
-      width: 100%
       margin: 0 30px
+      cursor: grab
+      +tiny-scrollbar(4px)
       ul
         flex-wrap: unset
         display: flex
@@ -26,31 +26,40 @@
           position: relative
           display: block
           align-items: center
+          padding: 8px 36px 8px 0
           margin: 0
-          margin-right: 28px
           float: left
           width: max-content
           a
             color: 	rgba(33,37,41, 0.6)
             text-decoration: none
             font-size: 18px
             font-weight: 400
+            img
+              padding-right: 10px
+              width: 40px
+              height: 40px
+              filter: grayscale(1)
             &:hover
               color: #212529
+              img
+                filter: grayscale(1) brightness(0.75) contrast(2)
             &.active
               color: #2A7DEC
               font-weight: 500
+              img
+                filter: unset
           &:last-child
-            margin: 0
+            padding: 8px 0
 
 @media screen and (min-width: 1025px)
   #docsContent
     .usecase-nav
       .crop-nav
         max-width: 1200px
+        margin: auto
         ul
-          display: unset
-          flex-wrap: wrap
+          flex-wrap: unset
 
 @media screen and (min-width: 1500px)
   #docsContent

_sass/_reset.sass

@@ -69,9 +69,10 @@ a
 	&:-ms-input-placeholder
 		@content
 
-=tiny-scrollbar
+=tiny-scrollbar($size: 6px)
 	&::-webkit-scrollbar
-		width: 6px
+		width: $size
+		height: $size
 	&::-webkit-scrollbar-track
 		background: #f1f1f1
 	&::-webkit-scrollbar-thumb

use-cases/use-cases.sass

@@ -19,7 +19,7 @@
     font-weight: 500
     line-height: 54px
     width: 100%
-    margin: 60px 0 56px
+    margin: 80px 0 56px
     padding: 0
 
 #usecase-list
@@ -41,7 +41,7 @@
         width: 100%
         order: 2
         overflow: hidden
-        box-shadow: -8px 8px 15px rgba(0, 0, 0, 0.15), -12px 12px 40px rgba(0, 0, 0, 0.15)
+        box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.15), 0 0 30px 0 rgba(0, 0, 0, 0.05)
         border-radius: 6px
     .item-description
         width: 100%
@@ -270,7 +270,7 @@
             right: 789px
             border: 4px solid #305680
         &.usecase-big-bg1
-            top: -1180px
+            top: -890px
             width: 2560px
             height: 845px
             left: -1280px