app/views/partials/navigator: Rework navigator using components

1 files changed, 28 insertions, 91 deletions

diff --git a/app/views/partials/navigator.php b/app/views/partials/navigator.php
index 2100f09..3305834 100644
--- a/app/views/partials/navigator.php
+++ b/app/views/partials/navigator.php
@@ -3,12 +3,12 @@
 
         <div class="container">
 
-            <div class="navbar-brand navbar__mobile__compact">
+            <div class="navbar-brand navbar-mobile">
 
                 <a href="/" class="navbar-item navbar__icon
                 <?php echo $check = $navigation->isActiveHome() ? 'navbar__active' : ''; ?>">
                     <div class="has-text-centered">
-                    <?php featherIcon('user'); ?>
+                    <?php echo featherIcon('user'); ?>
                     <p class="is-size-7 navbar__icon__align">Home</p>
                     </div>
                 </a>
@@ -16,7 +16,7 @@
                 <a href="/posts/" class="navbar-item navbar__icon
                 <?php echo $check = $navigation->isActive('posts') ? 'navbar__active' : ''; ?>">
                     <div class="has-text-centered">
-                    <?php featherIcon('book-open'); ?>
+                    <?php echo featherIcon('book-open'); ?>
                     <p class="is-size-7 navbar__icon__align">Posts</p>
                     </div>
                 </a>
@@ -24,7 +24,7 @@
                 <a href="/projects/" class="navbar-item navbar__icon
                 <?php echo $check = $navigation->isActive('projects') ? 'navbar__active' : ''; ?>">
                     <div class="has-text-centered">
-                    <?php featherIcon('briefcase'); ?>
+                    <?php echo featherIcon('briefcase'); ?>
                     <p class="is-size-7 navbar__icon__align">Projects</p>
                     </div>
                 </a>
@@ -32,37 +32,25 @@
                 <a href="/contact/" class="navbar-item navbar__icon
                 <?php echo $check = $navigation->isActive('contact') ? 'navbar__active' : ''; ?>">
                     <div class="has-text-centered">
-                    <?php featherIcon('mail'); ?>
+                    <?php echo featherIcon('mail'); ?>
                     <p class="is-size-7 navbar__icon__align">Contact</p>
                     </div>
                 </a>
 
-                <div id="navBurgerCompact"
-                class="navbar-burger burger navbar__icon has-text-dark"
-                data-target="navMenu">
-                <a href="javascript:void(0)" class="navbar-item navbar__icon__menu">
-                    <div class="has-text-centered">
-                    <?php featherIcon('menu'); ?>
-                    <p class="is-size-7 navbar__icon__align">Menu</p>
-                    </div>
-                </a>
-                </div>
-
-            </div>
-
-            <div class="navbar-brand navbar__tablet__compact">
-
-                <?php require $_SERVER['DOCUMENT_ROOT']
-                . '/..' . '/app/views/partials/navigator.links.php'; ?>
-
-                <div id="navBurger"
-                class="navbar-burger burger has-text-dark" data-target="navMenu">
-                <a href="javascript:void(0)" class="navbar-item navbar__icon__menu">
-                    <div class="has-text-centered">
-                    <?php featherIcon('menu'); ?>
-                    <p class="is-size-7 navbar__icon__align">Menu</p>
-                    </div>
-                </a>
+                <div class="navbar-burger navbar-item navbar__icon has-text-dark">
+                    <?php
+                      $id = 'mobile-compact';
+                      $type = 'is-cover is-right';
+                      $icon = feathericon('menu');
+                      $label = <<<insert
+                      <span class="is-block has-text-centered">
+                        $icon
+                        <span class="is-block is-size-7 navbar__icon__align">Menu</span>
+                      </span>
+                      insert;
+                      $links = true;
+                      require views('components', 'context-menu');
+                    ?>
                 </div>
 
             </div>
@@ -76,46 +64,27 @@
                         <a title="Go to Website Repository"
                         href="https://www.thedroneely.com/git/explore/repos"
                         class="navbar-item item__box button is-inline-flex">
-                        <?php featherIcon('git-commit'); ?>
+                        <?php echo featherIcon('git-commit'); ?>
                         <span>Repo</span>
                         </a>
 
-                        <form class="is-inline" method="get"
-                        action="<?php echo $_SERVER['REQUEST_URI']; ?>">
-
-                                <?php if ($theme->color() === 'dark') { ?>
-
-                                <button title="Switch to Light Theme"
-                                class="navbar-item button item__box is-inline-flex"
-                                name="theme" type="submit" value="light">
-
-                                <?php featherIcon('sun'); ?>
-
-                                <?php } else { ?>
-
-                                <button title="Switch to Dark Theme"
-                                class="navbar-item button item__box is-inline-flex"
-                                name="theme" type="submit" value="dark">
-
-                                <?php featherIcon('moon'); ?>
-
-                                <?php } ?>
-
-                            </button>
-                        </form>
+                        <?php
+                          $formClass = 'is-inline';
+                          $buttonClass ='navbar-item button item__box is-inline-flex';
+                          require views('components', 'theme-toggle');
+                        ?>
 
                     </div>
 
                     <div class="navbar__middle column is-7">
-                        <?php require $_SERVER['DOCUMENT_ROOT']
-                        . '/..' . '/app/views/partials/navigator.links.php'; ?>
+                        <?php require views('partials', 'navigator.links'); ?>
                     </div>
 
                      <div class="navbar__right column">
                         <a title="Coffee"
                         href ="https://ko-fi.com/thedroneely"
-                        class="navbar-item item__box button is-inline-flex">
-                        <?php featherIcon('coffee'); ?>
+                        class="navbar-item item__box button is-inline-flex has-margin-right-none">
+                        <?php echo featherIcon('coffee'); ?>
                         <span>Coffee</span>
                         </a>
                     </div>
@@ -126,35 +95,3 @@
 
         </div>
     </nav>
-
-    <nav id="navMenu" class="navbar-menu is-hidden-desktop">
-        <div id="navMenuContainer" class="navbar-end">
-
-            <?php require $_SERVER['DOCUMENT_ROOT']
-            . '/..' . '/app/views/partials/navigator.links.php'; ?>
-
-            <div class ="theme-toggle">
-                <form method="get" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
-
-                    <?php if ($theme->color() === 'dark') { ?>
-
-                    <button class="theme-toggle-button button is-text has-text-left is-block"
-                    name="theme" type="submit" value="light">
-
-                        <span class="theme-toggle-moon">Light</span>
-
-                    <?php } else { ?>
-
-                    <button class="theme-toggle-button button is-text has-text-left is-block"
-                    name="theme" type="submit" value="dark">
-
-                        <span class="theme-toggle-moon">Dark</span>
-
-                    <?php } ?>
-
-                    </button>
-                </form>
-            </div>
-
-        </div>
-    </nav>