fixing updates

includes/header.html

@@ -12,26 +12,29 @@
  },
  fullWidth: false,
  calculateMarkerPosition(hoveredElement){
- console.log('run');
  const markerElement = document.getElementById('marker');
 
- // Get the width, height, top, and left position of the hovered element
- const width = hoveredElement.offsetWidth;
- const height = hoveredElement.offsetHeight;
- const top = hoveredElement.offsetTop;
- const left = hoveredElement.offsetLeft;
+ if(hoveredElement)
+ {
+ // Get the width, height, top, and left position of the hovered element
+ const width = hoveredElement.offsetWidth;
+ const height = hoveredElement.offsetHeight;
+ const top = hoveredElement.offsetTop;
+ const left = hoveredElement.offsetLeft;
 
- console.log(hoveredElement);
- console.log('top: ' + top + ' w: ' + width);
-
- // Apply the values to the marker element
- this.markerPosition.width = width;
- this.markerPosition.height = height;
- this.markerPosition.top = top;
- this.markerPosition.left = left;
+ // Apply the values to the marker element
+ this.markerPosition.width = width;
+ this.markerPosition.height = height;
+ this.markerPosition.top = top;
+ this.markerPosition.left = left;
+ }
+ },
+ resetProgressWidth(){
+ const targetElement = document.getElementById('nav-border-animated');
+ targetElement.style.width = `0%`;
  }
 }" 
-@set-page-active="scrollTop(); active = $event.detail.active;"
+@set-page-active="scrollTop(); active = $event.detail.active; resetProgressWidth()"
 @set-page-full-width="fullWidth=true"
 id="header"
 x-init="
@@ -78,16 +81,12 @@
  }
  });
 
- 
- 
  setTimeout(function(){
  calculateMarkerPosition(document.querySelector('[data-' + active +']'));
  }, 10);
  setTimeout(function(){
  document.getElementById('marker').classList.add('ease-out', 'duration-300');
  }, 100);
- 
- 
 " class="box-border fixed z-30 flex items-center w-full h-20 leading-10 text-center bg-opacity-50 bg-gradient-to-b from-black/90 to-black/10 backdrop-blur-md">
  <div id="nav-border" class="absolute bottom-0 left-0 w-full h-px duration-500 ease-out opacity-0">
  <div class="relative w-full h-px bg-white opacity-20"></div>
@@ -107,15 +106,15 @@
  :style="'width:' + markerPosition.width + 'px; height:' + markerPosition.height + 'px; top:' + markerPosition.top + 'px; left:' + markerPosition.left + 'px;'"
  ></div>
  <div id="nav-items" class="relative z-50 flex-col items-center justify-center w-full h-auto px-2 py-[5px] text-xs font-semibold text-center text-gray-400 rounded-full ring-1 ring-gray-200/[15%] bg-white/[8%] md:w-auto md:h-10 md:flex-row md:items-center">
- <button hx-get="/" hx-target="#site-content" hx-select="#site-content" hx-ext="alpine-morph" hx-swap="morph" hx-push-url="true" data-home @click="active='home'; fullWidth=false; scrollTop();" @mouseenter="calculateMarkerPosition($el); hovered='home'" 
+ <button hx-get="/" hx-target="#site-content" hx-select="#site-content" hx-ext="alpine-morph" hx-swap="morph" hx-push-url="true" data-home @click="active='home'; fullWidth=false; scrollTop(); resetProgressWidth();" @mouseenter="calculateMarkerPosition($el); hovered='home'" 
  :class="{ 'text-white' : active == 'home', 'text-white/80': active != 'home' }"
  class="relative inline-flex items-center flex-shrink-0 w-full h-full px-3 py-5 leading-tight text-center transition-colors rounded-full group md:py-2 md:w-auto md:text-center">
  <span>Home</span>
  <span 
  :class="{ 'w-full left-0' : active=='home', 'w-0 left-1/2' : active!='home' }" 
  class="absolute bottom-0 px-1.5 translate-y-1.5 h-px duration-300 ease-out"><span class="relative block w-full h-px bg-gradient-to-r md:from-white/0 md:via-white/40 md:to-white/0"></span></span>
  </button> 
- <button hx-get="/templates" hx-target="#site-content" hx-select="#site-content" hx-ext="alpine-morph" hx-swap="morph" hx-push-url="true" @click="active='templates'; fullWidth=true; scrollTop(); route=$el.getAttribute('hx-get')" data-templates @mouseenter="calculateMarkerPosition($el); hovered='templates'" 
+ <button hx-get="/templates" hx-target="#site-content" hx-select="#site-content" hx-ext="alpine-morph" hx-swap="morph" hx-push-url="true" @click="active='templates'; fullWidth=true; scrollTop(); resetProgressWidth(); route=$el.getAttribute('hx-get')" data-templates @mouseenter="calculateMarkerPosition($el); hovered='templates'" 
  :class="{ 'text-white' : active == 'templates', 'text-white/80': active != 'templates' }"
  class="relative inline-flex items-center flex-shrink-0 w-full h-full px-3 py-5 leading-tight text-center text-white transition-colors rounded-full group md:py-2 md:w-auto md:text-center">
  <span>Templates</span>
@@ -131,7 +130,7 @@
  :class="{ 'w-full left-0' : active=='components', 'w-0 left-1/2' : active!='components' }" 
  class="absolute bottom-0 px-1.5 translate-y-1.5 h-px duration-300 ease-out"><span class="relative block w-full h-px bg-gradient-to-r md:from-white/0 md:via-white/40 md:to-white/0"></span></span>
  </button> 
- <button hx-get="/docs/getting-started" hx-target="#site-content" hx-select="#site-content" hx-ext="alpine-morph" hx-swap="morph" hx-push-url="true" @click="active='docs'; fullWidth=true; scrollTop(); route=$el.getAttribute('hx-get')" data-docs @mouseenter="calculateMarkerPosition($el); hovered='docs'"
+ <button hx-get="/docs/getting-started" hx-target="#site-content" hx-select="#site-content" hx-ext="alpine-morph" hx-swap="morph" hx-push-url="true" @click="active='docs'; fullWidth=true; scrollTop(); resetProgressWidth(); route=$el.getAttribute('hx-get')" data-docs @mouseenter="calculateMarkerPosition($el); hovered='docs'"
  :class="{ 'text-white' : active == 'docs', 'text-white/80': active != 'docs' }"
  class="relative inline-flex items-center flex-shrink-0 w-full h-full px-3 py-5 leading-tight text-center text-white transition-colors rounded-full group md:py-2 md:w-auto md:text-center">
  <span>Documentation</span>