Added dynamic icon container shifting. (#78)

Added dynamic icon container shifting.

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