AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

navbar fix

Browse Source
This commit is contained in:
MuslemRahimi 2024-11-01 16:57:59 +01:00
parent 4237639728
commit c4ddd78c51
6 changed files with 230 additions and 417 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

219
src/routes/stocks/[tickerID]/+layout.svelte
View File

@ -742,149 +742,98 @@ function handleTypeOfTrade(state:string)
<!--Start Ticker Section--> <!--Start Ticker Section-->
<!--<div class="w-full max-w-3xl sm:max-w-2xl m-auto pt-2 pb-5 sm:pl-3 sticky z-20 bg-[#09090B]" style="top: {$screenWidth < 520 && $isScrollingUp ? '4rem' : '0rem'};">--> <!--<div class="w-full max-w-3xl sm:max-w-2xl m-auto pt-2 pb-5 sm:pl-3 sticky z-20 bg-[#09090B]" style="top: {$screenWidth < 520 && $isScrollingUp ? '4rem' : '0rem'};">-->
<div <nav
class="-ml-2 sm:ml-4 w-screen sm:w-full overflow-x-scroll md:overflow-hidden mb-2" class="sm:ml-4 border-b-[2px] overflow-x-scroll whitespace-nowrap"
> >
<ul <ul
class="pr-4 w-fit overflow-x-scroll md:overflow-hidden font-medium flex flex-row items-center bg-[#09090B] space-x-3 rtl:space-x-reverse py-2" class="flex flex-row items-center w-full text-sm sm:text-[1rem] text-white"
> >
<li class="cursor-pointer flex flex-col items-center"> <a
<a href={`/stocks/${$stockTicker}`}
href={`/stocks/${$stockTicker}`} on:click={() => changeSection("overview")}
on:click={() => changeSection("overview")} class="p-2 px-5 cursor-pointer {displaySection ===
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'overview'
'overview' ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
? 'text-white ' : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
: 'bg-[#09090B]'}" >
> Overview
Overview </a>
</a> <a
<div href={`/stocks/${$stockTicker}/financials`}
class="{displaySection === 'overview' on:click={() => changeSection("financials")}
? 'bg-[#75D377]' class="p-2 px-5 cursor-pointer {displaySection ===
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]" 'financials'
/> ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
</li> : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
<li class="cursor-pointer flex flex-col items-center"> >
<a Financials
href={`/stocks/${$stockTicker}/financials`} </a>
on:click={() => changeSection("financials")} <a
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === href={`/stocks/${$stockTicker}/statistics`}
'financials' on:click={() => changeSection("statistics")}
? 'text-white ' class="p-2 px-5 cursor-pointer {displaySection ===
: 'bg-[#09090B]'}">Financials</a 'statistics'
> ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
<div : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
class="{displaySection === 'financials' >Statistics</a
? 'bg-[#75D377]' >
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
/>
</li>
<li class="cursor-pointer flex flex-col items-center">
<a
href={`/stocks/${$stockTicker}/statistics`}
on:click={() => changeSection("statistics")}
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
'statistics'
? 'text-white '
: 'bg-[#09090B]'}">Statistics</a
>
<div
class="{displaySection === 'statistics'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
/>
</li>
{#if ["amd", "save", "ba", "adbe", "nflx", "pltr", "msft", "meta", "tsla", "nvda", "aapl", "gme"]?.includes($stockTicker?.toLowerCase())}
<li class="cursor-pointer flex flex-col items-center">
<a
href={`/stocks/${$stockTicker}/metrics`}
on:click={() => changeSection("metrics")}
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
'metrics'
? 'text-white '
: 'bg-[#09090B]'}">Metrics</a
>
<div {#if ["amd", "save", "ba", "adbe", "nflx", "pltr", "msft", "meta", "tsla", "nvda", "aapl", "gme"]?.includes($stockTicker?.toLowerCase())}
class="{displaySection === 'metrics' <a
? 'bg-[#75D377]' href={`/stocks/${$stockTicker}/metrics`}
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.8rem]" on:click={() => changeSection("metrics")}
/> class="p-2 px-5 cursor-pointer {displaySection ===
</li> 'metrics'
? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
>Metrics</a
>
{/if} {/if}
{#if Object?.keys(data?.getAnalystRating ?? {})?.length > 0} {#if Object?.keys(data?.getAnalystRating ?? {})?.length > 0}
<li class="cursor-pointer flex flex-col items-center"> <a
<a href={`/stocks/${$stockTicker}/forecast`}
href={`/stocks/${$stockTicker}/forecast`} on:click={() => changeSection("forecast")}
on:click={() => changeSection("forecast")} class="p-2 px-5 cursor-pointer {displaySection ===
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'forecast'
'forecast' ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
? 'text-white ' : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
: 'bg-[#09090B]'}" >
> Forecast
Forecast </a>
</a>
<div
class="{displaySection === 'forecast'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
/>
</li>
{/if} {/if}
<li class="cursor-pointer flex flex-col items-center"> <a
<a href={`/stocks/${$stockTicker}/options`}
href={`/stocks/${$stockTicker}/options`} on:click={() => changeSection("options")}
on:click={() => changeSection("options")} class="p-2 px-5 cursor-pointer {displaySection ===
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'options'
'options' ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
? 'text-white ' : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
: 'bg-[#09090B]'}" >
> Options
Options </a>
</a> <a
<div href={`/stocks/${$stockTicker}/insider`}
class="{displaySection === 'options' on:click={() => changeSection("insider")}
? 'bg-[#75D377]' class="p-2 px-5 cursor-pointer {displaySection ===
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]" 'insider'
/> ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
</li> : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
<li class="cursor-pointer flex flex-col items-center"> >
<a Insider
href={`/stocks/${$stockTicker}/insider`} </a>
on:click={() => changeSection("insider")} <a
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === href={`/stocks/${$stockTicker}/dividends`}
'insider' on:click={() => changeSection("dividends")}
? 'text-white ' class="p-2 px-5 cursor-pointer {displaySection ===
: 'bg-[#09090B]'}" 'dividends'
> ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
Insider : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
</a> >
<div Dividends
class="{displaySection === 'insider' </a>
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
/>
</li>
<li class="cursor-pointer flex flex-col items-center">
<a
href={`/stocks/${$stockTicker}/dividends`}
on:click={() => changeSection("dividends")}
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
'dividends'
? 'text-white '
: 'bg-[#09090B]'}"
>
Dividends
</a>
<div
class="{displaySection === 'dividends'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
/>
</li>
</ul> </ul>
</div> </nav>
<!--Start-Main Content--> <!--Start-Main Content-->
<slot /> <slot />

