app/views/partials/navigator: Unify

9 files changed, 161 insertions, 176 deletions

diff --git a/app/views/components/context-menu.php b/app/views/components/context-menu.php
deleted file mode 100644
index 882bb60..0000000
--- a/app/views/components/context-menu.php
+++ /dev/null
@@ -1,25 +0,0 @@
-<div class="dropdown <?php echo $type ?? null ?>">
-  <input
-    class="is-hidden dropdown-input"
-    type="checkbox"
-    id="dropdown-menu__<?php echo $id ?? null ?>"
-  />
-
-  <label class="dropdown-label" for="dropdown-menu__<?php echo $id ?? null ?>">
-    <?php echo $label ?? null ?>
-  </label>
-
-  <div class="dropdown-menu">
-    <div class="dropdown-content">
-       <?php
-        echo $content ?? null;
-        if ($links ?? null  === true) {
-            include views('partials', 'navigator.links');
-            $formClass = 'theme-toggle';
-            $buttonClass ='theme-toggle-button button is-text has-text-left is-block';
-            include views('components', 'theme-toggle');
-        }
-        ?>
-    </div>
-  </div>
-</div>
diff --git a/app/views/components/context.menu.php b/app/views/components/context.menu.php
new file mode 100644
index 0000000..59f6610
--- /dev/null
+++ b/app/views/components/context.menu.php
@@ -0,0 +1,38 @@
+<div class="dropdown <?php echo $type ?? null ?>">
+  <input
+    class="is-hidden dropdown-input"
+    type="checkbox"
+    id="dropdown-menu__<?php echo $id ?? null ?>"
+  />
+
+  <label class="dropdown-label" for="dropdown-menu__<?php echo $id ?? 'none' ?>">
+    <?php echo $label ?? null ?>
+  </label>
+
+  <div class="dropdown-menu">
+    <div class="dropdown-content">
+     <?php
+
+        echo $content ?? null;
+
+        if ($links ?? null  === true) {
+
+          $route = '/';                             $label = 'Home';       include views('components', 'navigator.link.dropdown');
+          $route = '/posts/';                       $label = 'Posts';      include views('components', 'navigator.link.dropdown');
+          $route = '/projects/';                    $label = 'Projects';   include views('components', 'navigator.link.dropdown');
+          $route = '/about/';                       $label = 'Profile';    include views('components', 'navigator.link.dropdown');
+          $route = '/contact/';                     $label = 'Contact';    include views('components', 'navigator.link.dropdown');
+          $route = '/git/';                         $label = 'Repository'; include views('components', 'navigator.link.dropdown');
+          $route = 'https://ko-fi.com/thedroneely'; $label = 'Coffee';     include views('components', 'navigator.link.dropdown');
+
+          $formClass = 'theme-toggle';
+          $iconClass = 'is-hidden';
+          $buttonClass ='navbar-item button theme-toggle-button is-text has-text-left';
+          include views('components', 'theme.toggle');
+        }
+        ?>
+    </div>
+  </div>
+</div>
+
+<?php $type = $id = $label = $content = $links = null; ?>
diff --git a/app/views/components/navigator.link.dropdown.php b/app/views/components/navigator.link.dropdown.php
new file mode 100644
index 0000000..be937f8
--- /dev/null
+++ b/app/views/components/navigator.link.dropdown.php
@@ -0,0 +1,13 @@
+<a href="<?php echo $route ?? null; ?>"
+   class="
+    <?php
+    echo $check = ($label === 'Home')
+      ? ($navigation->isActiveHome() ? ' navbar__active' : '')
+      : ($navigation->isActive($route ?? null) ? ' navbar__active' : '');
+    ?> navbar-item"
+   title="<?php echo $label ?? null; ?>"
+>
+  <?php echo $label ?? null; ?>
+</a>
+
+<?php $route = $label = null; ?>
diff --git a/app/views/components/navigator.link.php b/app/views/components/navigator.link.php
new file mode 100644
index 0000000..a129acf
--- /dev/null
+++ b/app/views/components/navigator.link.php
@@ -0,0 +1,18 @@
+<a href="<?php echo $route ?? null; ?>" class="navbar-item navbar__icon has-text-centered
+  <?php
+
+    $hiddenLabels = [ 'Profile' ];
+    if (in_array($label, $hiddenLabels)) { echo ' navbar__icon__hidden'; }
+
+    echo $check = ($label === 'Home')
+      ? ($navigation->isActiveHome() ? ' navbar__active' : '')
+      : ($navigation->isActive($route ?? null) ? ' navbar__active' : '');
+  ?>
+">
+  <div class="has-text-centered">
+    <?php echo icon($icon ?? null); ?>
+    <p title="<?php echo $label ?? null; ?>" class="navbar__icon__label"><?php echo $label ?? null; ?></p>
+  </div>
+</a>
+
+<?php $route = $label = $icon = null; ?>
diff --git a/app/views/components/theme-toggle.php b/app/views/components/theme.toggle.php
index cfaf193..3b2d15b 100644
--- a/app/views/components/theme-toggle.php
+++ b/app/views/components/theme.toggle.php
@@ -12,7 +12,7 @@
     type="submit"
     value="light"
   >
