From 9ddb8e3978794fdc8a612a6609719e43ed8aad78 Mon Sep 17 00:00:00 2001
From: Adam Piontek <adam@73k.us>
Date: Fri, 26 Feb 2021 09:57:43 -0500
Subject: [PATCH] implemented snazzy mobile navbar-toggle hamburger animation
---
assets/css/_fonts.scss | 2 +-
assets/css/_nav-burger.scss | 56 +++++++++++++++++++
assets/css/app.scss | 14 +----
assets/js/_hamburger.js | 12 ++++
assets/js/app.js | 2 +
assets/package-lock.json | 11 ++++
assets/package.json | 1 +
.../templates/layout/_navbar.html.eex | 10 ++--
8 files changed, 90 insertions(+), 18 deletions(-)
create mode 100644 assets/css/_nav-burger.scss
create mode 100644 assets/js/_hamburger.js
diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss
index 1f401deb..da4dd13c 100644
--- a/assets/css/_fonts.scss
+++ b/assets/css/_fonts.scss
@@ -1,7 +1,7 @@
/* Fontsource Lato */
// @import "../node_modules/@fontsource/lato/100.css"; /* thin | normal */
// @import "../node_modules/@fontsource/lato/100-italic.css"; /* thin | italic */
-// @import "../node_modules/@fontsource/lato/300.css"; /* light | normal */
+@import "../node_modules/@fontsource/lato/300.css"; /* light | normal */
// @import "../node_modules/@fontsource/lato/300-italic.css"; /* light | italic */
@import "../node_modules/@fontsource/lato/400.css"; /* normal | normal */
// @import "../node_modules/@fontsource/lato/400-italic.css"; /* normal | italic */
diff --git a/assets/css/_nav-burger.scss b/assets/css/_nav-burger.scss
new file mode 100644
index 00000000..1df3cefe
--- /dev/null
+++ b/assets/css/_nav-burger.scss
@@ -0,0 +1,56 @@
+/* Hamburger settings overrides */
+$hamburger-padding-x: 0.95rem !default;
+$hamburger-padding-y: 0.625rem !default;
+$hamburger-layer-width: 1.5rem !default;
+$hamburger-layer-height: 2px !default;
+$hamburger-layer-spacing: 6px !default;
+// * skipping default color, using color from bootstrap instead, below
+// $hamburger-layer-color: rgba(0, 0, 0, 0.55) !default;
+$hamburger-layer-border-radius: 0.25rem !default;
+$hamburger-hover-opacity: 0.7 !default;
+// * skipping default color, using color from bootstrap instead, below
+// $hamburger-active-layer-color: $hamburger-layer-color !default;
+$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
+
+/* import hamburgers sass */
+@import "../node_modules/hamburgers/_sass/hamburgers/hamburgers.scss";
+
+/* correct colors to match bootstrap defaults */
+.navbar-light {
+ .hamburger {
+ &.navbar-toggler {
+ border: 1px $navbar-light-toggler-border-color solid !important;
+ .hamburger-inner {
+ &,
+ &::before,
+ &::after {
+ background-color: $navbar-light-color;
+ }
+ }
+ &.is-active {
+ .hamburger-inner::after {
+ background-color: $navbar-light-color;
+ }
+ }
+ }
+ }
+}
+.navbar-dark {
+ .hamburger {
+ &.navbar-toggler {
+ border: 1px $navbar-dark-toggler-border-color solid !important;
+ .hamburger-inner {
+ &,
+ &::before,
+ &::after {
+ background-color: $navbar-dark-color;
+ }
+ }
+ &.is-active {
+ .hamburger-inner::after {
+ background-color: $navbar-dark-color;
+ }
+ }
+ }
+ }
+}
diff --git a/assets/css/app.scss b/assets/css/app.scss
index 60414dde..1b4dd448 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -14,19 +14,7 @@
@import "phx-liveview";
/* Navbar toggler icon override */
-.navbar-toggler-icon {
- -webkit-transition: background 150ms ease;
- -moz-transition: background 150ms ease;
- -o-transition: background 150ms ease;
- -ms-transition: background 150ms ease;
- transition: background 150ms ease;
-}
-.navbar-light .navbar-toggler.collapsed .navbar-toggler-icon {
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="rgba(0, 0, 0, 0.55)"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>');
-}
-.navbar-light .navbar-toggler .navbar-toggler-icon {
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="rgba(0, 0, 0, 0.55)"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>');
-}
+@import "nav-burger";
/* Alerts and form errors */
.alert:empty {
diff --git a/assets/js/_hamburger.js b/assets/js/_hamburger.js
new file mode 100644
index 00000000..f1432c2a
--- /dev/null
+++ b/assets/js/_hamburger.js
@@ -0,0 +1,12 @@
+const togglerBtn = document.getElementById("navbarSupportedContentToggler");
+const navbarContent = document.getElementById("navbarSupportedContent");
+
+navbarContent.addEventListener("show.bs.collapse", () => {
+ console.log("opening navbar content");
+ togglerBtn.classList.toggle("is-active");
+});
+
+navbarContent.addEventListener("hide.bs.collapse", () => {
+ console.log("closing navbar content");
+ togglerBtn.classList.toggle("is-active");
+});
diff --git a/assets/js/app.js b/assets/js/app.js
index ffd04151..212cfb21 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -24,6 +24,8 @@ import { LiveSocket } from "phoenix_live_view";
// Bootstrap v5 js imports
import "bootstrap/js/dist/collapse";
import "bootstrap/js/dist/dropdown";
+// Boostrap helpers
+import "./_hamburger";
// LiveSocket setup
let csrfToken = document
diff --git a/assets/package-lock.json b/assets/package-lock.json
index e8273216..98142305 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -11,6 +11,7 @@
"@popperjs/core": "^2.8.4",
"bootstrap": "^5.0.0-beta2",
"bootstrap-icons": "^1.4.0",
+ "hamburgers": "^1.1.3",
"heroicons": "^0.4.2",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
@@ -3907,6 +3908,11 @@
"integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
"dev": true
},
+ "node_modules/hamburgers": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/hamburgers/-/hamburgers-1.1.3.tgz",
+ "integrity": "sha512-qpfnJwZq6ATAGJEriwuyfVNgT++GG+o+3bBfPYF7F3WY452cYKbaYGUuqwhp+3kHLI6CL4VIBfj8bfbp90Lp1A=="
+ },
"node_modules/has": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -12840,6 +12846,11 @@
"integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
"dev": true
},
+ "hamburgers": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/hamburgers/-/hamburgers-1.1.3.tgz",
+ "integrity": "sha512-qpfnJwZq6ATAGJEriwuyfVNgT++GG+o+3bBfPYF7F3WY452cYKbaYGUuqwhp+3kHLI6CL4VIBfj8bfbp90Lp1A=="
+ },
"has": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
diff --git a/assets/package.json b/assets/package.json
index ae7164e7..bf341fb2 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -12,6 +12,7 @@
"@popperjs/core": "^2.8.4",
"bootstrap": "^5.0.0-beta2",
"bootstrap-icons": "^1.4.0",
+ "hamburgers": "^1.1.3",
"heroicons": "^0.4.2",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
diff --git a/lib/bones73k_web/templates/layout/_navbar.html.eex b/lib/bones73k_web/templates/layout/_navbar.html.eex
index 605284d3..0a0b5a9a 100644
--- a/lib/bones73k_web/templates/layout/_navbar.html.eex
+++ b/lib/bones73k_web/templates/layout/_navbar.html.eex
@@ -1,13 +1,15 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
- <%= link to: Routes.page_path(@conn, :index), class: "navbar-brand py-0" do %>
+ <%= link to: Routes.page_path(@conn, :index), class: "navbar-brand py-0 fs-4" do %>
<%= icon_div @conn, "mdi-skull-crossbones", [class: "icon baseline fs-3"] %>
- <span>Bones73k</span>
+ <span class="fw-light">Bones73k</span>
<% end %>
- <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
+ <button class="hamburger hamburger--squeeze collapsed navbar-toggler" id="navbarSupportedContentToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="hamburger-box d-flex">
+ <span class="hamburger-inner"></span>
+ </span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" phx-update="ignore">