app/model/Navigation: Rework Navigator

Streamline mobile view
Dry some redundant elements

3 files changed, 53 insertions, 14 deletions

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>