app: Refactor and CSS rewrite

4 files changed, 38 insertions, 52 deletions

diff --git a/app/views/components/context.menu.php b/app/views/components/context.menu.php
index 1a3356a..75e1746 100644
--- a/app/views/components/context.menu.php
+++ b/app/views/components/context.menu.php
@@ -1,39 +1,29 @@
-<div class="dropdown <?php echo $type ?? null ?>">
-  <input
-    class="is-hidden dropdown-input"
-    type="checkbox"
-    id="dropdown-menu__<?php echo $id ?? null ?>"
-  />
+<context-menu-container>
+  <more-button>
+    <input hidden type="checkbox" id="context-menu-<?php echo $id ?? null ?>"/>
+    <label for="context-menu-<?php echo $id ?? 'none' ?>"><?php echo $label ?? null ?></label>
 
-  <label class="dropdown-label" for="dropdown-menu__<?php echo $id ?? 'none' ?>">
-    <?php echo $label ?? null ?>
-  </label>
+    <context-menu list right>
+      <context-menu-content>
+       <?php
+          echo $content ?? null;
 
-  <div class="dropdown-menu">
-    <div class="dropdown-content">
-     <?php
+          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 = '/abstracts/';                   $label = 'Abstracts';  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');
 
-        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 = '/abstracts/';                   $label = 'Abstracts';  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');
-        }
+            include views('components', 'theme.toggle');
+          }
         ?>
-    </div>
-  </div>
-</div>
+      </context-menu-content>
+    </context-menu>
+  </more-button>
+</context-menu-container>
 
-<?php $type = $id = $label = $content = $links = null; ?>
+<?php $id = $label = $content = $links = null; ?>
diff --git a/app/views/components/navigator.link.dropdown.php b/app/views/components/navigator.link.dropdown.php
index 0657bc6..e0ec008 100644
--- a/app/views/components/navigator.link.dropdown.php
+++ b/app/views/components/navigator.link.dropdown.php
@@ -1,6 +1,6 @@
 <a href="<?php echo $route ?? null; ?>"
-   class="<?php if ($navigation->isActive($route ?? null)) { echo ' navbar__active'; } ?> navbar-item"
    title="<?php echo $label ?? null; ?>"
+   <?php if ($navigation->isActive($route ?? null)) { echo ' data-active'; } ?>
 >
   <?php echo $label ?? null; ?>
 </a>
diff --git a/app/views/components/navigator.link.php b/app/views/components/navigator.link.php
index 3b57d62..f255903 100644
--- a/app/views/components/navigator.link.php
+++ b/app/views/components/navigator.link.php
@@ -1,14 +1,15 @@
-<a href="<?php echo $route ?? null; ?>" class="navbar-item navbar__icon has-text-centered
+<a
+  href="<?php echo $route ?? null; ?>"
   <?php
     $hiddenLabels = [ 'Profile' ];
-    if (in_array($label, $hiddenLabels)) { echo ' navbar__icon__hidden'; }
-    if ($navigation->isActive($route ?? null)) { echo ' navbar__active'; }
+    if (in_array($label, $hiddenLabels)) { echo ' data-hidden'; }
+    if ($navigation->isActive($route ?? null)) { echo ' data-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>
+>
+  <?php echo icon($icon ?? null); ?>
+  <span title="<?php echo $label ?? null; ?>">
+    <?php echo $label ?? null; ?>
+  </span>
 </a>
 
 <?php $route = $label = $icon = null; ?>
diff --git a/app/views/components/theme.toggle.php b/app/views/components/theme.toggle.php
index 3b2d15b..71e8841 100644
--- a/app/views/components/theme.toggle.php
+++ b/app/views/components/theme.toggle.php
@@ -1,5 +1,4 @@
 <form
-  class="<?php echo $formClass ?? null; ?>"
   method="get"
   action="<?php echo $_SERVER['REQUEST_URI']; ?>"
 >
@@ -7,29 +6,25 @@
 
   <button
     title="Switch to Light Theme"
-    class="<?php echo $buttonClass ?? null; ?>"
     name="theme"
     type="submit"
     value="light"
   >
-    <?php echo icon('sun', $iconClass ?? null); ?>
-    <span>Light</span>
+    <?php echo icon('moon'); ?>
+    <span>Dark</span>
   </button>
 
   <?php } else { ?>
 
   <button
     title="Switch to Dark Theme"
-    class="<?php echo $buttonClass ?? null; ?>"
     name="theme"
     type="submit"
     value="dark"
   >
-    <?php echo icon('moon', $iconClass ?? null); ?>
-    <span>Dark</span>
+    <?php echo icon('sun'); ?>
+    <span>Light</span>
   </button>
 
   <?php } ?>
 </form>
-
-<?php $formClass = $buttonClass = $iconClass = null; ?>