Support Page Navigation Sidebar

asset/css/markbind.css

@@ -121,3 +121,33 @@ footer {
 #flex-div {
     flex: 1;
 }
+
+/* Scrollbar */
+
+.slim-scroll::-webkit-scrollbar {
+    width: 5px;
+}
+
+.slim-scroll::-webkit-scrollbar-thumb {
+    background: #808080;
+    border-radius: 20px;
+}
+
+.slim-scroll::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 20px;
+}
+
+.slim-scroll-blue::-webkit-scrollbar {
+    width: 5px;
+}
+
+.slim-scroll-blue::-webkit-scrollbar-thumb {
+    background: #00b0ef;
+    border-radius: 20px;
+}
+
+.slim-scroll-blue::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 20px;
+}

asset/css/page-nav.css

@@ -0,0 +1,50 @@
+/* Page navigation */
+
+#page-nav {
+    border-left: solid 1px lightgrey;
+    display: inline-block;
+    max-height: 80vh;
+    overflow: auto;
+    position: fixed;
+    right: 0;
+    transition: 0.4s;
+    width: 300px;
+    -webkit-transition: 0.4s;
+}
+
+#page-nav a:link,
+#page-nav a:visited {
+    color: #9b9b9b;
+    text-decoration: none;
+}
+
+#page-nav a:hover{
+    color: black;
+}
+
+#page-nav a.active {
+    background-color: transparent;
+    color: black;
+}
+
+#page-nav-content-wrapper {
+    margin-right: 300px;
+    transition: 0.4s;
+    -webkit-transition: 0.4s;
+}
+
+/* Responsive site navigation */
+
+/* Hides page navigation on screen widths smaller than 1300px */
+@media screen and (max-width: 1299.98px) {
+
+    #page-nav {
+        overflow: hidden;
+        padding: 0;
+        width: 0px;
+    }
+
+    #page-nav-content-wrapper {
+        margin-right: 0;
+    }
+}

asset/js/setup.js

@@ -62,6 +62,12 @@ function setupSiteNav() {
   );
 }
 
+function setupPageNav() {
+  jQuery(window).on('activate.bs.scrollspy', (event, obj) => {
+    document.querySelectorAll(`a[href='${obj.relatedTarget}']`).item(0).scrollIntoView(false);
+  });
+}
+
 function setup() {
   // eslint-disable-next-line no-unused-vars
   const vm = new Vue({
@@ -71,6 +77,7 @@ function setup() {
     },
   });
   setupSiteNav();
+  setupPageNav();
 }
 
 function setupWithSearch(siteData) {
@@ -102,6 +109,7 @@ function setupWithSearch(siteData) {
     },
   });
   setupSiteNav();
+  setupPageNav();
 }
 
 jQuery.getJSON(`${baseUrl}/siteData.json`)

docs/userGuide/glossary.md

@@ -34,7 +34,15 @@ MarkBind is able to take Markdown files (`.md`) and HTML files (`.html`) as sour
 
 <span id="site-navigation-menu">
 
-_Site Navigation Menu_ (_siteNav_ for short) is a fixed menu on the left side of your page contents, that shows a road map of the main pages of your site.
+_Site Navigation Menu_ (_siteNav_ for short) is a fixed menu on the **left** side of your page contents, that shows a road map of the main pages of your site.
 </span>
 
-</div>
+
+#### Page Navigation Menu
+
+<span id="page-navigation-menu">
+
+_Page Navigation Menu_ (_pageNav_ for short) is a fixed menu on the **right** side of your page contents, which contains the current page's headings.
+</span>
+
+</div>

docs/userGuide/reusingContents.md

@@ -1,6 +1,8 @@
 <frontmatter>
   title: "User Guide: Reusing Contents"
   footer: footer.md
+  pageNav: "default"
+  pageNavTitle: "List of Methods"
   siteNav: userGuideSections.md
 </frontmatter>
 

docs/userGuide/tweakingThePageStructure.md

@@ -1,6 +1,8 @@
 <frontmatter>
   title: "User Guide: Tweaking the Page Structure"
   footer: footer.md
+  pageNav: "default"
+  pageNavTitle: "List of Tweaks"
   siteNav: userGuideSections.md
 </frontmatter>
 
@@ -239,6 +241,37 @@ A siteNav has a fixed width of 300 pixels for its contents. A siteNavs is [_resp
 There is no limit to the number of nesting levels or the number of items in the menu, but note that any content exceeding a height of 1000 pixels will be cut off.
 
 
+<hr><!-- ======================================================================================================= -->
+
+## Page Navigation Menus
+
+**You can add a <trigger trigger="click" for="modal:pageStructure-pageNavidationMenu">_page navigation menu_</trigger> to a page.**
+
+<modal title="Page Naviation Menu" id="modal:pageStructure-pageNavidationMenu">
+  <include src="glossary.md#page-navigation-menu" />
+</modal>
+
+Steps to add a page navigation menu ==(_pageNav_ for short)==:
+1. Specify your pageNav within the `<frontmatter>` of a page with <tooltip content="The value `default` will use `headingIndexingLevel` within `site.json`.">`"default"`</tooltip> or a <tooltip content="HTML defines six levels of headings, numbered from <br>`1 to 6`.">`heading level`</tooltip>.
+2. (Optional) You may also specify a page navigation title within `<frontmatter>` that will be placed at the top of the page navigation menu.
+
+<div class="indented">
+
+{{ icon_example }}
+In the page that you want to have page navigation:
+```html
+<frontmatter>
+  pageNav: 2
+  pageNavTitle: "Chapters of This Page"
+</frontmatter>
+```
+
+The example above will create a page navigation containing only heading levels of `1 and 2`.
+</div>
+
+A pageNav has a fixed width of 300 pixels for its contents. It is [_responsive_](https://www.w3schools.com/html/html_responsive.asp) by design and will be completely hidden when the screen size is smaller than 1300 pixels.
+
+
 <hr><!-- ======================================================================================================= -->
 
 ## Page Layouts

docs/userGuide/usingComponents.md

@@ -1,6 +1,8 @@
 <frontmatter>
   title: "Using Components"
   footer: footer.md
+  pageNav: "default"
+  pageNavTitle: "List of Components"
   siteNav: userGuideSections.md
 </frontmatter>