From 1ddafdc962b0018fdb5c807fa746360b756bc788 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 12 Aug 2024 10:15:41 +0200
Subject: [PATCH] fix navbar of stocks, etf and crypto page

---
 src/routes/+error.svelte                    |   3 +-
 src/routes/crypto/[tickerID]/+layout.svelte |   9 +-
 src/routes/etf/[tickerID]/+layout.svelte    |   8 +-
 src/routes/stocks/[tickerID]/+layout.svelte | 144 ++++++++++----------
 4 files changed, 84 insertions(+), 80 deletions(-)

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 9f1ea890..b4ea76be 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,6 +1,5 @@
 <script>
     import { page } from '$app/stores';
-    import { onMount } from 'svelte';
     //import { trackError,trackButtonClick } from '$lib/mixpanel';
     import logo from '$lib/images/stocknear_logo.png';
 
@@ -13,7 +12,7 @@
     <div class="bg-[#09090B] mt-10 m-auto overflow-hidden w-full max-w-4xl">
         <div class="lg:flex">
             <div class="mt-10 mb-5 m-auto">
-                <h1 class="text-white text-center text-4xl font-bold mb-5">
+                <h1 class="text-white text-center text-2xl sm:text-4xl font-bold mb-5">
                    Page Not found - {$page?.status}
                    <!--Server Maintenance-->
                 </h1>