118
src/routes/stocks/[tickerID]/financials/+layout.svelte
View File

@ -53,85 +53,51 @@
> >
<main class="w-full {$coolMode ? 'lg:w-3/4' : 'w-full'} "> <main class="w-full {$coolMode ? 'lg:w-3/4' : 'w-full'} ">
<div class="m-auto"> <div class="m-auto">
<div <nav
class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640 class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
? 'overflow-auto scrollbar'
: 'no-scrollbar'} mb-2"
> >
<ul <ul class="flex flex-row items-center w-full text-white">
class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2" <a
> href={`/stocks/${$stockTicker}/financials`}
<li class="cursor-pointer flex flex-col items-center"> on:click={() => changeSubSection("income")}
<a class="p-2 px-5 cursor-pointer {displaySubSection === 'income'
href={`/stocks/${$stockTicker}/financials`} ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
on:click={() => changeSubSection("income")} : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === >
'income' Income
? 'text-white ' </a>
: 'bg-[#09090B]'}"
>
Income
</a>
<div
class="{displaySubSection === 'income'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
/>
</li>
<li class="cursor-pointer flex flex-col items-center">
<a
href={`/stocks/${$stockTicker}/financials/balance-sheet`}
on:click={() => changeSubSection("balance-sheet")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'balance-sheet'
? 'text-white '
: 'bg-[#09090B]'}"
>
Balance Sheet
</a>
<div
class="{displaySubSection === 'balance-sheet'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
/>
</li>
<li class="cursor-pointer flex flex-col items-center">
<a
href={`/stocks/${$stockTicker}/financials/cash-flow`}
on:click={() => changeSubSection("cash-flow")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'cash-flow'
? 'text-white '
: 'bg-[#09090B]'}"
>
Cashflow
</a>
<div
class="{displaySubSection === 'cash-flow'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
/>
</li>
<li class="cursor-pointer flex flex-col items-center"> <a
<a href={`/stocks/${$stockTicker}/financials/balance-sheet`}
href={`/stocks/${$stockTicker}/financials/ratios`} on:click={() => changeSubSection("balance-sheet")}
on:click={() => changeSubSection("ratios")} class="p-2 px-5 cursor-pointer {displaySubSection ===
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'balance-sheet'
'ratios' ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
? 'text-white ' : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
: 'bg-[#09090B]'}" >
> Balance Sheet
Ratios </a>
</a> <a
<div href={`/stocks/${$stockTicker}/financials/cash-flow`}
class="{displaySubSection === 'ratios' on:click={() => changeSubSection("cash-flow")}
? 'bg-[#75D377]' class="p-2 px-5 cursor-pointer {displaySubSection ===
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]" 'cash-flowt'
/> ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
</li> : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
>
Cashflow
</a>
<a
href={`/stocks/${$stockTicker}/financials/ratios`}
on:click={() => changeSubSection("ratios")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'ratios'
? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
>
Ratios
</a>
</ul> </ul>
</div> </nav>
</div> </div>
<slot /> <slot />
</main> </main>

84
src/routes/stocks/[tickerID]/forecast/+layout.svelte
View File

@ -58,69 +58,31 @@
<div class="m-auto h-full overflow-hidden"> <div class="m-auto h-full overflow-hidden">
<main class="w-full"> <main class="w-full">
<div class="m-auto"> <div class="m-auto">
<div <nav
class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640 class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
? 'overflow-auto scrollbar'
: 'no-scrollbar'} mb-2"
> >
<ul <ul class="flex flex-row items-center w-full text-white">
class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2" <a
> href={`/stocks/${$stockTicker}/forecast`}
<li class="cursor-pointer flex flex-col items-center"> on:click={() => changeSubSection("overview")}
<a class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
href={`/stocks/${$stockTicker}/forecast`} ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
on:click={() => changeSubSection("overview")} : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === >
'overview' Overview
? 'text-white ' </a>
: 'bg-[#09090B]'}"
> <a
Overview href={`/stocks/${$stockTicker}/forecast/analyst`}
</a> on:click={() => changeSubSection("analyst")}
<div class="p-2 px-5 cursor-pointer {displaySubSection === 'analyst'
class="{displaySubSection === 'overview' ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
? 'bg-[#75D377]' : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" >
/> Analysts Ratings
</li> </a>
<!--
<li class="cursor-pointer flex flex-col items-center">
<a
href={`/stocks/${$stockTicker}/forecast/ai`}
on:click={() => changeSubSection("ai")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'ai'
? 'text-white '
: 'bg-[#09090B]'}"
>
AI
</a>
<div
class="{displaySubSection === 'ai'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
/>
</li>
-->
<li class="cursor-pointer flex flex-col items-center">
<a
href={`/stocks/${$stockTicker}/forecast/analyst`}
on:click={() => changeSubSection("analyst")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'analyst'
? 'text-white '
: 'bg-[#09090B]'}"
>
Analysts Ratings
</a>
<div
class="{displaySubSection === 'analyst'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
/>
</li>
</ul> </ul>
</div> </nav>
</div> </div>
</main> </main>

