diff options
author | Anur Bašić <48890281+bashovski@users.noreply.github.com> | 2019-10-24 20:31:34 +0300 |
---|---|---|
committer | Anur Bašić <48890281+bashovski@users.noreply.github.com> | 2019-10-24 20:31:34 +0300 |
commit | fa45dfcfff2708aa455ca61c1bcdd3c7b8215f84 (patch) | |
tree | b35ef89830642cc85a43f414bc469e0f85f14025 | |
parent | 523282db8c819f0e81c589e87f28d6ae2457f95b (diff) |
Added dynamic icon container shifting depending on width of child-containers of navbar.
-rw-r--r-- | layouts/partials/nav.html | 11 | ||||
-rw-r--r-- | static/css/style.css | 8 | ||||
-rw-r--r-- | static/js/navicon-shift.js | 24 |
3 files changed, 33 insertions, 10 deletions
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index 96993e4..69f6f8d 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -1,13 +1,13 @@ <section class="section"> <div class="container"> - <nav class="nav"> - <div class="nav-left"> - <a class="nav-item" href="{{ .Site.BaseURL }}"> - <h1 class="title is-4">{{ .Site.Title }}</h1> + <nav id="nav-main" class="nav"> + <div id="nav-name" class="nav-left"> + <a id="nav-anchor" class="nav-item" href="{{ .Site.BaseURL }}"> + <h1 id="nav-heading" class="title is-4">{{ .Site.Title }}</h1> </a> </div> <div class="nav-right"> - <nav class="nav-item level is-mobile"> + <nav id="nav-items" class="nav-item level is-mobile"> {{- $social := ( .Site.Params.social ) -}} {{- range $platform := $social.config.platforms -}} {{- with $username := ( index $social $platform ) -}} @@ -52,4 +52,5 @@ </nav> </div> + <script src="/js/navicon-shift.js"></script> </section>
\ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index 21971c8..4688229 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -5267,11 +5267,9 @@ a.nav-item.is-tab.is-active { z-index: 2; } -@media (max-width:767px) { - .nav { - display: grid; - grid-template-columns: auto; - } +.nav-shifted { + display: grid !important; + grid-template-columns: auto !important; } .panel-heading, diff --git a/static/js/navicon-shift.js b/static/js/navicon-shift.js new file mode 100644 index 0000000..b87ec9f --- /dev/null +++ b/static/js/navicon-shift.js @@ -0,0 +1,24 @@ +const + nameElement = document.getElementById('nav-name'), + parentElement = document.getElementById('nav-main'); + +let incremented = 0; +function shiftNavIcons() { + + let headingElement = document.getElementById('nav-heading'); + if(nameElement.offsetWidth < (headingElement.offsetWidth+10)) { + parentElement.classList.add('nav-shifted'); + } else { + incremented++; + if(incremented > 5 && parentElement.offsetWidth > 445) { + parentElement.className = parentElement.className.replace(/\bnav-shifted\b/g, ''); + incremented = 0; + } + + } + +}; +window.addEventListener('resize', (event) => { + shiftNavIcons(); +}); +shiftNavIcons();
\ No newline at end of file |