refactor main.js into smaller pieces, and moved navbar.js to assets

assets/scripts/sections/education.js

@@ -0,0 +1,34 @@
+// Show more rows in the taken courses table
+function toggleCourseVisibility(elem) {
+
+  // find the courses
+  let courses = elem.parentNode.getElementsByClassName("course");
+  if (courses == null) {
+    return
+  }
+
+  // toggle hidden-course class from the third elements
+  for (const course of courses) {
+    if (course.classList.contains("hidden-course") || course.classList.contains("toggled-hidden-course")) {
+      course.classList.toggle("hidden-course");
+      course.classList.add("toggled-hidden-course");
+    }
+  }
+
+  // toggle the buttons visibility
+  let buttonsToToggle = elem.parentNode.getElementsByClassName("show-more-btn");
+  for (const buttonToToggle of buttonsToToggle) {
+    buttonToToggle.classList.toggle("hidden");
+  }
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+  const $els = [
+    document.getElementById('show-more-btn'),
+    document.getElementById('show-less-btn'),
+  ];
+
+  $els.filter(($el) => $el != null).forEach(($el) => 
+    $el.addEventListener('click', ({target}) => 
+      toggleCourseVisibility(target)));
+});

assets/scripts/sections/index.js

@@ -0,0 +1,4 @@
+import './navbar';
+import './sidebar';
+
+import './education';

assets/scripts/sections/navbar.js

@@ -0,0 +1,61 @@
+import $ from 'jquery';
+
+const updateNavBar = () => {
+  if ($(document).scrollTop() > 40) {
+    $('#top-navbar').removeClass('initial-navbar');
+    $('#top-navbar').addClass('final-navbar shadow');
+
+    $('#navbar-toggler').removeClass('navbar-dark');
+    $('#navbar-toggler').addClass('navbar-light');
+
+    // color theme selector a.k.a. dark mode
+    $('#navbar-theme-icon-svg').removeClass('navbar-icon-svg-dark');
+
+    // get the main logo from hidden img tag
+    let mainLogo = document.getElementById("main-logo")
+    if (mainLogo !== null) {
+      let logoURL = mainLogo.getAttribute("src");
+      $('#logo').attr("src", logoURL);
+    }
+
+  } else {
+    $('#top-navbar').removeClass('final-navbar shadow');
+    $('#top-navbar').addClass('initial-navbar');
+
+    $('#navbar-toggler').removeClass('navbar-light');
+    $('#navbar-toggler').addClass('navbar-dark');
+
+    // color theme selector a.k.a. dark mode
+    $('#navbar-theme-icon-svg').addClass('navbar-icon-svg-dark');
+
+    // get the inverted logo from hidden img tag
+    let invertedLogo = document.getElementById("inverted-logo")
+    if (invertedLogo !== null) {
+      let logoURL = invertedLogo.getAttribute("src");
+      $('#logo').attr("src", logoURL);
+    }
+  }
+};
+
+$(document).ready(function () {
+
+  // change navbar style on scroll
+  // ==================================================
+  // When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
+  // $.onscroll = function() {scrollFunction()};
+  $(document).scroll(function () {
+    updateNavBar();
+  });
+
+  // Creates a click handler to collapse the navigation when
+  // anchors in the mobile nav pop up are clicked
+  var navMain = $(".navbar-collapse");
+  if (navMain) {
+    navMain.on("click", "a", null, function (e) {
+      $('.navbar-collapse').collapse('hide');
+    });
+  }
+
+  updateNavBar();
+});
+

assets/scripts/sections/sidebar.js

@@ -0,0 +1,39 @@
+import { getDeviceState } from '../core/device';
+
+// Toggle sidebar on click. Here, class "hide" open the sidebar
+function toggleSidebar() {
+  let sidebar = document.getElementById("sidebar-section");
+  if (sidebar == null) {
+    return
+  }
+  if (sidebar.classList.contains("hide")) {
+    sidebar.classList.remove("hide")
+  } else {
+    // if toc-section is open, then close it first
+    let toc = document.getElementById("toc-section");
+    if (toc != null && toc.classList.contains("hide")) {
+      toc.classList.remove("hide");
+    }
+    // add "hide" class
+    sidebar.classList.add("hide");
+    // if it is mobile device. then scroll to top.
+    const { isMobile } = getDeviceState();
+    if (isMobile && sidebar.classList.contains("hide")) {
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+      if (document.getElementById("hero-area") != null) {
+        document.getElementById("hero-area").classList.toggle("hide");
+      }
+    }
+  }
+  if (document.getElementById("content-section") != null) {
+    document.getElementById("content-section").classList.toggle("hide");
+  }
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+  // bind click event to #sidebar-toggler in navbar-2.html
+  const $toggle = document.getElementById('sidebar-toggler');
+  if ($toggle) $toggle.addEventListener('click', toggleSidebar);
+});
+