navbar - auto dispose li elements based on fitting size

Author: crikfilippo

src/css/bundle.css

@@ -3724,34 +3724,36 @@ blockquote {
 }
 
 .kroma-navbar .nav-logo {
-    height: calc(var(--nav-size-base) / 1.5 );
-    width: min-content;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-    gap: calc(var(--nav-size-base) / 6);
+  height: calc(var(--nav-size-base) / 1.5 );
+  width: max-content;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: calc(var(--nav-size-base) / 6);
 }
 
 nav.kroma-navbar {
-    width: 100%;
-    height: var(--nav-size-base);
-    position: sticky;
-    top: 0;
-    left: 0;
-    z-index: 3;
-    display: flex;
-    flex-direction: row;
-    align-content: center;
-    align-items: center;
-    flex-wrap: nowrap;
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
-    justify-content: space-between;
-    box-sizing: border-box;
-    padding: calc(var(--nav-size-base) / 6);
+  width: 100%;
+  height: var(--nav-size-base);
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: calc(var(--nav-size-base) / 6);
+  gap: calc(var(--nav-size-base) / 6);
 }
 
+
 nav.kroma-navbar:before {
     content: "";
     display: block;
@@ -3794,72 +3796,99 @@ nav.kroma-navbar:before {
     gap: 0;
 }
 
+nav.kroma-navbar:not(.toggled-menu) .nav-toggle {
+  display: none;
+}
+
 .kroma-navbar .nav-toggle.show #nav-line-3 {
-    opacity: 0;
-    /* top: 20px; */
-    height: 0;
+  opacity: 0;
+  /* top: 20px; */
+  height: 0;
 }
 
 .kroma-navbar .nav-toggle.show #nav-line-1 {
-    transform: translate(0px, 50%) rotate(45deg);
-    transform-origin: center;
+  transform: translate(0px, 50%) rotate(45deg);
+  transform-origin: center;
 }
 
 .kroma-navbar .nav-toggle.show #nav-line-2 {
-    /* background: var(--neutral-700); */
-    transform: translate(0px, -50%) rotate(-45deg);
-    transform-origin: center;
+  /* background: var(--neutral-700); */
+  transform: translate(0px, -50%) rotate(-45deg);
+  transform-origin: center;
 }
 
