fix error onMounted and getBoundingRect

components/EpisodeHeadings.vue

@@ -25,7 +25,8 @@ const setTitlePosition = () => {
   }
 };
 
-onMounted(() => {
+onMounted(async () => {
+  await nextTick();
   setTitlePosition();
   window.addEventListener('resize', debounce(300, setTitlePosition));
 });
@@ -60,11 +61,11 @@ onUnmounted(() => {
       >
     </nuxt-link>
     <p
-      class="col-start-1 col-end-3 text-left text-gray-300 md:row-start-2 md:col-start-2"
+      class="col-start-1 col-end-3 text-left text-white/80 md:row-start-2 md:col-start-2"
     >
       {{ props.episode.description.substring(0, 120) }}...
     </p>
-    <time :datetime="new Date(props.episode.publicationDate)" class="col-start-1 col-end-3 mt-1 text-sm text-left text-gray-500 md:col-start-2">
+    <time :datetime="new Date(props.episode.publicationDate)" class="col-start-1 col-end-3 mt-1 text-sm text-left text-white/60 md:col-start-2">
       {{ date }}
     </time>
     <div class="flex items-center justify-between col-span-2 md:pt-2">

components/Header.vue

@@ -8,8 +8,9 @@ const updateHeaderHeight = () => {
   headerHeight.value = header.value.getBoundingClientRect().height;
 };
 
-onMounted(() => {
+onMounted(async () => {
   // only client side
+  await nextTick();
   updateHeaderHeight();
   // resize window
   window.addEventListener('resize', debounce(300, updateHeaderHeight));

components/Navbar.vue

@@ -25,13 +25,15 @@ const links = [
   >
     <nuxt-link
       to="/"
+      title="accueil"
       class="px-4 pt-4 pb-2 border-b-2 border-transparent hover:border-yellowDs"
-      >HOME</nuxt-link
+      ><Icon class="relative w-5 h-5 mr-1 -top-0.5" name="material-symbols:home" title="Accueil" />//</nuxt-link
     >
     <nuxt-link
       v-for="{title, url} in links"
       :key="url"
       :to="url"
+      :title="title"
       class="px-4 pt-4 pb-2 text-sm border-b-2 border-transparent sm:text-base hover:border-yellowDs"
       :class="{
         'router-link-active router-link-exact-active':