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

5 files changed, 140 insertions, 62 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);
diff --git a/model/Navigator.php b/model/Navigator.php
index 199d3c1..10ba623 100644
--- a/model/Navigator.php
+++ b/model/Navigator.php
@@ -1,34 +1,30 @@
 <?php
 
-function navBar()
+class Navigator
 {
-    $navbar = [
-        'Home' => ['uri' => '/'],
-        'Posts' => ['uri' => '/posts/'],
-        'Feedback' => ['uri' => '/feedback/'],
-        'Contact' => ['uri' => '/contact/'],
-    ];
-
-    foreach ($navbar as $title => $route) {
-        $append ='';
+    public function requestContains($route)
+    {
+        if (strpos($_SERVER['REQUEST_URI'], $route) !== false) {
+            return true;
+        }
+        return false;
+    }
 
-        if ($_SERVER['REQUEST_URI'] === '/'
-            && $_SERVER['REQUEST_URI'] === $route['uri']
-        ) {
-            $append = 'active';
+    public function isActiveHome()
+    {
+        if ($_SERVER['REQUEST_URI'] === '/') {
+            return 'active ';
         }
+        return;
+    }
 
-        if (!empty(trim($route['uri'], '/'))
-            && strpos(
-                trim($_SERVER['REQUEST_URI'], '/'),
-                trim($route['uri'], '/')
-            ) !== false
+    public function isActive($route)
+    {
+        if ($_SERVER['REQUEST_URI'] === $route
+            || $this->requestContains($route)
         ) {
-            $append = 'active';
-        };
-
-        echo str_repeat("\t", 4) . '<a class="' . $append . '" '
-        . 'href="' . $route['uri'] . '" ' . 'onclick="closeNav()"'
-        . '>' . $title . '</a>' . "\n";
+            return 'active ';
+        }
+        return;
     }
 }
diff --git a/views/partials/navigator.links.php b/views/partials/navigator.links.php
new file mode 100644
index 0000000..f023e32
--- /dev/null
+++ b/views/partials/navigator.links.php
@@ -0,0 +1,5 @@
+
+<a class="<?php echo $navigator->isActiveHome() ?? '' ?>" href="/" onclick="closeNav()">Home</a>
+<a class="<?php echo $navigator->isActive('/posts/') ?? '' ?>" href="/posts/" onclick="closeNav()">Posts</a>
+<a class="<?php echo $navigator->isActive('/feedback/') ?? '' ?>" href="/feedback/" onclick="closeNav()">Feedback</a>
+<a class="<?php echo $navigator->isActive('/contact/') ?? '' ?>" href="/contact/" onclick="closeNav()">Contact</a>
diff --git a/views/partials/navigator.php b/views/partials/navigator.php
index 2ec5fbb..f07d632 100644
--- a/views/partials/navigator.php
+++ b/views/partials/navigator.php
@@ -1,47 +1,71 @@
-<?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/model/Navigator.php'; ?>
 
             <?php if ($_SERVER['REQUEST_URI'] === '/') { ?>
             <nav class="nav-transparent">
             <?php } else { ?>
-            <nav>
+            <nav class="nav-opaque">
             <?php } ?>
 
             <div class="topnav topnav-left" id="navbar">
 
-                <?php navBar() ?>
+                <div class="desktop__topnav">
+                    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/views/partials/navigator.links.php'; ?>
+                </div>
+
+                <div class="mobile__topnav">
+                    <a class="<?php echo $navigator->isActiveHome() ?? '' ?>mobile__menu__item" href="/">
+                        <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/fonts/ionicons/ios-home.svg') ?>
+                        <p>Home</p>
+                    </a>
+
+                    <a class="<?php echo $navigator->isActive('/posts/') ?? '' ?>mobile__menu__item" href="/posts/">
+                        <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/fonts/ionicons/ios-journal.svg') ?>
+                        <p>Posts</p>
+                    </a>
+
+                    <a class="<?php echo $navigator->isActive('/feedback/') ?? '' ?>mobile__menu__item" href="/feedback/">
+                        <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/fonts/ionicons/ios-megaphone.svg') ?>
+                        <p>Feedback</p>
+                    </a>
+
+                    <a class="<?php echo $navigator->isActive('/contact/') ?? '' ?>mobile__menu__item" href="/contact/">
+                        <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/fonts/ionicons/md-mail.svg') ?>
+                        <p>Contact</p>
+                    </a>
+
+                    <a id="sidenavBurger" class="mobile__menu__item">
+                        <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/fonts/ionicons/md-menu.svg') ?>
+                        <p>Menu</p>
+                    </a>
+                </div>
 
-                <div class="topnav topnav-right" id="navbar">
+                <div class="topnav topnav-right">
 
-                    <span href="javascript:void(0)" class="navicon" onclick="openNav()">&#9776;</span>
-                    <a href="https://admin.gear.mycelium.com/gateways/2031/orders/new" target="blank" rel="noopener noreferrer"><i class="fa fa-bitcoin"></i></a>
-                    <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=PCZWCVXR9DJTW" target="blank" rel="noopener noreferrer"><i class="fa fa-paypal"></i></a>
-                    <a href="https://soundcloud.com/user-825887030" target="blank" rel="noopener noreferrer"><i class="fa fa-soundcloud"></i></a>
-                    <a href="https://www.youtube.com/c/EdwinMattiacci" target="blank" rel="noopener noreferrer"><i class="fa fa-youtube-play"></i></a>
-                    <a href="mailto:edwinmattiacci@yahoo.com"><i class="fa fa-envelope-o"></i></a>
+                    <a aria-label="Mycelium" href="https://admin.gear.mycelium.com/gateways/2031/orders/new" rel="noopener noreferrer"><i class="fa fa-bitcoin"></i></a>
+                    <a aria-label="Paypal" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=PCZWCVXR9DJTW" rel="noopener noreferrer"><i class="fa fa-paypal"></i></a>
+                    <a aria-label="Soundcloud" href="https://soundcloud.com/user-825887030" rel="noopener noreferrer"><i class="fa fa-soundcloud"></i></a>
+                    <a aria-label="YouTube" href="https://www.youtube.com/c/EdwinMattiacci" rel="noopener noreferrer"><i class="fa fa-youtube-play"></i></a>
+                    <a aria-label="Email" href="mailto:edwinmattiacci@yahoo.com"><i class="fa fa-envelope-o"></i></a>
 
                 </div>
 
             </div>
 
-            <?php if ($_SERVER['REQUEST_URI'] === '/') { ?>
-            <div id="side-navbar" class="sidenav sidenav__landing">
-            <?php } else { ?>
-            <div id="side-navbar" class="sidenav">
-            <?php } ?>
+        </nav>
 
-                <a href="javascript:void(0)" class="navicon" onclick="closeNav()">&#9776;</a>
+        <?php if ($_SERVER['REQUEST_URI'] === '/') { ?>
+        <nav id="sidenavMenu" class="sidenav sidenav__landing">
+        <?php } else { ?>
+        <nav id="sidenavMenu" class="sidenav">
+        <?php } ?>
 
-                    <div class="sidenav__container">
-                        <?php navBar() ?>
-                    </div>
+            <br>
 
-                <br>
+            <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/views/partials/navigator.links.php'; ?>
 
-                <a href="mailto:edwinmattiacci@yahoo.com"><i class="fa fa-envelope-o"></i></a>
-                <a href="https://www.youtube.com/c/EdwinMattiacci" target="blank" rel="noopener noreferrer"><i class="fa fa-youtube-play"></i></a>
-                <a href="https://soundcloud.com/user-825887030" target="blank" rel="noopener noreferrer"><i class="fa fa-soundcloud"></i></a>
-                <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=PCZWCVXR9DJTW" target="blank" rel="noopener noreferrer"><i class="fa fa-paypal"></i></a>
-                <a href="https://admin.gear.mycelium.com/gateways/2031/orders/new" target="blank" rel="noopener noreferrer"><i class="fa fa-bitcoin"></i></a>
+            <a aria-label="Mycelium" href="mailto:edwinmattiacci@yahoo.com"><i class="fa fa-envelope-o"></i></a>
+            <a aria-label="Paypal" href="https://www.youtube.com/c/EdwinMattiacci" rel="noopener noreferrer"><i class="fa fa-youtube-play"></i></a>
+            <a aria-label="Soundcloud" href="https://soundcloud.com/user-825887030" rel="noopener noreferrer"><i class="fa fa-soundcloud"></i></a>
+            <a aria-label="YouTube" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=PCZWCVXR9DJTW" rel="noopener noreferrer"><i class="fa fa-paypal"></i></a>
+            <a aria-label="Email" href="https://admin.gear.mycelium.com/gateways/2031/orders/new" rel="noopener noreferrer"><i class="fa fa-bitcoin"></i></a>
 
-            </div>
         </nav>
diff --git a/webpack.config.js b/webpack.config.js
index 2d7d367..2b496c6 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -73,7 +73,7 @@ module.exports = {
         
         purifyOptions: {
           whitelist: [ 'active', '*hashover*', '*graphic*', '*sm2*', '*select*',
-          '*error*', '*paragraph*', '*sidenav*', '*ion*' ]
+          '*error*', '*paragraph*', '*sidenav*', '*ion*', 'is-block', 'is-hidden' ]
         },
 
         paths: glob.sync([
@@ -85,4 +85,3 @@ module.exports = {
         })
     ]
 };
-