-    <?php echo icon('sun', 'is-hidden-mobile'); ?>
+    <?php echo icon('sun', $iconClass ?? null); ?>
     <span>Light</span>
   </button>
 
@@ -25,9 +25,11 @@
     type="submit"
     value="dark"
   >
-    <?php echo icon('moon', 'is-hidden-mobile'); ?>
+    <?php echo icon('moon', $iconClass ?? null); ?>
     <span>Dark</span>
   </button>
 
   <?php } ?>
 </form>
+
+<?php $formClass = $buttonClass = $iconClass = null; ?>
diff --git a/app/views/partials/navigator.links.php b/app/views/partials/navigator.links.php
deleted file mode 100644
index b207446..0000000
--- a/app/views/partials/navigator.links.php
+++ /dev/null
@@ -1,19 +0,0 @@
-<a href="/" class="<?php echo $check = $navigation->isActiveHome() ? 'navbar__active' : ''; ?> navbar-item navbar__item">
-  Home
-</a>
-
-<a href="/posts/" class="<?php echo $check = $navigation->isActive('posts') ? 'navbar__active' : ''; ?> navbar-item navbar__item">
-  Posts
-</a>
-
-<a href="/projects/" class="<?php echo $check = $navigation->isActive('projects') ? 'navbar__active' : ''; ?> navbar-item navbar__item">
-  Projects
-</a>
-
-<a href="/about/" class="<?php echo $check = $navigation->isActive('about') ? 'navbar__active' : ''; ?> navbar-item navbar__item">
-  Profile
-</a>
-
-<a href="/contact/" class="<?php echo $check = $navigation->isActive('contact') ? 'navbar__active' : ''; ?> navbar-item navbar__item">
-  Contact
-</a>
diff --git a/app/views/partials/navigator.php b/app/views/partials/navigator.php
index 4c5b765..67cf609 100644
--- a/app/views/partials/navigator.php
+++ b/app/views/partials/navigator.php
@@ -1,97 +1,59 @@
+<nav id="navbar" class="navbar is-fixed-top" aria-label="main navigation">
+    <div class="container">
+        <div class="navbar-menu">
+            <div class="columns is-centered">
+
+                <div class="navbar__left column">
+                    <a title="Go to Website Repository"
+                    href="/git/"
+                    class="navbar-item item__box button is-inline-flex">
+                    <?php echo icon('git-commit'); ?>
+                    <span>Repo</span>
+                    </a>
 
-    <nav id="navbar" class="navbar is-fixed-top" aria-label="main navigation">
-
-        <div class="container">
-
-            <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 echo icon('user'); ?>
-                    <p class="is-size-7 navbar__icon__align">Home</p>
-                    </div>
-                </a>
-
-                <a href="/posts/" class="navbar-item navbar__icon
-                <?php echo $check = $navigation->isActive('posts') ? 'navbar__active' : ''; ?>">
-                    <div class="has-text-centered">
-                    <?php echo icon('book-open'); ?>
-                    <p class="is-size-7 navbar__icon__align">Posts</p>
-                    </div>
-                </a>
-
-                <a href="/projects/" class="navbar-item navbar__icon
-                <?php echo $check = $navigation->isActive('projects') ? 'navbar__active' : ''; ?>">
-                    <div class="has-text-centered">
-                    <?php echo icon('briefcase'); ?>
-                    <p class="is-size-7 navbar__icon__align">Projects</p>
-                    </div>
-                </a>
+                    <?php
+                      $formClass = 'is-inline';
+                      $buttonClass ='navbar-item button item__box';
+                      require views('components', 'theme.toggle');
+                    ?>
+                </div>
 
