121 lines
3.6 KiB
Svelte
121 lines
3.6 KiB
Svelte
<script lang="ts">
|
|
import { stockTicker, screenWidth } from "$lib/store";
|
|
import { page } from "$app/stores";
|
|
|
|
export let data;
|
|
|
|
const names = data?.getBusinessMetrics?.revenue?.names || [];
|
|
const subsectionTitles = ["Overview", ...names];
|
|
|
|
const sectionMap = Object.fromEntries(
|
|
subsectionTitles?.map((title) => {
|
|
const key = title
|
|
?.toLowerCase()
|
|
?.replace(/ & /g, "-")
|
|
?.replace(/ /g, "-");
|
|
return [key, key === "overview" ? "" : key];
|
|
}),
|
|
);
|
|
|
|
let displaySubSection = "overview";
|
|
|
|
function changeSubSection(state) {
|
|
displaySubSection = state;
|
|
const path =
|
|
state === "overview" ? "/metrics" : `/metrics/${sectionMap[state]}`;
|
|
// Navigate programmatically using SvelteKit's goto function
|
|
}
|
|
|
|
function getHref(section) {
|
|
const path =
|
|
section === "overview" ? "/metrics" : `/metrics/${sectionMap[section]}`;
|
|
return `/stocks/${$stockTicker}${path}`;
|
|
}
|
|
|
|
$: {
|
|
if ($page?.url?.pathname) {
|
|
const parts = $page.url.pathname.split("/");
|
|
|
|
// Filter out empty strings from URL parts and look for the section
|
|
const foundSection = parts.find(
|
|
(part) => part && Object.values(sectionMap).includes(part),
|
|
);
|
|
|
|
// If a valid section is found in the URL, update the displaySubSection
|
|
displaySubSection =
|
|
Object.keys(sectionMap).find(
|
|
(key) => sectionMap[key] === foundSection,
|
|
) || "overview";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Rest of the component remains the same -->
|
|
|
|
<section
|
|
class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
|
|
>
|
|
<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"
|
|
>
|
|
<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"
|
|
>
|
|
{#each subsectionTitles?.slice(0, 4) as title}
|
|
{@const sectionKey = title
|
|
.toLowerCase()
|
|
.replace(/ & /g, "-")
|
|
.replace(/ /g, "-")}
|
|
<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>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<slot />
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.scrollbar {
|
|
display: grid;
|
|
grid-gap: 18px;
|
|
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
|
|
grid-auto-flow: column;
|
|
overflow-x: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: transparent transparent;
|
|
}
|
|
|
|
.scrollbar::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.scrollbar::-webkit-scrollbar-thumb {
|
|
background: transparent;
|
|
}
|
|
</style>
|