From 5853237d6e870083210120b275672f9673463735 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 28 Aug 2024 12:30:04 +0200
Subject: [PATCH] add sidebar to etf page

---
 src/routes/etf/etf-providers/+layout.svelte | 73 ++++++++++++++++-
 src/routes/etf/new-launches/+page.svelte    | 88 ++++++++++++++++-----
 2 files changed, 139 insertions(+), 22 deletions(-)

diff --git a/src/routes/etf/etf-providers/+layout.svelte b/src/routes/etf/etf-providers/+layout.svelte
index 286a7248..a730dd8e 100644
--- a/src/routes/etf/etf-providers/+layout.svelte
+++ b/src/routes/etf/etf-providers/+layout.svelte
@@ -3,7 +3,9 @@
     import { page } from '$app/stores';
     import logo from '$lib/images/provider_logo.png';
     import { formatETFName } from '$lib/utils';
-        
+    import ArrowLogo from "lucide-svelte/icons/move-up-right";
+
+    export let data;
     let currentPath = '';
 
     $: {
@@ -58,8 +60,16 @@
 
 
 
-<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
+<div class="w-full overflow-hidden m-auto mt-5">
+
+<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
+    <div class="relative flex justify-center items-start overflow-hidden w-full">
+
+
+        <main class="w-full lg:w-3/4 lg:pr-5">
+            
+            <div class="w-full  m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
 
     <!-- Start Column -->
     <div>
@@ -119,9 +129,64 @@
     
     </div>
 
+     
+</main>
 
 
+<aside class="hidden lg:block relative fixed w-1/4 ml-4">        
+
+  {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
+  <div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Pro Subscription
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Upgrade now for unlimited access to all data and tools.
+          </span>
+      </div>
+  </div>
+  {/if}
+
+  <div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Wallstreet Analyst
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Get the latest top Wall Street analyst ratings.
+          </span>
+      </div>
+  </div>
+
+  <div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Congress Trading
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Get the latest top Congress trading insights.
+          </span>
+      </div>
+  </div>
+
+</aside>
+
+</div>
+</div>
+
+
+</div>
+
 
 
 </section>
-
diff --git a/src/routes/etf/new-launches/+page.svelte b/src/routes/etf/new-launches/+page.svelte
index 78f23a43..988385e1 100644
--- a/src/routes/etf/new-launches/+page.svelte
+++ b/src/routes/etf/new-launches/+page.svelte
@@ -3,25 +3,13 @@ import { goto } from '$app/navigation';
 import { numberOfUnreadNotification, screenWidth } from '$lib/store';
 import { abbreviateNumber } from '$lib/utils';
 import logo from '$lib/images/new_launcher_logo.png';
-    
+import ArrowLogo from "lucide-svelte/icons/move-up-right";
+
 export let data;
 
 let etfData = data?.getETFNewLaunches;
 
-
-
-let charNumber = 50;
-
-$: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 30;
-    }
-    else {
-    charNumber = 30;
-    }
-}
-
+$: charNumber = $screenWidth < 640 ? 30 : 40
 </script>
         
             
@@ -55,8 +43,16 @@ $: {
         </ul>
     </div>
 
-  <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto p-10 mt-3 sm:mb-8">
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
+    <div class="w-full overflow-hidden m-auto mt-5">
+
+      <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
+          <div class="relative flex justify-center items-start overflow-hidden w-full">
+      
+      
+              <main class="w-full lg:w-3/4 lg:pr-5">
+                  
+                  <div class="w-full  m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
   
       <!-- Start Column -->
       <div>
@@ -173,10 +169,66 @@ $: {
     </div>
   </div>
 
+ 
+</main>
 
 
+<aside class="hidden lg:block relative fixed w-1/4 ml-4">        
+
+  {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
+  <div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Pro Subscription
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Upgrade now for unlimited access to all data and tools.
+          </span>
+      </div>
+  </div>
+  {/if}
+
+  <div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Wallstreet Analyst
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Get the latest top Wall Street analyst ratings.
+          </span>
+      </div>
+  </div>
+
+  <div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Congress Trading
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Get the latest top Congress trading insights.
+          </span>
+      </div>
+  </div>
+
+</aside>
+
+</div>
+</div>
+
+
+</div>
+
 
 
 </section>
-            
+
             
\ No newline at end of file