-                <a href="/contact/" class="navbar-item navbar__icon
-                <?php echo $check = $navigation->isActive('contact') ? 'navbar__active' : ''; ?>">
-                    <div class="has-text-centered">
-                    <?php echo icon('mail'); ?>
-                    <p class="is-size-7 navbar__icon__align">Contact</p>
-                    </div>
-                </a>
+                <div class="navbar__middle column is-7">
+                  <?php
+                    $route = '/';          $label = 'Home';     $icon = 'home';      require views('components', 'navigator.link');
+                    $route = '/posts/';    $label = 'Posts';    $icon = 'feather';   require views('components', 'navigator.link');
+                    $route = '/projects/'; $label = 'Projects'; $icon = 'package';   require views('components', 'navigator.link');
+                    $route = '/about/';    $label = 'Profile';  $icon = 'file-text'; require views('components', 'navigator.link');
+                    $route = '/contact/';  $label = 'Contact';  $icon = 'mail';      require views('components', 'navigator.link');
+                  ?>
 
-                <div class="navbar-burger navbar-item navbar__icon has-text-dark has-tap-transparent">
+                  <div class="navbar-item navbar__icon has-text-dark has-tap-transparent">
                     <?php
+                      $links = true;
                       $id = 'mobile-compact';
                       $type = 'is-menu is-right';
-                      $icon = icon('menu');
+                      $icon = icon('arrow-down-circle');
                       $label = <<<insert
-                      <span class="is-block has-text-centered">
-                        $icon
-                        <span class="is-block is-size-7 navbar__icon__align">Menu</span>
-                      </span>
+                        <span class="is-block has-text-centered">
+                          $icon
+                          <span class="is-block navbar__icon__label">More</span>
+                        </span>
                       insert;
-                      $links = true;
-                      require views('components', 'context-menu');
+                      require views('components', 'context.menu');
                     ?>
+                  </div>
                 </div>
 
-            </div>
-
-
-            <div class="navbar-menu">
-
-                <div class="columns is-centered has-margin-bottom-none">
-
-                    <div class="navbar__left column">
-                        <a title="Go to Website Repository"
-                        href="/git/"
-                        class="navbar-item item__box button is-inline-flex">
-                        <?php echo icon('git-commit'); ?>
-                        <span>Repo</span>
-                        </a>
-
-                        <?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 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 has-margin-right-none">
-                        <?php echo icon('coffee'); ?>
-                        <span>Coffee</span>
-                        </a>
-                    </div>
-
+                 <div class="navbar__right column">
+                    <a title="Coffee"
+                    href ="https://ko-fi.com/thedroneely"
+                    class="navbar-item item__box button is-inline-flex has-margin-left-none">
+                    <?php echo icon('coffee'); ?>
+                    <span>Coffee</span>
+                    </a>
                 </div>
 
             </div>
-
         </div>
