Adding scroll bar

data/panaetius-theme/assets.json

@@ -3,14 +3,14 @@
     "js": "0.vendors~app~bootstrap.e59019bd2c01f8f5dd1c.min.js"
   },
   "app": {
-    "js": "1.app.834f930bdebebc2f70d8.min.js"
+    "js": "1.app.0171dc68e616d119970d.min.js"
   },
   "lazyload": {
     "js": "2.lazyload.1168fc21175de558d316.min.js"
   },
   "main": {
-    "css": "main.8722ce3e6e2f5196027f.min.css",
-    "js": "main.de04e43a25a1ed226095.min.js"
+    "css": "main.651bb1fef802c68b6843.min.css",
+    "js": "main.48637aff6f96e597ae05.min.js"
   },
   "vendors~app": {
     "js": "4.vendors~app.7827f3b332495242afbd.min.js"

layouts/post/single.html

@@ -1,4 +1,6 @@
 {{ define "main" }}
+<div id="line-scroll" class="line-scroll">
+</div>
 <main class="content-page container-fluid pt-7 pb-5">
     {{ $page := . }}
     <div class="row">

src/js/App.js

@@ -104,4 +104,15 @@ export default {
     var AOS = require("aos");
     AOS.init({ duration: 1000, once: false, useClassNames: true });
   },
+  scrollBar: () => {
+    $(window).on("load scroll resize", function () {
+      let top = $(window).scrollTop();
+      let height = $(document).height();
+      let windowheight = $(window).height();
+      let width = (top / (height - windowheight)) * 100;
+      $("#line-scroll").css({
+        width: width + "%",
+      });
+    });
+  },
 };

src/main.js

@@ -8,6 +8,7 @@ window.addEventListener("DOMContentLoaded", async (event) => {
   App.bootstrapify();
   App.lazyload();
   App.loadFontAwesome();
-  App.navbarFade();
+  // App.navbarFade();
   App.aos();
+  App.scrollBar();
 });

src/scss/scroll-bar.scss

@@ -0,0 +1,9 @@
+.line-scroll {
+    background-image: linear-gradient(90deg, rgba(238,136,5,1) 0%, rgba(191,48,48,1) 41%, rgba(209,28,28,1) 100%);
+    height: 5px;
+    left: 0;
+    top: 63px;
+    position: fixed;
+    width: 0;
+    z-index: 10;
+  }

src/scss/styles.scss

@@ -6,4 +6,5 @@
 @import "search";
 @import "search-bar";
 @import "toc";
+@import "scroll-bar";
 @import "fonts";