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,23 +4,32 @@ $(document).ready(function(){
         // initiate MDC drawer
         const drawer = new mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
 
-        // initiate MDC top app bar
+        // include top app bar
-        const mdc_top_app_bar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
+        $(".mdc-top-app-bar").load("/page-inserts/top-app-bar.html", function(){
-        mdc_top_app_bar.setScrollTarget(document.getElementById('main-content'));
+            // initiate MDC top app bar
-        mdc_top_app_bar.listen('MDCTopAppBar:nav', () => {
+            const mdc_top_app_bar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
-            drawer.open = !drawer.open;
+            mdc_top_app_bar.setScrollTarget(document.getElementById('main-content'));
+            mdc_top_app_bar.listen('MDCTopAppBar:nav', () => {
+                drawer.open = !drawer.open;
+            });
+
+            // include source code link
+            $(".source-code-link").load("/page-inserts/source-code-link.html");
+
+            // initiate MDC items
+            mdc.autoInit();
+
+            // 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");
         });
-
-        // include source code link
-        $(".source-code-link").load("/page-inserts/source-code-link.html");
-
-        // initiate MDC items
-        mdc.autoInit();
-
-        var drawer_item_link_query_selector = ".mdc-list-item[href='" + window.activated_drawer_item_link;
-        $(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>
+                        <!-- input field helper text -->
+                        <p class="mdc-text-field-helper-text" aria-hidden="true">
+                            Validate with the Luhn Algorithm
+                        </p>
                     </div>
-                    <!-- input field helper text -->
-                    <p class="mdc-text-field-helper-text" aria-hidden="true">
-                        Validate with the Luhn Algorithm
-                    </p>
                     <!-- 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>