Merge pull request #51 from kodingwarrior/codex/implement-responsive-navigation-bar

Make navbar responsive with icon-based active tabs

Author: malkoG

frontend/styles/index.css

@@ -93,19 +93,59 @@ body > header img {
   max-width: 100%;
 }
 
-body > nav ul {
+.primary-nav {
   margin: 2rem 0;
+}
+
+.primary-nav ul {
+  margin: 0;
   padding: 0;
   list-style-type: none;
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
-  gap: 1.5rem;
-  font-size: 1.3rem;
-  font-weight: bold;
+  gap: 0.75rem;
+  font-size: 1.25rem;
+  font-weight: 600;
 }
 
-body > nav a {
+.primary-nav li {
+  display: flex;
+}
+
+.primary-nav a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 0.9rem;
+  border-radius: 9999px;
   text-decoration: none;
+  color: inherit;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.primary-nav a:hover,
+.primary-nav a:focus {
+  background-color: rgba(214, 64, 69, 0.12);
+  outline: none;
+}
+
+.primary-nav i {
+  font-size: 1.35rem;
+}
+
+.primary-nav .nav-label {
+  display: none;
+}
+
+.primary-nav li.is-active a {
+  background-color: var(--action-color);
+  color: #fff;
+  box-shadow: 0 0.25rem 0.5rem rgba(214, 64, 69, 0.25);
+}
+
+.primary-nav li.is-active .nav-label {
+  display: inline;
 }
 
 main {

src/_partials/_navbar.erb

@@ -1,10 +1,25 @@
-
-<nav>
+<nav class="primary-nav">
+  <% current_path = resource.respond_to?(:relative_url) ? resource.relative_url : resource.relative_permalink %>
+  <% current_path = current_path.sub(%r{/+$}, '') if current_path %>
+  <% current_path = '/' if current_path.nil? || current_path.empty? %>
+  <% nav_items = [
+    { path: '/', label: 'Home', icon: 'bi-house' },
+    { path: '/about/', label: 'About', icon: 'bi-person' },
+    { path: '/posts/', label: 'Posts', icon: 'bi-pencil-square' },
+    { path: '/wiki/', label: 'Wiki', icon: 'bi-book' },
+    { path: "/hackerspub/", label: "Hackers' Pub", icon: 'bi-globe2' }
+  ] %>
   <ul>
-    <li><a href="/">/home</a></li>
-    <li><a href="/about">/about</a></li>
-    <li><a href="/posts">/posts</a></li>
-    <li><a href="/wiki">/wiki</a></li>
-    <li><a href="/hackerspub">/hackerspub</a></li>
+    <% nav_items.each do |item| %>
+      <% item_path = item[:path].sub(%r{/+$}, '') %>
+      <% item_path = '/' if item_path.empty? %>
+      <% active = current_path == item_path %>
+      <li class="<%= 'is-active' if active %>">
+        <a href="<%= item[:path] %>" aria-label="<%= item[:label] %>" <%= 'aria-current="page"' if active %>>
+          <i class="bi <%= item[:icon] %>" aria-hidden="true"></i>
+          <span class="nav-label"><%= item[:label] %></span>
+        </a>
+      </li>
+    <% end %>
   </ul>
 </nav>