adam/shift73k
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

implemented snazzy mobile navbar-toggle hamburger animation

Browse source
This commit is contained in:
Adam Piontek 2021-02-26 09:57:43 -05:00
parent 0024354118
commit 9ddb8e3978
8 changed files with 90 additions and 18 deletions
lib/bones73k_web/templates/layout
_navbar.html.eex

10
lib/bones73k_web/templates/layout/_navbar.html.eex
View file

@ -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">