chore: download button link

src/components/RoadmapHeader.astro

@@ -20,7 +20,16 @@ export interface Props {
   hasTopics?: boolean;
 }
 
-const { title, description, roadmapId, tnsBannerLink, isUpcoming = false, hasSearch = false, note, hasTopics = false } = Astro.props;
+const {
+  title,
+  description,
+  roadmapId,
+  tnsBannerLink,
+  isUpcoming = false,
+  hasSearch = false,
+  note,
+  hasTopics = false,
+} = Astro.props;
 
 const isRoadmapReady = !isUpcoming;
 ---
@@ -30,14 +39,14 @@ const isRoadmapReady = !isUpcoming;
 <SubscribePopup />
 
 <div class='border-b'>
-  <div class='py-5 sm:py-12 container relative'>
+  <div class='container relative py-5 sm:py-12'>
     <YouTubeAlert />
 
     <div class='mt-0 mb-3 sm:mb-4 sm:mt-4'>
-      <h1 class='text-2xl sm:text-4xl mb-0.5 sm:mb-2 font-bold'>
+      <h1 class='mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl'>
         {title}
       </h1>
-      <p class='text-gray-500 text-sm sm:text-lg'>{description}</p>
+      <p class='text-sm text-gray-500 sm:text-lg'>{description}</p>
     </div>
 
     <div class='flex justify-between'>
@@ -47,7 +56,7 @@ const isRoadmapReady = !isUpcoming;
             <>
               <a
                 href='/roadmaps'
-                class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600'
+                class='rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm'
                 aria-label='Back to All Roadmaps'
               >
                 &larr;<span class='hidden sm:inline'>&nbsp;All Roadmaps</span>
@@ -55,21 +64,38 @@ const isRoadmapReady = !isUpcoming;
 
               {isRoadmapReady && (
                 <button
+                  id='download-button'
                   data-popup='login-popup'
-                  class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
+                  class='inline-flex items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
                   aria-label='Download Roadmap'
                   ga-category='Subscription'
                   ga-action='Clicked Popup Opener'
                   ga-label='Download Roadmap Popup'
                 >
                   <Icon icon='download' />
-                  <span class='hidden sm:inline ml-2'>Download</span>
+                  <span class='ml-2 hidden sm:inline'>Download</span>
                 </button>
               )}
 
+              {isRoadmapReady && (
+                <a
+                  id='download-link'
+                  class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
+                  aria-label='Download Roadmap'
+                  ga-category='Subscription'
+                  ga-action='Clicked Popup Opener'
+                  ga-label='Download Roadmap Popup'
+                  href='/pdfs'
+                >
+                  <Icon icon='download' />
+                  <span class='ml-2 hidden sm:inline'>Download</span>
+                </a>
+              )}
+
               <button
+                id='subscribe-button'
                 data-popup='login-popup'
-                class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
+                class='inline-flex items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
                 aria-label='Subscribe for Updates'
                 ga-category='Subscription'
                 ga-action='Clicked Popup Opener'
@@ -86,7 +112,7 @@ const isRoadmapReady = !isUpcoming;
           hasSearch && (
             <a
               href={`/${roadmapId}`}
-              class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600'
+              class='rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm'
               aria-label='Back to Visual Roadmap'
             >
               &larr;
@@ -101,7 +127,7 @@ const isRoadmapReady = !isUpcoming;
           <a
             href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
             target='_blank'
-            class='inline-flex items-center justify-center bg-gray-500 text-white py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-gray-600'
+            class='inline-flex items-center justify-center rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm'
             aria-label='Suggest Changes'
           >
             <Icon icon='comment' class='h-3 w-3' />
@@ -113,10 +139,30 @@ const isRoadmapReady = !isUpcoming;
     </div>
 
     <!-- Desktop: Roadmap Resources - Alert -->
-    {hasTopics && <RoadmapHint roadmapId={roadmapId} tnsBannerLink={tnsBannerLink} />}
+    {
+      hasTopics && (
+        <RoadmapHint roadmapId={roadmapId} tnsBannerLink={tnsBannerLink} />
+      )
+    }
 
     {hasSearch && <TopicSearch />}
   </div>
 </div>
 
 {note && <RoadmapNote text={note} />}
+
+<script>
+  import Cookies from 'js-cookie';
+  import { TOKEN_COOKIE_NAME } from '../lib/utils';
+
+  const subscribeButton = document.getElementById('subscribe-button');
+  const downloadButton = document.getElementById('download-button');
+  const downloadLink = document.getElementById('download-link');
+  const token = Cookies.get(TOKEN_COOKIE_NAME);
+
+  if (token) {
+    subscribeButton?.classList.add('hidden');
+    downloadButton?.classList.add('hidden');
+    downloadLink?.classList.remove('hidden');
+  }
+</script>