navbar - added avatar component

please see already existing avatar component documentation

Author: crikfilippo

demo.html

@@ -22,6 +22,12 @@
     <a href="#">About</a>
     <a href="#">Contacts</a>
 
+    <!--profile avatar (see avatar component for reference)-->
+    <div class="kroma-avatar" data-size="xl" data-variant="ghost" data-status="online" data-disabled="true" aria-label="Ghost avatar online status">
+      <span class="kroma-avatar-status"></span>
+      <img src="https://ui-avatars.com/api/?name=Online&background=cccccc&color=5a67d8" alt="User Avatar">
+    </div>
+
   </nav>
 
 

src/css/bundle.css

@@ -3731,6 +3731,7 @@ blockquote {
   flex-wrap: nowrap;
   align-items: center;
   gap: calc(var(--nav-size-base) / 6);
+  flex: auto;
 }
 
 nav.kroma-navbar {
@@ -3891,6 +3892,11 @@ nav.kroma-navbar:not(.toggled-menu) .nav-toggle {
   text-decoration: underline;
 }
 
+.kroma-navbar .kroma-avatar {
+  max-height: calc(var(--nav-size-base) / 1.5);
+  max-width: calc(var(--nav-size-base) / 1.5);
+}
+
 /* --- pagination.css --- */
 /* Pagination Container */
 .kroma-pagination {

src/css/components/navbar.css

@@ -16,6 +16,7 @@
     flex-wrap: nowrap;
     align-items: center;
     gap: calc(var(--nav-size-base) / 6);
+    flex: auto;
 }
 
 nav.kroma-navbar {
@@ -173,4 +174,9 @@ nav.kroma-navbar:not(.toggled-menu) .nav-toggle {
 
 .kroma-navbar:not(.toggled-menu) .nav-menu ul li a:hover {
     text-decoration: underline;
+}
+
+.kroma-navbar .kroma-avatar {
+    max-height: calc(var(--nav-size-base) / 1.5);
+    max-width: calc(var(--nav-size-base) / 1.5);
 }

src/js/bundle.js

@@ -1257,6 +1257,12 @@ export class KromaNavbar {
             <a href="#">About</a>
             <a href="#">Contacts</a>
 
+            <!--profile avatar (see avatar component for reference)-->
+            <div class="kroma-avatar" data-size="xl" data-variant="ghost" data-status="online" data-disabled="true" aria-label="Ghost avatar online status">
+            <span class="kroma-avatar-status"></span>
+            <img src="https://ui-avatars.com/api/?name=Online&background=cccccc&color=5a67d8" alt="User Avatar">
+            </div>
+
         </nav>
     
     */
@@ -1281,9 +1287,9 @@ export class KromaNavbar {
         this.menuIntWidth = undefined;
 
         //get menu items
-        this.hasMenu = this.nav.querySelector('a') ? true : false;
+        this.hasMenu = document.querySelector('#'+this.nav.id+' > a') ? true : false;
         this.pages = [];
-        this.nav.querySelectorAll('a').forEach((a)=>{
+        this.nav.querySelectorAll('#'+this.nav.id+' > a').forEach((a)=>{
 
             var page = {};
             page.href = a.href ?? '';
@@ -1293,6 +1299,10 @@ export class KromaNavbar {
 
         });
 
+        //get avatar element
+        this.hasAvatar = (this.nav.querySelectorAll('.kroma-avatar')).length > 0 ? true : false;
+        this.avatar = this.hasAvatar ? this.nav.querySelectorAll('.kroma-avatar')[0].cloneNode(true) : undefined;
+
         //remove anything else in navbar container
         this.nav.innerHTML = "";
 
@@ -1309,11 +1319,19 @@ export class KromaNavbar {
             //auto add/remove toggle for menu width
             window.addEventListener('resize', () => {
                 clearTimeout(this.resizeTimeout);
-                this.resizeTimeout = setTimeout(() => { this.autoToggle(); }, 200); 
+                this.resizeTimeout = setTimeout(() => { this.autoToggle(); this.addUpdAvatar(); }, 200); 
             });
 
         }
 
+
+        //add avatar
+        this.addUpdAvatar();
+      
+        
+        
+        
+
 
 
 
@@ -1344,66 +1362,110 @@ export class KromaNavbar {
 
     }
 
-
     addToggle(){
 
 
-        var toggle = document.createElement('div');
-        
+        if(this.hasMenu){
 
-        toggle.classList.add('nav-toggle');
-        toggle.addEventListener('click',function(){if(this.classList.contains('show')){this.classList.remove('show');}else{this.classList.add('show');}});
+            var toggle = document.createElement('div');
+            
+
+            toggle.classList.add('nav-toggle');
+            toggle.addEventListener('click',function(){if(this.classList.contains('show')){this.classList.remove('show');}else{this.classList.add('show');}});
 
-        for(var i = 1; i <= 3; i++){
+            for(var i = 1; i <= 3; i++){
 
-            var line = document.createElement('span');
-            line.id = ('nav-line-'+i);
-            line.classList.add('nav-line');
-            toggle.appendChild(line);
+                var line = document.createElement('span');
+                line.id = ('nav-line-'+i);
+                line.classList.add('nav-line');
+                toggle.appendChild(line);
 
+            }
+
+            this.nav.appendChild(toggle);
+
+            return true;
+        
         }
 
-        this.nav.appendChild(toggle);
+        return false;
 
 
     }
 
     addMenu(){
 
-        var menu = document.createElement('div');
-        menu.classList.add('nav-menu');
-        var ul = document.createElement('ul');
-        
-        for(var i = 0; i < this.pages.length; i++){
+        if(this.hasMenu){
 
-            var li = document.createElement('li');
-            var a = document.createElement('a');
-            if(this.pages[i].href.length > 0){ a.href = this.pages[i].href; }
-            a.innerText = this.pages[i].text;
-            li.appendChild(a);
-            ul.appendChild(li);
+            var menu = document.createElement('div');
+            menu.classList.add('nav-menu');
+            var ul = document.createElement('ul');
+            
+            for(var i = 0; i < this.pages.length; i++){
+
+                var li = document.createElement('li');
+                var a = document.createElement('a');
+                if(this.pages[i].href.length > 0){ a.href = this.pages[i].href; }
+                a.innerText = this.pages[i].text;
+                li.appendChild(a);
+                ul.appendChild(li);
+
+            }
+
+            menu.appendChild(ul);
+            this.nav.appendChild(menu);
+
+            return true;
 
         }
 
-        menu.appendChild(ul);
-        this.nav.appendChild(menu);
+        return false;
 
 
     }
 
     autoToggle(){
 
-        if(window.innerWidth <= 500){this.nav.classList.add('toggled-menu'); return true;} //always add toggle on mobile
-        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'); return true;}
+        if(this.hasMenu){
+
+            if(window.innerWidth <= 500){this.nav.classList.add('toggled-menu'); return true;} //always add toggle on mobile
+            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'); return true;}
 
+        }
+            
+        return false;
+
+    }
+
+    addUpdAvatar(){
+
+        if(this.hasAvatar){
+
+            //remove previous avatar
+            var prevAvatar = this.nav.querySelector('.kroma-avatar');
+            if(prevAvatar){prevAvatar.remove();}
+
+            //add avatar before toggle
+            if(this.nav.classList.contains('toggled-menu')){
+
+                this.nav.insertBefore(this.avatar, this.nav.querySelector('.nav-toggle'));
+                return true;
+
+            }
+
+            //add avatar at the end
+            this.nav.appendChild(this.avatar);
+        
+        }
+
         return false;
 
     }