Simplify dynamic navbar styling & include top app bar via jQuery

Remove the need to specify the current URL in order to style the 
selected item in the navbar

assets/global.js

@@ -4,6 +4,8 @@ $(document).ready(function(){
         // initiate MDC drawer
         const drawer = new mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
 
+        // include top app bar
+        $(".mdc-top-app-bar").load("/page-inserts/top-app-bar.html", function(){
             // initiate MDC top app bar
             const mdc_top_app_bar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
             mdc_top_app_bar.setScrollTarget(document.getElementById('main-content'));
@@ -17,10 +19,17 @@ $(document).ready(function(){
             // initiate MDC items
             mdc.autoInit();
 
-        var drawer_item_link_query_selector = ".mdc-list-item[href='" + window.activated_drawer_item_link;
+            // get current URL with no forward slash at the end and no domain
+            var drawer_item_link_query_selector = ".mdc-list-item[href='" + window.location.pathname;
+            if (drawer_item_link_query_selector.substring(drawer_item_link_query_selector.length - 1) == "/") {
+                drawer_item_link_query_selector = drawer_item_link_query_selector.substring(0,drawer_item_link_query_selector.length - 1);
+            }
+
+            // give 'seleted' styling to correct item on navbar
             $(drawer_item_link_query_selector + "']").addClass("mdc-list-item--activated");
             $(drawer_item_link_query_selector + "']").attr("aria-selected", "true");
             $(drawer_item_link_query_selector + "/']").addClass("mdc-list-item--activated");
             $(drawer_item_link_query_selector + "/']").attr("aria-selected", "true");
         });
     });
+});

luhn-algorithm/index.html

@@ -48,14 +48,7 @@
         <div class="mdc-drawer-scrim"></div>
 
         <div class="mdc-drawer-app-content">
-            <header class="mdc-top-app-bar app-bar" id="app-bar">
+            <header class="mdc-top-app-bar app-bar" id="app-bar"></header>
-                <div class="mdc-top-app-bar__row">
-                    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-                        <a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
-                        <span class="mdc-top-app-bar__title">Luhn Algorithm</span>
-                    </section>
-                </div>
-            </header>
 
             <main class="main-content" id="main-content">
                 <div class="mdc-top-app-bar--fixed-adjust">
@@ -72,11 +65,11 @@
                             </div>
                             <div class="mdc-notched-outline__idle"></div>
                         </div>
-                    </div>
                         <!-- input field helper text -->
                         <p class="mdc-text-field-helper-text" aria-hidden="true">
                             Validate with the Luhn Algorithm
                         </p>
+                    </div>
                     <!-- button to submit & check number with Luhn algorithm -->
                     <button class="validation_button mdc-button mdc-button--outlined" onclick="checkNumber()" data-mdc-auto-init="MDCRipple">
                         <i class="material-icons mdc-button__icon">check_circle_outline</i>

luhn-algorithm/script.js

@@ -1,5 +1,3 @@
-window.activated_drawer_item_link = "/luhn-algorithm";
-
 document.addEventListener("keyup", function(event) {
     // stop any code that may normally run when enter key pressed
     event.preventDefault();

page-inserts/top-app-bar.html

@@ -0,0 +1,6 @@
+<div class="mdc-top-app-bar__row">
+    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
+        <a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
+        <span class="mdc-top-app-bar__title">Luhn Algorithm</span>
+    </section>
+</div>