app/model/Navigation: Rework Navigator

Streamline mobile view
Dry some redundant elements

4 files changed, 71 insertions, 37 deletions

diff --git a/app/model/Navigation.php b/app/model/Navigation.php
index 1b5ba88..0e4542a 100644
--- a/app/model/Navigation.php
+++ b/app/model/Navigation.php
@@ -2,38 +2,33 @@
 
 class Navigation
 {
-    public function generateHomeButton()
+    public function requestContains($route)
     {
-        if ($_SERVER['REQUEST_URI'] === '/') {
-            echo '<a class="navbar__active navbar-item navbar__item" href="/">Home</a>';
-            return;
+        if (strpos($_SERVER['REQUEST_URI'], $route) !== false) {
+            return true;
         }
-        echo '<a class="navbar-item navbar__item" href="/">Home</a>';
+        return false;
     }
 
-    public function generateNavBar()
+     public function isActiveHome()
     {
-        $navbar = [
-        'Posts' => ['uri' => '/post/'],
-        'Projects' => ['uri' => '/project/'],
-        'Profile' => ['uri' => '/about/'],
-        'Contact' => ['uri' => '/contact/'],
-        ];
+        if ($_SERVER['REQUEST_URI'] === '/') {
+            return 'navbar__active ';
+        }
+        return;
+    }
 
-        foreach ($navbar as $title => $route) {
-            $append ='';
-            if ($route['uri'] === $_SERVER['REQUEST_URI']
-                || strpos($_SERVER['REQUEST_URI'], $route['uri']) !== false
-            ) {
-                $append = 'navbar__active';
-            }
-            echo str_repeat("\t", 4) .
-            "<a class=\"navbar-item navbar__item $append\"" .
-            ' href="' . $route['uri'] . '">' . $title . '</a>' . "\n";
+    public function isActive($route)
+    {
+        if ($_SERVER['REQUEST_URI'] === $route
+            || $this->requestContains($route)
+        ) {
+            return 'navbar__active ';
         }
+        return;
     }
 
-    public function generateTitle()
+    public function title()
     {
         switch ($_SERVER['REQUEST_URI']) {
         case '/contact/':
diff --git a/app/views/partials/navigator.home.php b/app/views/partials/navigator.home.php
new file mode 100644
index 0000000..1b1d99e
--- /dev/null
+++ b/app/views/partials/navigator.home.php
@@ -0,0 +1,2 @@
+
+<a href="/" class="<?php echo $navigation->isActiveHome() ?? '' ?>navbar-item navbar__item">Home</a>
diff --git a/app/views/partials/navigator.links.php b/app/views/partials/navigator.links.php
new file mode 100644
index 0000000..0979f2b
--- /dev/null
+++ b/app/views/partials/navigator.links.php
@@ -0,0 +1,5 @@
+
+<a href="/post/" class="<?php echo $navigation->isActive('/post/') ?? '' ?>navbar-item navbar__item">Posts</a>
+<a href="/project/" class="<?php echo $navigation->isActive('/project/') ?? '' ?>navbar-item navbar__item">Projects</a>
+<a href="/about/" class="<?php echo $navigation->isActive('/about/') ?? '' ?>navbar-item navbar__item">Profile</a>
+<a href="/contact/" class="<?php echo $navigation->isActive('/contact/') ?? '' ?>navbar-item navbar__item">Contact</a>
diff --git a/app/views/partials/navigator.php b/app/views/partials/navigator.php
index c544968..be5216b 100644
--- a/app/views/partials/navigator.php
+++ b/app/views/partials/navigator.php
@@ -1,20 +1,50 @@
     <nav id="navbar" class="navbar navbar__custom is-fixed-top" aria-label="main navigation">
         <div class="container">
 
-            <div class="navbar-brand">
+            <div class="navbar-brand navbar__mobile__compact">
 
-                <a href="/" class="has-text-white">
-                    <div class="navbar__mobile navbar__custom navbar-item">Home</div>
+                <a href="/" class="navbar-item navbar__icon <?php echo $navigation->isActiveHome() ?? 'has-text-gray' ?>">
+                    <div class="has-text-centered">
+                    <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/css/fonts/feather-icons/home.svg') ?>
+                    <p class="is-size-7 navbar__icon__align">Home</p>
+                    </div>
+                </a>
+
+                <a href="/post/" class="navbar-item navbar__icon <?php echo $navigation->isActive('/post/') ?? 'has-text-gray' ?>">
+                    <div class="has-text-centered">
+                    <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/css/fonts/feather-icons/book-open.svg') ?>
+                    <p class="is-size-7 navbar__icon__align">Posts</p>
+                    </div>
                 </a>
 
-                <a href="/project" class="has-text-white">
-                    <div class="navbar__mobile navbar__custom navbar-item">Projects</div>
+                <a href="/project/" class="navbar-item navbar__icon <?php echo $navigation->isActive('/project/') ?? 'has-text-gray' ?>">
+                    <div class="has-text-centered">
+                    <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/css/fonts/feather-icons/layers.svg') ?>
+                    <p class="is-size-7 navbar__icon__align">Projects</p>
+                    </div>
+                </a>
+
+                <a href="/about/" class="navbar-item navbar__icon <?php echo $navigation->isActive('/about/') ?? 'has-text-gray' ?>">
+                    <div class="has-text-centered">
+                    <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/css/fonts/feather-icons/user.svg') ?>
+                    <p class="is-size-7 navbar__icon__align">Profile</p>
+                    </div>
                 </a>
 
-                <a href="/contact" class="has-text-white">
-                    <div class="navbar__mobile navbar__custom navbar-item">Contact</div>
+                <a href="/contact/" class="navbar-item navbar__icon <?php echo $navigation->isActive('/contact/') ?? 'has-text-gray' ?>">
+                    <div class="has-text-centered">
+                    <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/css/fonts/feather-icons/mail.svg') ?>
+                    <p class="is-size-7 navbar__icon__align">Contact</p>
+                    </div>
                 </a>
 
+            </div>
+
+            <div class="navbar-brand navbar__tablet__compact">
+
+                <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/navigator.home.php'; ?>
+                <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/navigator.links.php'; ?>
+
                 <div id="navBurger" class="navbar-burger burger has-text-dark" data-target="navMenu">
                   <span></span>
                   <span></span>
@@ -23,25 +53,27 @@
 
             </div>
 
-            <div id="navMenu" class="navbar__mobile navbar-menu">
+            <div class="navbar-brand is-hidden-touch"></div>
+
+            <div id="navMenu" class="navbar-menu is-hidden-desktop">
 
                 <div class="navbar-end">
-                    <?php $navigation->generatehomeButton(); ?>
-                    <?php $navigation->generateNavBar(); ?>
+                    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/navigator.home.php'; ?>
+                    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/navigator.links.php'; ?>
                 </div>
 
-        </div>
+            </div>
 
-            <div class="navbar__desktop navbar-menu">
+            <div class="navbar-menu">
 
                 <div class="columns is-centered has-margin-bottom-none">
 
                     <div class="navbar__left column is-3">
-                        <?php $navigation->generatehomeButton(); ?>
+                        <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/navigator.home.php'; ?>
                     </div>
 
                     <div class="navbar__right column is-5">
-                        <?php $navigation->generateNavBar(); ?>
+                        <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/navigator.links.php'; ?>
                     </div>
 
                 </div>