views/partials/navigator: Rework Navigator to be more compact

1 files changed, 63 insertions, 9 deletions

diff --git a/assets/js/Navigator.js b/assets/js/Navigator.js
index 653b0ff..c910d60 100644
--- a/assets/js/Navigator.js
+++ b/assets/js/Navigator.js
@@ -1,11 +1,65 @@
-/* main navigator functions */
 
-window.openNav = function openNav() {
-    document.getElementById("side-navbar").style.width = "150px";
-    document.getElementById("main").style.marginLeft = "-150px";
-}
+/* toggle navigator side menu */
 
-window.closeNav = function closeNav() {
-    document.getElementById("side-navbar").style.width = "0";
-    document.getElementById("main").style.marginLeft = "0";
-}
+var sidenavMenu = document.getElementById('sidenavMenu');
+var sidenavBurger = document.getElementById('sidenavBurger');
+
+sidenavBurger.addEventListener('click', function(event) {
+  sidenavMenu.classList.toggle('sidenav-active');
+});
+
+
+/* close sidebar when clicked outside of its region */
+
+document.addEventListener('click', function(event) {
+  var sidenavClick = sidenavMenu.contains(event.target);
+  var sidenavMenuClick = sidenavBurger.contains(event.target);
+  if (!sidenavClick && !sidenavMenuClick && sidenavMenu.classList.contains('sidenav-active')) {
+    sidenavMenu.classList.toggle('sidenav-active');
+  }
+});
+
+/* overlay ids */
+
+var showFaq = document.getElementById('show-faq');
+var showDemo = document.getElementById('show-demo');
+var showProjects = document.getElementById('show-projects');
+
+var overlayFaq = document.getElementById('overlay-faq');
+var overlayDemo = document.getElementById('overlay-demo');
+var overlayProjects = document.getElementById('overlay-projects');
+
+var closeFaq = document.getElementById('close-faq');
+var closeDemo = document.getElementById('close-demo');
+var closeProjects = document.getElementById('close-projects');
+
+/* overlay function */
+
+function onClick (el, cl, target) { if (el !== null) { el.addEventListener("click", function(event) { target.classList.toggle(cl); }) } }
+
+
+/* hide navbar on overlay */
+
+var navbar = document.getElementById('navbar');
+
+onClick(showFaq, 'is-hidden', navbar);
+onClick(showDemo, 'is-hidden', navbar);
+onClick(showProjects, 'is-hidden', navbar);
+
+onClick(closeFaq, 'is-hidden', navbar);
+onClick(closeDemo, 'is-hidden', navbar);
+onClick(closeProjects, 'is-hidden', navbar);
+
+
+/* open overlay */
+
+onClick(showFaq, 'is-block', overlayFaq);
+onClick(showDemo, 'is-block', overlayDemo);
+onClick(showProjects, 'is-block', overlayProjects);
+
+
+/* close overlay */
+
+onClick(closeFaq, 'is-block', overlayFaq);
+onClick(closeDemo, 'is-block', overlayDemo);
+onClick(closeProjects, 'is-block', overlayProjects);