98
src/routes/stocks/[tickerID]/insider/+layout.svelte
View File

@ -77,67 +77,43 @@
class="relative flex justify-center items-start overflow-hidden w-full" class="relative flex justify-center items-start overflow-hidden w-full"
> >
<main class="w-full lg:w-3/4"> <main class="w-full lg:w-3/4">
<div <nav
class="sm:ml-8 w-screen sm:w-full {$screenWidth < 640 class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
? 'overflow-auto scrollbar no-scrollbar'
: ''} mb-2"
> >
<ul <ul class="flex flex-row items-center w-full text-white">
class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll space-x-6 rtl:space-x-reverse py-2" <a
> href={`/stocks/${$stockTicker}/insider`}
<li class="cursor-pointer flex flex-col items-center"> on:click={() => changeSubSection("insider")}
<a class="p-2 px-5 cursor-pointer {displaySubSection === 'insider'
href={`/stocks/${$stockTicker}/insider`} ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
on:click={() => changeSubSection("insider")} : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === >
'insider' Insider Trading
? 'text-white ' </a>
: 'bg-[#09090B]'}"
> <a
Insider Trading href={`/stocks/${$stockTicker}/insider/congress-trading`}
</a> on:click={() => changeSubSection("congress-trading")}
<div class="p-2 px-5 cursor-pointer {displaySubSection ===
class="{displaySubSection === 'insider' 'congress-trading'
? 'bg-[#75D377]' ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]" : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
/> >
</li> Congress Trading
<li class="cursor-pointer flex flex-col items-center"> </a>
<a <a
href={`/stocks/${$stockTicker}/insider/congress-trading`} href={`/stocks/${$stockTicker}/insider/transcripts`}
on:click={() => changeSubSection("congress-trading")} on:click={() => changeSubSection("transcripts")}
class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection ===
'congress-trading' 'transcripts'
? 'text-white ' ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
: 'bg-[#09090B]'}" : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
> >
Congress Trading Transcripts
</a> </a>
<div
class="{displaySubSection === 'congress-trading'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]"
/>
</li>
<li class="cursor-pointer flex flex-col items-center">
<a
href={`/stocks/${$stockTicker}/insider/transcripts`}
on:click={() => changeSubSection("transcripts")}
class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'transcripts'
? 'text-white '
: 'bg-[#09090B]'}"
>
Transcripts
</a>
<div
class="{displaySubSection === 'transcripts'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
/>
</li>
</ul> </ul>
</div> </nav>
<slot /> <slot />
</main> </main>
@ -165,13 +141,13 @@
{#if newsList?.length !== 0} {#if newsList?.length !== 0}
<div <div
class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer" class="w-full sm:hover:text-white text-white border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
> >
<div class="p-4 text-sm"> <div class="p-4 text-sm">
<h3 class="text-lg text-white font-semibold mb-3"> <h3 class="text-lg text-white font-semibold mb-3">
{$stockTicker} News {$stockTicker} News
</h3> </h3>
<ul class="text-gray-200"> <ul class="text-white">
{#each newsList?.slice(0, 10) as item} {#each newsList?.slice(0, 10) as item}
<li class="mb-3 last:mb-1"> <li class="mb-3 last:mb-1">
{formatDate(item?.publishedDate)} ago - {formatDate(item?.publishedDate)} ago -

38
src/routes/stocks/[tickerID]/metrics/+layout.svelte
View File

@ -59,14 +59,10 @@
<div class="m-auto h-full overflow-hidden"> <div class="m-auto h-full overflow-hidden">
<main class="w-fit sm:w-full sm:max-w-2xl"> <main class="w-fit sm:w-full sm:max-w-2xl">
<div class="m-auto"> <div class="m-auto">
<div <nav
class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640 class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
? 'overflow-auto scrollbar'
: ''} mb-2"
> >
<ul <ul class="flex flex-row items-center w-full text-white">
class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2"
>
{#each subsectionTitles?.slice(0, 4) as title} {#each subsectionTitles?.slice(0, 4) as title}
{@const sectionKey = title {@const sectionKey = title
?.toLowerCase() ?.toLowerCase()
@ -75,26 +71,18 @@
?.replace(/-{2,}/g, "-") // Replace multiple dashes with single dash ?.replace(/-{2,}/g, "-") // Replace multiple dashes with single dash
?.replace(/^-|-$/g, "") // Remove leading/trailing dashes ?.replace(/^-|-$/g, "") // Remove leading/trailing dashes
?.trim()} ?.trim()}
<li class="cursor-pointer flex flex-col items-center"> <a
<a href={getHref(sectionKey)}
href={getHref(sectionKey)} on:click={() => changeSubSection(sectionKey)}
on:click={() => changeSubSection(sectionKey)} class="p-2 px-5 cursor-pointer {displaySubSection === sectionKey
class="px-2 text-sm sm:text-[1rem] whitespace-nowrap font-medium text-gray-400 sm:hover:text-white {displaySubSection === ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
sectionKey : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
? 'text-white' >
: 'bg-[#09090B]'}" {title}
> </a>
{title}
</a>
<div
class="{displaySubSection === sectionKey
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]"
/>
</li>
{/each} {/each}
</ul> </ul>
</div> </nav>
</div> </div>
</main> </main>

