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,'); -} -.navbar-light .navbar-toggler .navbar-toggler-icon { - background-image: url('data:image/svg+xml;utf8,'); -} +@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 @@