Site Updates: Navigation

Time has granted a small reprieve to work on the greatest pain point of my personal website — the navigation bar. Due to sheer laziness, the navigation bar was initially implemented as three separate bars for each of the main views (tablet, phone, and desktop devices). This created unnecessary friction when adding new items. In the long term, the goal of integrating more programs into the website will require a certain consistency and so the navigation bar must be unified across all views.
Improvements
My website is glued together with
Make of
that what you will. PHP
is probably the most hated
programming language.
on the back–end. You’ll often hear that
PHP
has native
Eventually the
navigation components may be moved into a Go HTML
template, and generated statically by Hugo.
abilities and that is true. To solve my problem of multiple
navigation bars, a templating system is used to create scoped components using
null coalescing operators
to set the defaults. This bespoke component navigator.link
describes a
navigation link. Three parts receive or pass data: the attributes, the content,
and optionally, a faux return clause.
<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; ?>
Since this component is described in a file, it is cascaded anywhere using
require
.
<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>
In frameworks like Laravel, this
templating method can take on a more
You know the saying: As clean as
a whistle. Corporate types would rather the code below than the code above.
form where components may contain scoped CSS
or JavaScript
that can be “extracted” into one final payload. Laravel uses
Blade syntax for templating.
@component ('components.navigator', ['class' => 'text-gray-100 bg-blue-700'])
@slot ('left')
@include ('navigator.partials.menu')
@include ('navigator.partials.logo')
@include ('navigator.partials.header')
@endslot
@slot ('middle')
@include ('navigator.partials.title')
@endslot
@slot ('right')
@include ('navigator.partials.search')
@include ('navigator.partials.list')
@include ('navigator.partials.user')
@include ('navigator.partials.options')
@endslot
@endcomponent
@component ('components.context-menu', ['extract' => 'style']) @endcomponent
@component ('components.context-overlay', ['extract' => 'style']) @endcomponent
Templates can also be nested indefinitely. Here’s the unified context menu
component that contains nested HTML
elements inside the label
that is
stacked or cascaded in different places around the website.
<?php
$links = true;
$id = 'mobile-compact';
$type = 'is-menu is-right';
$icon = icon('arrow-down-circle');
$label = <<<insert
<span class="is-block has-text-centered">
$icon
<span class="is-block navbar__icon__label">More</span>
</span>
insert;
require views('components', 'context.menu');
?>
You’ll notice that namespacing could become an issue, particularly for code
below the fold, and ideally data would be passed as
In PHP version 8
one could
simplify and structure view code further with
named arguments and
other niceties.
to the views
function, but this somewhat CSS
like
behavior is preferred for duplicating components of a similar type quickly.

Goals
More interesting tasks are on my to–do list and may be completed if the time allows.
Comprehensive Dark and Light Mode
The dark mode on the site isn’t implemented all that well. One of my goals is to
implement comprehensive dark mode features. In reality CSS
is the only
necessity, but adding some of the minor features may prove useful. One such
feature involves situations where light and dark mode changes apply to all open
tabs of the site. The most comprehensive guide on implementing dark mode that
I’ve come across is
written in this blog post.
Search Engine
The idea of a vertical search engine where the search scope is limited to a specific set of curated sites looks promising. Here’s to hoping somebody makes a nice and Go would be a good language for writing a search engine. vertical search engine that is easy to integrate into a blog, or maybe I’ll make my own. Lately, I’ve been playing around with building a search engine from scratch for something else that I’m interested in personally.
Deployment
The deployment situation for the website is looking up. The CI/CD
(Continuous
Integration and Deployment) situation, previously
Drone, was replaced with
NixOS and now the website deploys instantly. The
deployment logic lives on the server itself. The development, staging, and
production environments are setup and activated with a simple NixOS
module.
{
services.thedroneely.enable = true;
services.thedroneely.development.enable = true;
services.thedroneely.staging.enable = true;
services.thedroneely.production.enable = true;
}