Merge pull request #716 from OmkarSonawane1230/master

Enhanced Side Navbar Functionality

Author: sivaraam

_layouts/default.html

@@ -7,6 +7,7 @@
         <meta name="viewport" content="width=device-width">
         <link rel="icon" type="image/x-icon" href="/images/logo.png"/>
         <link rel="stylesheet" href="/css/main.css">
+        <script src="/script/script.js" defer></script>
         <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml">
     </head>
 

css/main.css

@@ -35,16 +35,33 @@ body {
     -webkit-box-flex: 1;
     -webkit-flex: 1;
     -ms-flex: 1;
-    flex: 1;
     max-width: 700px;
 }
 
 .navbar {
   float: left;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
   text-align: left;
+  height: fit-content;
   width: 15em;
   padding: 2em;
-  padding-right: 0;
+}
+
+.navbar > ul {
+  margin: 0;
+  list-style: none;
+  position: relative;
+  line-height: 0;
+}
+
+.navbar > ul > li {
+  margin: .5rem 0;
+}
+
+.navbar > ul > li.active {
+  font-weight: bold;
 }
 
 #menuLinkBar {
@@ -64,6 +81,7 @@ body {
   display: -ms-flexbox;
   display: flex;
   margin: 0 auto;
+  width: 100%;
   justify-content: center;
 }
 
@@ -80,13 +98,15 @@ body {
         -webkit-order: 2;
         -ms-flex-order: 2;
         order: 2;
+        padding: 1em;
     }
     .navbar {
         width: auto;
         -webkit-box-ordinal-group:4;
         -webkit-order:3;
         -ms-flex-order:3;
         order:3;
+        padding: 1em;
     }
     #menuLinkBar {
         display: block;
@@ -795,10 +815,10 @@ pre {
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   -o-border-radius: 3px;
+  white-space: pre-wrap;
   border-radius: 3px;
   display: block;
   padding: 10px 15px 13px 15px;
-  margin: 0 3em 1em 3em;
   background-color: #fff;
   border: solid 1px #efeee6;
   line-height: 18px;
@@ -2015,7 +2035,7 @@ th, td {
 }
 
 img {
-  max-width: 100%;
+  max-width: 50%;
 }
 
 /* Table of contents */

script/script.js

@@ -0,0 +1,9 @@
+const NAVBAR_LI_ELEMENTS = document.getElementById('navbar').firstElementChild.children;    // Access all the <li> in side navigation
+
+// check for a match with the <li> element and SITE_URL, then make it active
+Array.from(NAVBAR_LI_ELEMENTS).forEach((liElement) => {
+    if (liElement.firstElementChild.href == location.href) {
+        liElement.classList.add('active');
+        return;
+    }
+})