-    </nav>
+    </div>
+</nav>
diff --git a/public/css/tdro-dark.css b/public/css/tdro-dark.css
index 872056a..55d203f 100644
--- a/public/css/tdro-dark.css
+++ b/public/css/tdro-dark.css
@@ -10,7 +10,7 @@ body, .sans-serif a, .serif a, .document h2 a, .document h3 a, nav#TableOfConten
 .article__list li:hover, nav#TableOfContents li:hover { background-color: #002e42; }
 .leftnote, .rightnote, mark { color: #a9bdd0; }
 .medium-zoom-overlay { background-color: #001f2c; background-color: rgba(0, 31, 44, .9); }
-.navbar-item, .subtitle, .has-text-grey-dark { color: #ddd !important; }
+.navbar-item, .subtitle, .has-text-grey-dark { color: #ccc !important; }
 .navbar-mobile .navbar__active, .navbar-end .navbar__active { color: #75b2f0 !important; }
 .dropdown-content { background-color: #002e42; border: 1px solid #00405c; }
 .dropdown-content a.navbar-item:hover, .dropdown-content .theme-toggle-button:hover { background-color: #4698EA; color: #fff !important; }
@@ -20,6 +20,8 @@ body, .sans-serif a, .serif a, .document h2 a, .document h3 a, nav#TableOfConten
 .footer { padding: 1.5rem; }
 .navbar { box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.5); }
 .navbar, .navbar-menu { background-color: #002e42; background-color: rgba(0, 46, 66, 0.95); }
+a.navbar-item:focus, a.navbar-item:hover, .navbar-item:hover label { color: #fff; }
+.navbar__icon:hover svg, .navbar__icon:hover svg, .navbar__icon:hover label svg { fill: #0073ca; }
 .title, .content h1, .content h2, .content h3 { color: #ddd; }
 .button.is-link.is-outlined, .button.is-success.is-outlined { border-color: #cad6e2; color: #cad6e2; border-width: 1px; }
 .input, .textarea { background-color: #002e42; border-color: transparent; color: white; }
@@ -31,8 +33,7 @@ body, .sans-serif a, .serif a, .document h2 a, .document h3 a, nav#TableOfConten
 .pagination-previous:hover,
 .pagination-next:hover, .pagination-link:hover, .pagination-previous.disabled, .pagination-next.disabled { color: #cad6e2; }
 .pagination-previous.disabled, .pagination-next.disabled { background-color: #002e42; border-color: #002e42; color: #fff; }
-@media screen and (min-width: 1088px) { .navbar__active { border-bottom: 2px solid #75b2f0 !important; color: white !important; } }
-@media screen and (min-width: 1088px) { a.navbar-item:hover { border-bottom: 2px solid #75b2f0; } }
+@media screen and (min-width: 1088px) { .navbar__active { color: #fff !important; } }
 @media screen and (max-width: 1087px) { .theme-toggle-button { color: #cad6e2; } }
 #isso-thread > h4 { color: #b7c7d7; }
 #isso-thread .textarea.placeholder { color: #cad6e2; }
diff --git a/public/css/tdro.css b/public/css/tdro.css
index 8e6fa33..e0b7234 100644
--- a/public/css/tdro.css
+++ b/public/css/tdro.css
@@ -1994,15 +1994,6 @@ body.has-navbar-fixed-bottom {
   display: none;
 }
 
-.navbar-item,
-.navbar-link {
-  color: #4a4a4a;
-  display: block;
-  line-height: 1.5;
-  padding: 0.5rem 0.75rem;
-  position: relative;
-}
-
 .navbar-item .icon:only-child,
 .navbar-link .icon:only-child {
   margin-left: -0.25rem;
@@ -2014,14 +2005,6 @@ a.navbar-item,
   cursor: pointer;
 }
 
-a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-item.is-active,
-.navbar-link:focus,
-.navbar-link:focus-within,
-.navbar-link:hover,
-.navbar-link.is-active {
-  color: #000000;
-}
-
 .navbar-item {
   display: block;
   flex-grow: 0;
@@ -3872,17 +3855,26 @@ blockquote > p.serif { font-size: 1.2rem !important; }
  * Navigation Bar Reset
  */
 
+a.navbar-item:focus, a.navbar-item:hover, .navbar-item:hover label { color: #000000; }
+.navbar__icon:hover svg, .navbar__icon:hover svg, .navbar__icon:hover label svg { fill: #ffdc9b; }
+
+.navbar-item {
+  display: block;
+  line-height: 1.25;
+  padding: 0.5rem 0.75rem;
+  position: relative;
+}
+
 .navbar { -webkit-transition: top 0.15s; -o-transition: top 0.15s; transition: top 0.15s; }
 .headroom { top: -5em !important; }
-.navbar-item { color: #555; margin: 0.86rem 0.8rem; }
+.navbar-item { color: #555; }
 .navbar { box-shadow: 0 4px 12px 0 rgba(0,0,0,.05); background-color: #fcfcfc;  background-color: rgba(252, 252, 252, .97); min-height: 4rem; }
-.navbar-item, .navbar-link { padding: 0.25rem 0.2rem; display: inline-flex; }
 .navbar, .navbar-menu { background-color: #fcfcfc; background-color: rgba(252, 252, 252, .97); }
 .navbar-menu { display: flex; overflow: visible !important; box-shadow: none; }
 .navbar-menu .columns { margin: 0 auto; display: flex; }
 .navbar-menu .column { padding: 0; }
 html.has-navbar-fixed-top, body.has-navbar-fixed-top, html.has-navbar-fixed-bottom, body.has-navbar-fixed-bottom { padding-top: 4rem; }
-.navbar .container, .navbar__left, .navbar__middle, .navbar__right { min-height: 4rem; }
+.navbar .container, .navbar__left, .navbar__middle, .navbar__right { min-height: 4rem; align-items: center; }
 .navbar__tablet__compact .navbar__active { border-bottom: 2px solid #75b2f0; }
 
 @media screen and (max-width: 1087px) {
@@ -3891,31 +3883,35 @@ html.has-navbar-fixed-top, body.has-navbar-fixed-top, html.has-navbar-fixed-bott
 }
 
 @media screen and (min-width: 1088px) { .navbar-menu, .navbar-item { display: inline-block; } }
-
-@media screen and (min-width: 525px) {
-  .navbar__active { border-bottom: 2px solid dodgerblue !important; }
-  a.navbar-item { border-bottom: 2px solid transparent; }
-  a.navbar-item:hover { border-bottom: 2px solid dodgerblue; }
-}
-
 @media screen and (max-width: 400px) { .is-mobile { display: block !important; } .is-mobile .column { width: 100% !important; } }
 
-.navbar-mobile, .navbar-burger { display: none; }
-
-.navbar__left { display: inline-flex; justify-content: flex-start; }
-.navbar__right { display: inline-flex; justify-content: flex-end; }
+.navbar__left { display: inline-flex; justify-content: flex-end; }
+.navbar__right { display: inline-flex; justify-content: flex-start; }
 .navbar__middle { display: inline-flex; justify-content: center; }
 
-@media screen and (max-width: 524px) { .navbar-mobile { display: flex; } }
-@media screen and (max-width: 524px) { .navbar__middle { display: none; } }
 @media screen and (max-width: 900px) { .navbar__left, .navbar__right { display: none; } }
 
-.navbar__icon { justify-content: center; width: 20%; margin: 0; height: 4rem; }
-.navbar__icon__align { margin-top: -4px; margin-bottom: 3px; }
+.navbar__icon { display: flex; align-items: center; justify-content: center; padding: 0 1.5rem; height: 4rem; }
+.navbar__icon__label { font-size: 0.75rem; }
+.navbar__icon__label:after {
+  display: block;
+  content: attr(title);
+  font-weight: 700;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+@media screen and (max-width: 624px) {
+  .navbar-menu .columns { margin: 0; }
+  .navbar__icon { padding: 0; width: 20%; }
+  .navbar__icon__hidden { display: none; }
+}
+
 .navbar__active { color: #014cc6 !important; }
+.navbar__active .navbar__icon__label { font-weight: 700; }
 
 .navbar__icon__menu { margin: 0; justify-content: center; height: 100%; }
-.navbar__icon.navbar__active { font-weight: bold; }
 .navbar-burger .dropdown { width: 100%; }
 .navbar-burger .dropdown-label {
   height: 64px;
@@ -3926,8 +3922,8 @@ html.has-navbar-fixed-top, body.has-navbar-fixed-top, html.has-navbar-fixed-bott
 }
 
 .dropdown label { cursor: pointer; }
-.dropdown-content .navbar-item { margin: 0; padding: 0.65rem 1rem; }
-.dropdown-content .navbar__active { font-weight: bold; color: #014cc6; }
+.dropdown-content .navbar-item { margin: 0; padding: 0.65rem 1rem; width: 100%; }
+.dropdown-content .navbar__active { font-weight: 700; color: #014cc6; }
 .dropdown-content a.navbar-item:hover, .dropdown-content .theme-toggle-button:hover { background-color: #bbdbee; color: black; }
 .dropdown-input[type="checkbox"]:checked ~ .dropdown-menu { display: block; }
 
@@ -3939,9 +3935,11 @@ html.has-navbar-fixed-top, body.has-navbar-fixed-top, html.has-navbar-fixed-bott
 .item__no__hover:hover svg, .item__no__hover:focus svg { fill: transparent !important; }
 .item__box {
   height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-weight: 400;
-  margin-left: 0;
-  margin-right: 0.7rem;
+  margin: 0 0 0 0.7rem;
   padding: 0.25rem 1rem;
   background-color: #f2f2f2;
   border: 0 solid transparent !important;
@@ -4057,11 +4055,7 @@ figcaption { font-size: 0.9em; margin-top: 1.5em; }
  * Theme toggle
  */
 
-.theme-toggle-button { border-radius: 0; height: 100%; padding: 0 0.35em; width: 100%; font-weight: 400; }
-
-@media screen and (max-width: 1087px) {
-  .theme-toggle-button {  padding: 0.587em 1em; }
-}
+.theme-toggle-button { border-radius: 0; height: auto; border: none; justify-content: start; font-weight: 400; }
 
 
 /*
@@ -4071,6 +4065,7 @@ figcaption { font-size: 0.9em; margin-top: 1.5em; }
 .has-padding-none { padding: 0 !important; }
 .has-padding-left-md { padding-left: 0.5em !important; }
 .has-margin-none { margin: 0 !important; }
+.has-margin-left-none { margin-left: 0 !important}
 .has-margin-right-none { margin-right: 0 !important}
 .has-margin-bottom-none { margin-bottom: 0 !important; }
 .has-margin-bottom-sm { margin-bottom: 0.25em !important; }