diff --git a/src/routes/crypto/[tickerID]/+layout.svelte b/src/routes/crypto/[tickerID]/+layout.svelte
index f53f125d..3d0775ca 100644
--- a/src/routes/crypto/[tickerID]/+layout.svelte
+++ b/src/routes/crypto/[tickerID]/+layout.svelte
@@ -460,9 +460,9 @@ $: {
               <div class="w-full">
                   <div class="sm:flex sm:justify-start w-full">
            <!--Start Mobile Navbar-->
-           <div class="navbar w-screen sticky top-0 mt-4 z-30 bg-[#09090B] sm:hidden ">
-      
-            <div class="{isScrolled ? 'border-b border-slate-800 ease-in' : 'ease-out'} m-auto w-full">
+           <div class="fixed top-0 left-0 right-0 z-20 bg-[#09090B] sm:hidden">
+            <div class="navbar w-full px-4 py-2">
+              <div class="{isScrolled ? 'border-b border-slate-800 ease-in' : 'ease-out'} m-auto w-full">
       
                 <div class="flex-1 flex-shrink-0 flex flex-row items-center justify-between -mt-2">
       
@@ -538,11 +538,12 @@ $: {
                       
                   </div>
               </div>
+            </div>
           </div>
           <!--End Mobile Navbar-->
          
       
-          <div class="w-auto max-w-3xl lg:max-w-content 2xl:max-w-6xl px-3 sm:px-0">     
+          <div class="pt-20 sm:pt-0 w-auto max-w-3xl lg:max-w-content 2xl:max-w-6xl px-3 sm:px-0">     
                     
             <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
                 <!-- Main content -->
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index bcbab423..2a099eb0 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -487,9 +487,10 @@ $: {
               <div class="w-full">
                   <div class="sm:flex sm:justify-start w-full">
              <!--Start Mobile Navbar-->
-             <div class="navbar w-screen sticky top-0 mt-4 z-30 bg-[#09090B] sm:hidden">
+             <div class="fixed top-0 left-0 right-0 z-20 bg-[#09090B] sm:hidden">
+              <div class="navbar w-full px-4 py-2">
       
-              <div class="{isScrolled ? 'border-b border-slate-800 ease-in' : 'ease-out'} m-auto w-full">
+                <div class="{isScrolled ? 'border-b border-slate-800 ease-in' : 'ease-out'} m-auto w-full">
         
                   <div class="flex-1 flex-shrink-0 flex flex-row items-center justify-between -mt-2">
         
@@ -564,11 +565,12 @@ $: {
                         
                     </div>
                 </div>
+              </div>
             </div>
             <!--End Mobile Navbar-->
            
         
-            <div class="w-auto max-w-3xl lg:max-w-content 2xl:max-w-6xl px-3 sm:px-0">     
+            <div class="pt-20 sm:pt-0 w-auto max-w-3xl lg:max-w-content 2xl:max-w-6xl px-3 sm:px-0">     
                     
               <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
                   <!-- Main content -->
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index d27d343c..ad40b69e 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -398,96 +398,98 @@ $: isScrolled = y > 0;
 
 <body class="bg-[#09090B] pb-40 w-full max-w-screen min-h-screen sm:max-w-7xl xl:max-w-screen-2xl overflow-hidden">    
         <!-- Page wrapper -->
-        <div class="flex flex-col w-full">
+        <div class="flex flex-col w-full mt-5 relative">
             <main class="grow w-full">
                 <section class="w-full">
                     <div class="w-full">
                         <div class="sm:flex sm:justify-start w-full">
     
            <!--Start Mobile Navbar-->
-           <header class="navbar w-screen fixed sticky top-0 mt-4 z-30 bg-[#09090B] sm:hidden" style="top: 0rem;">
+           <div class="fixed top-0 left-0 right-0 z-20 bg-[#09090B] sm:hidden">
+            <div class="navbar w-full px-4 py-2">
       
-            <div class="{isScrolled ? 'border-b border-slate-800 ease-in' : 'ease-out'} m-auto w-full">
-      
-                <div class="flex-1 flex-shrink-0 flex flex-row items-center justify-between -mt-2">
-      
-                    <label on:click={() => goto('/')} class="ml-2 cursor-pointer">
-                        <svg class="w-5 h-5 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><g transform="rotate(-90 512 512)"><path fill="white" d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z"/></g></svg>
-                    </label>
-      
-                    <div class="{!isScrolled ? 'hidden' : 'flex flex-col items-center ml-6 transition-transform ease-in'}">
-                        <span class="text-white text-[0.70rem] font-medium text-opacity-[0.6]">
-                        {$stockTicker}
-                        </span>
-                        <span class="text-white font-medium text-sm">
-                          {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
-                            {$stockTicker?.includes('.DE') || $stockTicker?.includes('.F') ? `${$currentPortfolioPrice}€` : ` $${$currentPortfolioPrice}`}
-                          {:else}
-                           {data?.getStockQuote?.price}
-                          {/if}
-                        </span>
-                    </div>
-                    
-                      <!--Start Search Button-->
-                      <label on:click={loadSearchData} class="ml-auto mr-4" for="searchBarModal">
-                        <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"/></svg>
+              <div class="{isScrolled ? 'border-b border-slate-800 ease-in' : 'ease-out'} m-auto w-full">
+        
+                  <div class="flex-1 flex-shrink-0 flex flex-row items-center justify-between -mt-2">
+        
+                      <label on:click={() => goto('/')} class="ml-2 cursor-pointer">
+                          <svg class="w-5 h-5 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><g transform="rotate(-90 512 512)"><path fill="white" d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z"/></g></svg>
                       </label>
-                        <!--End Search Button-->
-      
+        
+                      <div class="{!isScrolled ? 'hidden' : 'flex flex-col items-center ml-6 transition-transform ease-in'}">
+                          <span class="text-white text-[0.70rem] font-medium text-opacity-[0.6]">
+                          {$stockTicker}
+                          </span>
+                          <span class="text-white font-medium text-sm">
+                            {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
+                              {$stockTicker?.includes('.DE') || $stockTicker?.includes('.F') ? `${$currentPortfolioPrice}€` : ` $${$currentPortfolioPrice}`}
+                            {:else}
+                            {data?.getStockQuote?.price}
+                            {/if}
+                          </span>
+                      </div>
+                      
+                        <!--Start Search Button-->
+                        <label on:click={loadSearchData} class="ml-auto mr-4" for="searchBarModal">
+                          <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"/></svg>
+                        </label>
+                          <!--End Search Button-->
+        
 
-                       <!--Start Share Button-->
-                      <label class="mr-4" on:click={() => shareContent('https://stocknear.com/stocks/'+$stockTicker)} >
-                        <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336 192h40a40 40 0 0 1 40 40v192a40 40 0 0 1-40 40H136a40 40 0 0 1-40-40V232a40 40 0 0 1 40-40h40m160-64l-80-80l-80 80m80 193V48"/></svg>
-                      </label>
-                        <!--End Share Button-->
+                        <!--Start Share Button-->
+                        <label class="mr-4" on:click={() => shareContent('https://stocknear.com/stocks/'+$stockTicker)} >
+                          <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336 192h40a40 40 0 0 1 40 40v192a40 40 0 0 1-40 40H136a40 40 0 0 1-40-40V232a40 40 0 0 1 40-40h40m160-64l-80-80l-80 80m80 193V48"/></svg>
+                        </label>
+                          <!--End Share Button-->
 
-                
-      
-                        <!--Start Watchlist-->
-                                          
-                        {#if data?.user}
-                        <div class="flex flex-col mr-4">
-                          {#if userWatchList?.length !== 0}
-                            <label for="addWatchListModal" class="cursor-pointer flex-shrink-0">
-                              {#if isTickerIncluded}
+                  
+        
+                          <!--Start Watchlist-->
+                                            
+                          {#if data?.user}
+                          <div class="flex flex-col mr-4">
+                            {#if userWatchList?.length !== 0}
+                              <label for="addWatchListModal" class="cursor-pointer flex-shrink-0">
+                                {#if isTickerIncluded}
+                                  <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#FBCE3C" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
+                                  {:else}
+                                  <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
+                                {/if}
+                              </label>
+
+                            {:else if userWatchList?.length === 0}
+                              <label on:click={() => toggleUserWatchlist('firstList')} class="cursor-pointer flex-shrink-0">
+                                {#if isTickerIncluded}
                                 <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#FBCE3C" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
                                 {:else}
                                 <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
-                              {/if}
+                                {/if}
+                            </label>
+                          
+                            {/if}
+                          </div>
+                          {:else}
+                            <label for="userLogin" class="cursor-pointer flex-shrink-0 text-white mr-4">
+                              <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>
                             </label>
-
-                          {:else if userWatchList?.length === 0}
-                            <label on:click={() => toggleUserWatchlist('firstList')} class="cursor-pointer flex-shrink-0">
-                              {#if isTickerIncluded}
-                              <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#FBCE3C" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
-                              {:else}
-                              <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
-                              {/if}
-                          </label>
-                         
                           {/if}
-                        </div>
-                        {:else}
-                          <label for="userLogin" class="cursor-pointer flex-shrink-0 text-white mr-4">
-                            <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>
-                          </label>
-                        {/if}
-                      <!--End Watchlist-->
-                      
-                      <!--Start Price Alert-->
-                      <label on:click={() => $openPriceAlert = true} for={data?.user ? 'priceAlertModal' : 'userLogin'} class="mr-2">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 inline-block mt-1" viewBox="0 0 24 24"><g fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M3 5.231L6.15 3M21 5.231L17.85 3"/><circle cx="12" cy="13" r="8"/><path d="M9.5 13h5M12 10.5v5"/></g></svg>
-                      </label>
-                      <!--End Price Alert -->
-      
-                      
-                  </div>
+                        <!--End Watchlist-->
+                        
+                        <!--Start Price Alert-->
+                        <label on:click={() => $openPriceAlert = true} for={data?.user ? 'priceAlertModal' : 'userLogin'} class="mr-2">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 inline-block mt-1" viewBox="0 0 24 24"><g fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M3 5.231L6.15 3M21 5.231L17.85 3"/><circle cx="12" cy="13" r="8"/><path d="M9.5 13h5M12 10.5v5"/></g></svg>
+                        </label>
+                        <!--End Price Alert -->
+        
+                        
+                    </div>
+              </div>
             </div>
-          </header>
+          </div>
           <!--End Mobile Navbar-->
          
       
-          <div class="w-auto max-w-3xl lg:max-w-content 2xl:max-w-6xl px-3 sm:px-0">     
+          <div class="pt-20 sm:pt-0 w-auto max-w-3xl lg:max-w-content 2xl:max-w-6xl px-3 sm:px-0">     
                     
                         <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
                             <!-- Main content -->