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-->
<!--<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="-ml-2 sm:ml-4 w-screen sm:w-full overflow-x-scroll md:overflow-hidden mb-2"
<nav
class="sm:ml-4 border-b-[2px] overflow-x-scroll whitespace-nowrap"
>
<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
href={`/stocks/${$stockTicker}`}
on:click={() => changeSection("overview")}
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
'overview'
? 'text-white '
: 'bg-[#09090B]'}"
>
Overview
</a>
<div
class="{displaySection === 'overview'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
/>
</li>
<li class="cursor-pointer flex flex-col items-center">
<a
href={`/stocks/${$stockTicker}/financials`}
on:click={() => changeSection("financials")}
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
'financials'
? 'text-white '
: 'bg-[#09090B]'}">Financials</a
>
<div
class="{displaySection === 'financials'
? '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
>
<a
href={`/stocks/${$stockTicker}`}
on:click={() => changeSection("overview")}
class="p-2 px-5 cursor-pointer {displaySection ===
'overview'
? '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]'}"
>
Overview
</a>
<a
href={`/stocks/${$stockTicker}/financials`}
on:click={() => changeSection("financials")}
class="p-2 px-5 cursor-pointer {displaySection ===
'financials'
? '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]'}"
>
Financials
</a>
<a
href={`/stocks/${$stockTicker}/statistics`}
on:click={() => changeSection("statistics")}
class="p-2 px-5 cursor-pointer {displaySection ===
'statistics'
? '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]'}"
>Statistics</a
>
<div
class="{displaySection === 'metrics'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.8rem]"
/>
</li>
{#if ["amd", "save", "ba", "adbe", "nflx", "pltr", "msft", "meta", "tsla", "nvda", "aapl", "gme"]?.includes($stockTicker?.toLowerCase())}
<a
href={`/stocks/${$stockTicker}/metrics`}
on:click={() => changeSection("metrics")}
class="p-2 px-5 cursor-pointer {displaySection ===
'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 Object?.keys(data?.getAnalystRating ?? {})?.length > 0}
<li class="cursor-pointer flex flex-col items-center">
<a
href={`/stocks/${$stockTicker}/forecast`}
on:click={() => changeSection("forecast")}
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
'forecast'
? 'text-white '
: 'bg-[#09090B]'}"
>
Forecast
</a>
<div
class="{displaySection === 'forecast'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
/>
</li>
<a
href={`/stocks/${$stockTicker}/forecast`}
on:click={() => changeSection("forecast")}
class="p-2 px-5 cursor-pointer {displaySection ===
'forecast'
? '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]'}"
>
Forecast
</a>
{/if}
<li class="cursor-pointer flex flex-col items-center">
<a
href={`/stocks/${$stockTicker}/options`}
on:click={() => changeSection("options")}
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
'options'
? 'text-white '
: 'bg-[#09090B]'}"
>
Options
</a>
<div
class="{displaySection === 'options'
? '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}/insider`}
on:click={() => changeSection("insider")}
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
'insider'
? 'text-white '
: 'bg-[#09090B]'}"
>
Insider
</a>
<div
class="{displaySection === 'insider'
? '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>
<a
href={`/stocks/${$stockTicker}/options`}
on:click={() => changeSection("options")}
class="p-2 px-5 cursor-pointer {displaySection ===
'options'
? '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]'}"
>
Options
</a>
<a
href={`/stocks/${$stockTicker}/insider`}
on:click={() => changeSection("insider")}
class="p-2 px-5 cursor-pointer {displaySection ===
'insider'
? '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]'}"
>
Insider
</a>
<a
href={`/stocks/${$stockTicker}/dividends`}
on:click={() => changeSection("dividends")}
class="p-2 px-5 cursor-pointer {displaySection ===
'dividends'
? '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]'}"
>
Dividends
</a>
</ul>
</div>
</nav>
<!--Start-Main Content-->
<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'} ">
<div class="m-auto">
<div
class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
? 'overflow-auto scrollbar'
: 'no-scrollbar'} mb-2"
<nav
class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
>
<ul
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"
>
<li class="cursor-pointer flex flex-col items-center">
<a
href={`/stocks/${$stockTicker}/financials`}
on:click={() => changeSubSection("income")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'income'
? 'text-white '
: '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>
<ul class="flex flex-row items-center w-full text-white">
<a
href={`/stocks/${$stockTicker}/financials`}
on:click={() => changeSubSection("income")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'income'
? '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]'}"
>
Income
</a>
<li class="cursor-pointer flex flex-col items-center">
<a
href={`/stocks/${$stockTicker}/financials/ratios`}
on:click={() => changeSubSection("ratios")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'ratios'
? 'text-white '
: 'bg-[#09090B]'}"
>
Ratios
</a>
<div
class="{displaySubSection === 'ratios'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
/>
</li>
<a
href={`/stocks/${$stockTicker}/financials/balance-sheet`}
on:click={() => changeSubSection("balance-sheet")}
class="p-2 px-5 cursor-pointer {displaySubSection ===
'balance-sheet'
? '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]'}"
>
Balance Sheet
</a>
<a
href={`/stocks/${$stockTicker}/financials/cash-flow`}
on:click={() => changeSubSection("cash-flow")}
class="p-2 px-5 cursor-pointer {displaySubSection ===
'cash-flowt'
? '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]'}"
>
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>
</div>
</nav>
</div>
<slot />
</main>

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

