FEATURE HAndling the share button

resources/css/components/post-header.css

@@ -146,6 +146,66 @@
           }
         }
       }
+
+      &--share {
+        .socials-buttons__share-links {
+          @apply max-w-0 opacity-0 overflow-hidden max-h-7;
+          transition: all 0.3s ease-in-out;
+        }
+        &.is-open .socials-buttons__share-links {
+          @apply max-w-[200px] opacity-100;
+        }
+
+        .share-icon {
+          @apply max-w-[200px];
+        }
+
+        &.is-open {
+          .share-icon {
+            @apply max-w-0 overflow-hidden;
+          }
+          .socials-buttons__share-links {
+            overflow: visible;
+          }
+          .share-button {
+            transform: scale(1) !important;
+            transition: transform 0.2s ease-in-out !important;
+          }
+          .share-button:hover {
+            transform: scale(1.02) !important;
+          }
+
+          .share-link {
+            @apply block w-7 h-7;
+
+            &:hover {
+            }
+          }
+        }
+
+        .share-link {
+          display: inline-block;
+          transition: transform 0.2s ease-in-out !important;
+
+          &:hover {
+            transform: scale(1.2) !important;
+          }
+        }
+      }
+    }
+
+    &__share-links {
+      @apply flex flex-wrap gap-2;
+    }
+
+    .share-link {
+      @apply transition-all duration-300;
+      &:after {
+        content: none;
+      }
+      img {
+        @apply w-7 h-7 filter-none;
+      }
     }
   }
 }

resources/js/singles/share-button.ts

@@ -0,0 +1,14 @@
+export default function handleShareButton() {
+  const shareButton = document.querySelector('.socials-buttons__button--share');
+  if (!shareButton) return;
+
+  shareButton.addEventListener('click', () => {
+    const isOpen = shareButton.classList.contains('is-open');
+    console.log(isOpen);
+    if (!isOpen) {
+      shareButton.classList.add('is-open');
+    } else {
+      shareButton.classList.remove('is-open');
+    }
+  });
+}

resources/js/singles/singles.ts

@@ -2,6 +2,7 @@ import handleIndexPanel from './index-panel';
 import handleFootnoteFormat from './footnote-format';
 import handleCiteButton from './cite-button';
 import handleLikeButton from './like-button.ts';
+import handleShareButton from './share-button.ts';
 import { handleArticleToolbar } from './article-toolbar.ts';
 import { handleRevueToolbar } from './revue-toolbar.ts';
 
@@ -16,4 +17,5 @@ export default function singles(): void {
   handleLikeButton();
   handleArticleToolbar();
   handleRevueToolbar();
+  handleShareButton();
 }

template-parts/post-header.php

@@ -68,6 +68,10 @@ $likes_count = get_post_likes_count($post_id);
 					</div>
 				<?php endif; ?>
 				<div class="socials-buttons">
+					<?php
+					$shareUrls = build_share_urls();
+					write_log($shareUrls);
+					?>
 					<button class="socials-buttons__button socials-buttons__button--cite" <?php echo empty($citeReference) ? 'disabled' : ''; ?> title="<?php echo empty($citeReference) ? 'Citation non disponible' : 'Copier la citation'; ?>">
 						<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-citer-article.svg" alt="">
 						Citer
@@ -79,8 +83,30 @@ $likes_count = get_post_likes_count($post_id);
 
 					</button>
 					<button class="socials-buttons__button socials-buttons__button--share" data-share-url="<?php echo get_the_permalink(); ?>">
-						<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-partager-social.svg" alt="">
+						<img class="share-icon" src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-partager-social.svg" alt="">
+
+
 						Partager
+
+						<ul class="socials-buttons__share-links">
+							<li class="share-button share-button--facebook">
+								<a href='<?php echo  $shareUrls['Facebook'] ?>' class="share-link" target="_blank" title="<?php echo __("Partager ce contenu sur ", "dynamiques") . "Facebook" ?>">
+									<img class="social-icon" src="<?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-facebook.svg' ?>" alt="">
+								</a>
+							</li>
+							<li class="share-button share-button--twitter-x">
+								<a href='<?php echo  $shareUrls['Twitter-X'] ?>' class="share-link" target="_blank" title="<?php echo __("Partager ce contenu sur ", "dynamiques") . "Twitter-X" ?>">
+									<img class="social-icon" src="<?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-x.svg' ?>" alt="">
+								</a>
+							</li>
+							<li class="share-button share-button--linkedin">
+								<a href='<?php echo  $shareUrls['LinkedIn'] ?>' class="share-link" target="_blank" title="<?php echo __("Partager ce contenu sur ", "dynamiques") . "LinkedIn" ?>">
+									<img class="social-icon" src="<?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-linkedin.svg' ?>" alt="">
+								</a>
+							</li>
+
+
+						</ul>
 					</button>
 				</div>
 			</div>
@@ -88,29 +114,3 @@ $likes_count = get_post_likes_count($post_id);
 
 	</div>
 </section>
-
-
-
-<?php
-$published = $args['published'] ?? null;
-$modified = $args['modified'] ?? null;
-
-
-$shareUrls = build_share_urls();
-write_log($shareUrls);
-?>
-
-<div class="post-infos-capsule">
-
-	<ul class="post-infos-capsule__share">
-		<?php foreach ($shareUrls as $key => $shareUrl) : ?>
-			<li class="share-button share-button--<?php echo  $key ?>">
-				<a href='<?php echo  $shareUrl ?>' class="share-link" target="_blank" title="<?php echo __("Partager ce contenu sur ", "homegrade-theme__texte-fonctionnel") . $key ?>">
-				</a>
-			</li>
-		<?php endforeach; ?>
-	</ul>
-
-
-
-</div>