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

2 files changed, 55 insertions, 26 deletions

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>