@ -58,69 +58,31 @@
<div class="m-auto h-full overflow-hidden">
<main class="w-full">
<div class="m-auto">
<div
class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
? 'overflow-auto scrollbar'
: 'no-scrollbar'} mb-2"
<nav
class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
>
<ul
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"
>
<li class="cursor-pointer flex flex-col items-center">
<a
href={`/stocks/${$stockTicker}/forecast`}
on:click={() => changeSubSection("overview")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'overview'
? 'text-white '
: '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
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 class="flex flex-row items-center w-full text-white">
<a
href={`/stocks/${$stockTicker}/forecast`}
on:click={() => changeSubSection("overview")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
? '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]'}"
>
Overview
</a>
<a
href={`/stocks/${$stockTicker}/forecast/analyst`}
on:click={() => changeSubSection("analyst")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'analyst'
? '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]'}"
>
Analysts Ratings
</a>
</ul>
</div>
</nav>
</div>
</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"
>
<main class="w-full lg:w-3/4">
<div
class="sm:ml-8 w-screen sm:w-full {$screenWidth < 640
? 'overflow-auto scrollbar no-scrollbar'
: ''} mb-2"
<nav
class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
>
<ul
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"
>
<li class="cursor-pointer flex flex-col items-center">
<a
href={`/stocks/${$stockTicker}/insider`}
on:click={() => changeSubSection("insider")}
class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'insider'
? 'text-white '
: 'bg-[#09090B]'}"
>
Insider Trading
</a>
<div
class="{displaySubSection === 'insider'
? '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/congress-trading`}
on:click={() => changeSubSection("congress-trading")}
class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'congress-trading'
? 'text-white '
: 'bg-[#09090B]'}"
>
Congress Trading
</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 class="flex flex-row items-center w-full text-white">
<a
href={`/stocks/${$stockTicker}/insider`}
on:click={() => changeSubSection("insider")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'insider'
? '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]'}"
>
Insider Trading
</a>
<a
href={`/stocks/${$stockTicker}/insider/congress-trading`}
on:click={() => changeSubSection("congress-trading")}
class="p-2 px-5 cursor-pointer {displaySubSection ===
'congress-trading'
? '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]'}"
>
Congress Trading
</a>
<a
href={`/stocks/${$stockTicker}/insider/transcripts`}
on:click={() => changeSubSection("transcripts")}
class="p-2 px-5 cursor-pointer {displaySubSection ===
'transcripts'
? '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]'}"
>
Transcripts
</a>
</ul>
</div>
</nav>
<slot />
</main>
@ -165,13 +141,13 @@
{#if newsList?.length !== 0}
<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">
<h3 class="text-lg text-white font-semibold mb-3">
{$stockTicker} News
</h3>
<ul class="text-gray-200">
<ul class="text-white">
{#each newsList?.slice(0, 10) as item}
<li class="mb-3 last:mb-1">
{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">
<main class="w-fit sm:w-full sm:max-w-2xl">
<div class="m-auto">
<div
class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
? 'overflow-auto scrollbar'
: ''} mb-2"
<nav
class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
>
<ul
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"
>
<ul class="flex flex-row items-center w-full text-white">
{#each subsectionTitles?.slice(0, 4) as title}
{@const sectionKey = title
?.toLowerCase()
@ -75,26 +71,18 @@
?.replace(/-{2,}/g, "-") // Replace multiple dashes with single dash
?.replace(/^-|-$/g, "") // Remove leading/trailing dashes
?.trim()}
<li class="cursor-pointer flex flex-col items-center">
<a
href={getHref(sectionKey)}
on:click={() => changeSubSection(sectionKey)}
class="px-2 text-sm sm:text-[1rem] whitespace-nowrap font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
sectionKey
? 'text-white'
: 'bg-[#09090B]'}"
>
{title}
</a>
<div
class="{displaySubSection === sectionKey
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]"
/>
</li>
<a
href={getHref(sectionKey)}
on:click={() => changeSubSection(sectionKey)}
class="p-2 px-5 cursor-pointer {displaySubSection === sectionKey
? '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]'}"
>
{title}
</a>
{/each}
</ul>
</div>
</nav>
</div>
</main>

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

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