Enhanced Side Navbar Functionality

_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;
+ }
+})