90
src/routes/stocks/[tickerID]/statistics/+layout.svelte
View File

@ -43,68 +43,40 @@
<div class="m-auto h-full overflow-hidden"> <div class="m-auto h-full overflow-hidden">
<main class="w-full"> <main class="w-full">
<div class="m-auto"> <div class="m-auto">
<div <nav
class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640 class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
? 'overflow-auto scrollbar'
: 'no-scrollbar'} mb-2"
> >
<ul <ul class="flex flex-row items-center w-full text-white">
class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2" <a
> href={`/stocks/${$stockTicker}/statistics`}
<li class="cursor-pointer flex flex-col items-center"> on:click={() => changeSubSection("overview")}
<a class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
href={`/stocks/${$stockTicker}/statistics`} ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
on:click={() => changeSubSection("overview")} : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === >
'overview' Overview
? 'text-white ' </a>
: 'bg-[#09090B]'}"
>
Overview
</a>
<div
class="{displaySubSection === 'overview'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
/>
</li>
<li class="cursor-pointer flex flex-col items-center"> <a
<a href={`/stocks/${$stockTicker}/statistics/market-cap`}
href={`/stocks/${$stockTicker}/statistics/market-cap`} on:click={() => changeSubSection("market-cap")}
on:click={() => changeSubSection("market-cap")} class="p-2 px-5 cursor-pointer {displaySubSection === 'market-cap'
class="whitespace-nowrap px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
'market-cap' : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
? 'text-white ' >
: 'bg-[#09090B]'}" Market Cap
> </a>
Market Cap <a
</a> href={`/stocks/${$stockTicker}/statistics/employees`}
<div on:click={() => changeSubSection("employees")}
class="{displaySubSection === 'market-cap' class="p-2 px-5 cursor-pointer {displaySubSection === 'employees'
? 'bg-[#75D377]' ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]" : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
/> >
</li> Employees
<li class="cursor-pointer flex flex-col items-center"> </a>
<a
href={`/stocks/${$stockTicker}/statistics/employees`}
on:click={() => changeSubSection("employees")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'employees'
? 'text-white '
: 'bg-[#09090B]'}"
>
Employees
</a>
<div
class="{displaySubSection === 'employees'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
/>
</li>
</ul> </ul>
</div> </nav>
</div> </div>
</main> </main>