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

119
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="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'overview' 'overview'
? '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]'}"
> >
Overview Overview
</a> </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 <a
href={`/stocks/${$stockTicker}/financials`} href={`/stocks/${$stockTicker}/financials`}
on:click={() => changeSection("financials")} on:click={() => changeSection("financials")}
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'financials' 'financials'
? 'text-white ' ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
: 'bg-[#09090B]'}">Financials</a : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
> >
<div Financials
class="{displaySection === 'financials' </a>
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
/>
</li>
<li class="cursor-pointer flex flex-col items-center">
<a <a
href={`/stocks/${$stockTicker}/statistics`} href={`/stocks/${$stockTicker}/statistics`}
on:click={() => changeSection("statistics")} on:click={() => changeSection("statistics")}
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'statistics' 'statistics'
? 'text-white ' ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
: 'bg-[#09090B]'}">Statistics</a : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
>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())} {#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 <a
href={`/stocks/${$stockTicker}/metrics`} href={`/stocks/${$stockTicker}/metrics`}
on:click={() => changeSection("metrics")} on:click={() => changeSection("metrics")}
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'metrics' 'metrics'
? 'text-white ' ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
: 'bg-[#09090B]'}">Metrics</a : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
>Metrics</a
> >
<div
class="{displaySection === 'metrics'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.8rem]"
/>
</li>
{/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="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'forecast' 'forecast'
? '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]'}"
> >
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="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'options' 'options'
? '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]'}"
> >
Options Options
</a> </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 <a
href={`/stocks/${$stockTicker}/insider`} href={`/stocks/${$stockTicker}/insider`}
on:click={() => changeSection("insider")} on:click={() => changeSection("insider")}
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'insider' 'insider'
? '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]'}"
> >
Insider Insider
</a> </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 <a
href={`/stocks/${$stockTicker}/dividends`} href={`/stocks/${$stockTicker}/dividends`}
on:click={() => changeSection("dividends")} on:click={() => changeSection("dividends")}
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'dividends' 'dividends'
? '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]'}"
> >
Dividends Dividends
</a> </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 />

70
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"
>
<li class="cursor-pointer flex flex-col items-center">
<a <a
href={`/stocks/${$stockTicker}/financials`} href={`/stocks/${$stockTicker}/financials`}
on:click={() => changeSubSection("income")} on:click={() => changeSubSection("income")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection === 'income'
'income' ? '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]'}"
> >
Income Income
</a> </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 <a
href={`/stocks/${$stockTicker}/financials/balance-sheet`} href={`/stocks/${$stockTicker}/financials/balance-sheet`}
on:click={() => changeSubSection("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 === class="p-2 px-5 cursor-pointer {displaySubSection ===
'balance-sheet' 'balance-sheet'
? '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]'}"
> >
Balance Sheet Balance Sheet
</a> </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 <a
href={`/stocks/${$stockTicker}/financials/cash-flow`} href={`/stocks/${$stockTicker}/financials/cash-flow`}
on:click={() => changeSubSection("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 === class="p-2 px-5 cursor-pointer {displaySubSection ===
'cash-flow' 'cash-flowt'
? '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]'}"
> >
Cashflow Cashflow
</a> </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/ratios`} href={`/stocks/${$stockTicker}/financials/ratios`}
on:click={() => changeSubSection("ratios")} on:click={() => changeSubSection("ratios")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection === 'ratios'
'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]'}"
> >
Ratios Ratios
</a> </a>
<div
class="{displaySubSection === 'ratios'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
/>
</li>
</ul> </ul>
</div> </nav>
</div> </div>
<slot /> <slot />
</main> </main>

60
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"
>
<li class="cursor-pointer flex flex-col items-center">
<a <a
href={`/stocks/${$stockTicker}/forecast`} href={`/stocks/${$stockTicker}/forecast`}
on:click={() => changeSubSection("overview")} on:click={() => changeSubSection("overview")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection === '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>
<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 <a
href={`/stocks/${$stockTicker}/forecast/analyst`} href={`/stocks/${$stockTicker}/forecast/analyst`}
on:click={() => changeSubSection("analyst")} on:click={() => changeSubSection("analyst")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection === 'analyst'
'analyst' ? '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]'}"
> >
Analysts Ratings Analysts Ratings
</a> </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>

58
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"
>
<li class="cursor-pointer flex flex-col items-center">
<a <a
href={`/stocks/${$stockTicker}/insider`} href={`/stocks/${$stockTicker}/insider`}
on:click={() => changeSubSection("insider")} on:click={() => changeSubSection("insider")}
class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection === 'insider'
'insider' ? '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]'}"
> >
Insider Trading Insider Trading
</a> </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 <a
href={`/stocks/${$stockTicker}/insider/congress-trading`} href={`/stocks/${$stockTicker}/insider/congress-trading`}
on:click={() => changeSubSection("congress-trading")} on:click={() => changeSubSection("congress-trading")}
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' 'congress-trading'
? '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 Congress Trading
</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 <a
href={`/stocks/${$stockTicker}/insider/transcripts`} href={`/stocks/${$stockTicker}/insider/transcripts`}
on:click={() => changeSubSection("transcripts")} 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 ===
'transcripts' '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]'}"
> >
Transcripts Transcripts
</a> </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 -

26
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
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} {#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="px-2 text-sm sm:text-[1rem] whitespace-nowrap font-medium text-gray-400 sm:hover:text-white {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection === sectionKey
sectionKey ? '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]'}"
> >
{title} {title}
</a> </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>

54
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"
>
<li class="cursor-pointer flex flex-col items-center">
<a <a
href={`/stocks/${$stockTicker}/statistics`} href={`/stocks/${$stockTicker}/statistics`}
on:click={() => changeSubSection("overview")} on:click={() => changeSubSection("overview")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection === '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>
<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="whitespace-nowrap px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection === 'market-cap'
'market-cap' ? '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]'}"
> >
Market Cap Market Cap
</a> </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 <a
href={`/stocks/${$stockTicker}/statistics/employees`} href={`/stocks/${$stockTicker}/statistics/employees`}
on:click={() => changeSubSection("employees")} on:click={() => changeSubSection("employees")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection === 'employees'
'employees' ? '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]'}"
> >
Employees Employees
</a> </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>