From 0932f36953434dba87de6c9fa424487234a61eb2 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 31 Dec 2022 19:42:00 +0400
Subject: [PATCH] Add share icons

---
 .../InteractiveRoadmap.astro                  |  4 ++
 src/components/ShareIcons.astro               | 39 +++++++++++++------
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/components/InteractiveRoadmap/InteractiveRoadmap.astro b/src/components/InteractiveRoadmap/InteractiveRoadmap.astro
index d56b67663..550c4cc7f 100644
--- a/src/components/InteractiveRoadmap/InteractiveRoadmap.astro
+++ b/src/components/InteractiveRoadmap/InteractiveRoadmap.astro
@@ -29,6 +29,10 @@ const { roadmapId, jsonUrl, dimensions, description, roadmapPermalink } =
 
 <div class='bg-gray-50 py-4 sm:py-10'>
   <div class="max-w-[1000px] container relative">
+    <ShareIcons 
+      description={description}
+      pageUrl={`https://roadmap.sh/${roadmapId}`}
+    />
     <div
       id="roadmap-svg"
       style={`--aspect-ratio:${dimensions.width}/${dimensions.height}`}
diff --git a/src/components/ShareIcons.astro b/src/components/ShareIcons.astro
index 550585ac8..b85487a25 100644
--- a/src/components/ShareIcons.astro
+++ b/src/components/ShareIcons.astro
@@ -14,15 +14,30 @@ const hnUrl = `https://news.ycombinator.com/submitlink?t=${description}&u=${page
 const redditUrl = `https://www.reddit.com/submit?title=${description}&url=${pageUrl}`;
 ---
 
-<a href={twitterUrl} target="_blank" class="text-gray-500 hover:text-gray-700">
-  <Icon icon="twitter" />
-</a>
-<a href={fbUrl} target="_blank" class="text-gray-500 hover:text-gray-700">
-  <Icon icon="facebook" />
-</a>
-<a href={hnUrl} target="_blank" class="text-gray-500 hover:text-gray-700">
-  <Icon icon="hackernews" />
-</a>
-<a href={redditUrl} target="_blank" class="text-gray-500 hover:text-gray-700">
-  <Icon icon="reddit" />
-</a>
+<div
+  class="absolute left-[-18px] top-[110px] h-full hidden"
+  id="page-share-icons"
+>
+  <div class="flex sticky top-[100px] flex-col gap-1.5">
+    <a
+      href={twitterUrl}
+      target="_blank"
+      class="text-gray-500 hover:text-gray-700"
+    >
+      <Icon icon="twitter" />
+    </a>
+    <a href={fbUrl} target="_blank" class="text-gray-500 hover:text-gray-700">
+      <Icon icon="facebook" />
+    </a>
+    <a href={hnUrl} target="_blank" class="text-gray-500 hover:text-gray-700">
+      <Icon icon="hackernews" />
+    </a>
+    <a
+      href={redditUrl}
+      target="_blank"
+      class="text-gray-500 hover:text-gray-700"
+    >
+      <Icon icon="reddit" />
+    </a>
+  </div>
+</div>
\ No newline at end of file