views/partials/navigator: New navigator design

Tailwind CSS

1 files changed, 21 insertions, 62 deletions

diff --git a/views/partials/navigator.php b/views/partials/navigator.php
index f07d632..0d3e343 100644
--- a/views/partials/navigator.php
+++ b/views/partials/navigator.php
@@ -1,71 +1,30 @@
 
-            <?php if ($_SERVER['REQUEST_URI'] === '/') { ?>
-            <nav class="nav-transparent">
-            <?php } else { ?>
-            <nav class="nav-opaque">
-            <?php } ?>
+<hr class="bg-grey-light h-px my-6">
 
-            <div class="topnav topnav-left" id="navbar">
+<nav role="navigation">
+    <ul class="list-reset">
 
-                <div class="desktop__topnav">
-                    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/views/partials/navigator.links.php'; ?>
-                </div>
+        <li class="my-4 sm:inline sm:mr-4">
+            <a class="<?php echo $navigation->isActiveHome() ?? 'text-grey-darker' ?> hover:text-black no-underline font-bold tracking-wide uppercase text-xs pb-1" href="/" title="Home">Home</a>
+        </li>
 
-                <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>
+        <li class="my-4 sm:inline sm:mr-4">
+            <a class="<?php echo $navigation->isActive('/journal/') ?? 'text-grey-darker' ?> hover:text-black no-underline font-bold tracking-wide uppercase text-xs pb-1" href="/journal/" title="Journal">Journal</a>
+        </li>
 
-                    <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>
+        <li class="my-4 sm:inline sm:mr-4">
+            <a class="<?php echo $navigation->isActive('/wall/') ?? 'text-grey-darker' ?> hover:text-black no-underline font-bold tracking-wide uppercase text-xs pb-1" href="/wall/" title="Wall">Wall</a>
+        </li>
 
-                    <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>
+        <li class="my-4 sm:inline sm:mr-4">
+            <a class="<?php echo $navigation->isActive('/about/') ?? 'text-grey-darker' ?> hover:text-black no-underline font-bold tracking-wide uppercase text-xs pb-1" href="/about/" title="About">About</a>
+        </li>
 
-                    <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>
+        <li class="my-4 sm:inline sm:mr-4">
+            <a class="<?php echo $navigation->isActive('/contact/') ?? 'text-grey-darker' ?> hover:text-black no-underline font-bold tracking-wide uppercase text-xs pb-1" href="/contact/" title="Contact">Contact</a>
+        </li>
 
-                    <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>
+    </ul>
+</nav>
 
-                <div class="topnav topnav-right">
-
-                    <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>
-
-        </nav>
-
-        <?php if ($_SERVER['REQUEST_URI'] === '/') { ?>
-        <nav id="sidenavMenu" class="sidenav sidenav__landing">
-        <?php } else { ?>
-        <nav id="sidenavMenu" class="sidenav">
-        <?php } ?>
-
-            <br>
-
-            <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/views/partials/navigator.links.php'; ?>
-
-            <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>
-
-        </nav>
+<hr class="bg-grey-light h-px my-6">