diff --git a/resources/css/components/post-header.css b/resources/css/components/post-header.css
index 41bf6fd..cea500c 100644
--- a/resources/css/components/post-header.css
+++ b/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;
+ }
}
}
}
diff --git a/resources/js/singles/share-button.ts b/resources/js/singles/share-button.ts
new file mode 100644
index 0000000..864e6c6
--- /dev/null
+++ b/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');
+ }
+ });
+}
diff --git a/resources/js/singles/singles.ts b/resources/js/singles/singles.ts
index a33582f..0cfe213 100644
--- a/resources/js/singles/singles.ts
+++ b/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();
}
diff --git a/template-parts/post-header.php b/template-parts/post-header.php
index 47ba90d..34ac311 100644
--- a/template-parts/post-header.php
+++ b/template-parts/post-header.php
@@ -68,6 +68,10 @@ $likes_count = get_post_likes_count($post_id);
-
-
-
-
-
-
-
-
-
- $shareUrl) : ?>
- -
- ">
-
-
-
-
-
-
-
-