-.kroma-navbar .nav-menu {
-    display: flex;
-    position: absolute;
-    top: 100%;
-    right: 0;
-    margin: calc(var(--nav-size-base) / 3);
-    background: var(--neutral-50);
-    border-radius: 10px;
-    box-shadow: var(--shadow-sm);
-    align-items: center;
-    justify-content: center;
-    /* min-width: 170px; */
-    max-height: 0;
-    opacity: 0;
-    overflow: hidden;
-    transition: opacity 100ms, max-height 2s 0ms;
+.kroma-navbar.toggled-menu .nav-menu {
+  display: flex;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin: calc(var(--nav-size-base) / 3);
+  background: var(--neutral-50);
+  border-radius: 10px;
+  box-shadow: var(--shadow-sm);
+  align-items: center;
+  justify-content: center;
+  /* min-width: 170px; */
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: opacity 100ms, max-height 2s 0ms;
 }
 
-.kroma-navbar .nav-menu ul li a {
-    text-decoration: none;
-    list-style: none;
-    padding: calc(var(--nav-size-base) / 6) calc(var(--nav-size-base) / 1.5);
-    display: block;
+.kroma-navbar.toggled-menu .nav-menu ul li a {
+  text-decoration: none;
+  list-style: none;
+  padding: calc(var(--nav-size-base) / 6) calc(var(--nav-size-base) / 1.5);
+  display: block;
 }
 
 
-.kroma-navbar .nav-menu ul {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+.kroma-navbar.toggled-menu .nav-menu ul {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .kroma-navbar .nav-toggle.show ~ .nav-menu {
-    max-height: 1000px;
-    opacity: 1;
-    transition: max-height 0s 0ms, opacity 100ms;
+  max-height: 1000px;
+  opacity: 1;
+  transition: max-height 0s 0ms, opacity 100ms;
 }
 
-.kroma-navbar .nav-menu ul li:first-child a {
-    padding-top: calc(var(--nav-size-base) / 3);
+.kroma-navbar.toggled-menu .nav-menu ul li:first-child a {
+  padding-top: calc(var(--nav-size-base) / 3);
 }
 
-.kroma-navbar .nav-menu ul li:last-child a {
-    padding-bottom: calc(var(--nav-size-base) / 3);
+.kroma-navbar.toggled-menu .nav-menu ul li:last-child a {
+  padding-bottom: calc(var(--nav-size-base) / 3);
 }
 
-.kroma-navbar .nav-menu ul li a.nav-current,.nav-menu ul li:hover a {
-    background: var(--neutral-100);
+.kroma-navbar.toggled-menu .nav-menu ul li a.nav-current,.nav-menu ul li:hover a {
+  background: var(--neutral-100);
+}
+
+
+.kroma-navbar:not(.toggled-menu) .nav-menu {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.kroma-navbar:not(.toggled-menu) .nav-menu ul {
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  gap: calc(var(--nav-size-base) / 6);
+}
+
+.kroma-navbar:not(.toggled-menu) .nav-menu ul li a {
+  text-decoration: none;
+}
+
+.kroma-navbar:not(.toggled-menu) .nav-menu ul li a:hover {
+  text-decoration: underline;
 }
 
 /* --- pagination.css --- */

src/css/components/navbar.css

@@ -10,7 +10,7 @@
 
 .kroma-navbar .nav-logo {
     height: calc(var(--nav-size-base) / 1.5 );
-    width: min-content;
+    width: max-content;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
@@ -35,6 +35,7 @@ nav.kroma-navbar {
     justify-content: space-between;
     box-sizing: border-box;
     padding: calc(var(--nav-size-base) / 6);
+    gap: calc(var(--nav-size-base) / 6);
 }
 
 nav.kroma-navbar:before {
@@ -79,6 +80,10 @@ nav.kroma-navbar:before {
     gap: 0;
 }
 
+nav.kroma-navbar:not(.toggled-menu) .nav-toggle {
+    display: none;
+}
+
 .kroma-navbar .nav-toggle.show #nav-line-3 {
     opacity: 0;
     /* top: 20px; */
@@ -96,7 +101,7 @@ nav.kroma-navbar:before {
     transform-origin: center;
 }
 
-.kroma-navbar .nav-menu {
+.kroma-navbar.toggled-menu .nav-menu {
     display: flex;
     position: absolute;
     top: 100%;
@@ -114,15 +119,15 @@ nav.kroma-navbar:before {
     transition: opacity 100ms, max-height 2s 0ms;
 }
 
-.kroma-navbar .nav-menu ul li a {
+.kroma-navbar.toggled-menu .nav-menu ul li a {
     text-decoration: none;
     list-style: none;
     padding: calc(var(--nav-size-base) / 6) calc(var(--nav-size-base) / 1.5);
     display: block;
 }
 
 
-.kroma-navbar .nav-menu ul {
+.kroma-navbar.toggled-menu .nav-menu ul {
     width: 100%;
     height: 100%;
     display: flex;
@@ -135,14 +140,37 @@ nav.kroma-navbar:before {
     transition: max-height 0s 0ms, opacity 100ms;
 }
 
-.kroma-navbar .nav-menu ul li:first-child a {
+.kroma-navbar.toggled-menu .nav-menu ul li:first-child a {
     padding-top: calc(var(--nav-size-base) / 3);
 }
 
-.kroma-navbar .nav-menu ul li:last-child a {
+.kroma-navbar.toggled-menu .nav-menu ul li:last-child a {
     padding-bottom: calc(var(--nav-size-base) / 3);
 }
 
-.kroma-navbar .nav-menu ul li a.nav-current,.nav-menu ul li:hover a {
+.kroma-navbar.toggled-menu .nav-menu ul li a.nav-current,.nav-menu ul li:hover a {
     background: var(--neutral-100);
+}
+
+
+.kroma-navbar:not(.toggled-menu) .nav-menu {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.kroma-navbar:not(.toggled-menu) .nav-menu ul {
+    display: flex;
+    flex-direction: row;
+    list-style: none;
+    gap: calc(var(--nav-size-base) / 6);
+}
+
+.kroma-navbar:not(.toggled-menu) .nav-menu ul li a {
+    text-decoration: none;
+}
+
+.kroma-navbar:not(.toggled-menu) .nav-menu ul li a:hover {
+    text-decoration: underline;
 }

src/js/bundle.js

@@ -1276,6 +1276,9 @@ export class KromaNavbar {
         this.siteTitle = document.querySelector('head title');
         this.siteTitle = ( this.nav.dataset.title ?? siteTitle ) ?? (this.siteTitle.innerText ?? '');
 
+        //menu sizing for toggle
+        this.menuExtWidth = undefined;
+        this.menuIntWidth = undefined;
 
         //get menu items
         this.hasMenu = this.nav.querySelector('a') ? true : false;
@@ -1301,12 +1304,20 @@ export class KromaNavbar {
 
             this.addToggle();
             this.addMenu();
+            this.autoToggle();
 
+            //auto add/remove toggle for menu width
+            window.addEventListener('resize', () => {
+                clearTimeout(this.resizeTimeout);
+                this.resizeTimeout = setTimeout(() => { this.autoToggle(); }, 200); 
+            });
 
         }
 
 
 
+        
+
     }
 
     addLogo(){
@@ -1380,6 +1391,19 @@ export class KromaNavbar {
 
     }
 
+    autoToggle(){
+
+        this.nav.classList.remove('toggled-menu'); //always use full width navbar for calculations
+        var menu = document.querySelector('#'+this.nav.id+' .nav-menu');   
+        if(!menu){console.error('menu container not found'); return false;}    
+        var ul = menu.querySelector(' ul');
+        if(!ul){console.error('menu ul not found'); return false;} 
+        this.menuExtWidth = parseInt(getComputedStyle(menu).width);
+        this.menuIntWidth = parseInt(getComputedStyle(ul).width);
+        if(!this.menuExtWidth || !this.menuIntWidth){console.error('menu size cannot be determined');  return false;} 
+        if(this.menuExtWidth <= this.menuIntWidth){this.nav.classList.add('toggled-menu');}
+
+    }
 
 }