<div class="flex gap-8 w-full rounded-md p-6 border border-border"> <div data-mv-scrollspy="true" data-mv-scrollspy-target="#scrollable" data-mv-scrollspy-offset="100px" class="flex flex-col relative gap-2 shrink-0 w-[125px]"> <a href="#section_1" data-mv-scrollspy-anchor="true" class="mv-btn mv-btn-outline">Section 1</a><a href="#section_2" data-mv-scrollspy-anchor="true" class="mv-btn mv-btn-outline">Section 2</a><a href="#section_3" data-mv-scrollspy-anchor="true" class="mv-btn mv-btn-outline">Section 3</a><a href="#section_4" data-mv-scrollspy-anchor="true" class="mv-btn mv-btn-outline">Section 4</a> </div> <div class="mv-scrollable overflow-y-auto flex flex-col grow gap-5 h-[300px] pe-2" id="scrollable"> <div id="section_1"> <h3 class="mb-2 text-base text-mono font-semibold">Section 1</h3> <div class="rounded-lg bg-muted w-full grow h-[500px]"></div> </div> <div id="section_2"> <h3 class="mb-2 text-base text-mono font-semibold">Section 2</h3> <div class="rounded-lg bg-muted w-full grow h-[500px]"></div> </div> <div id="section_3"> <h3 class="mb-2 text-base text-mono font-semibold">Section 3</h3> <div class="rounded-lg bg-muted w-full grow h-[500px]"></div> </div> <div id="section_4"> <h3 class="mb-2 text-base text-mono font-semibold">Section 4</h3> <div class="rounded-lg bg-muted w-full grow h-[500px]"></div> </div> </div> </div>
<div class="flex gap-8 w-full rounded-xl p-6 border border-border"> <div data-mv-scrollspy="true" data-mv-scrollspy-target="#scrollable" data-mv-scrollspy-offset="150px" class="flex flex-col relative before:absolute before:start-[11px] before:top-0 before:bottom-0 before:border-s before:border-border gap-1 shrink-0 w-[125px]"> <div class="flex flex-col" data-mv-scrollspy-group="true"> <a href="#section_2_1" data-mv-scrollspy-anchor="true" class="flex items-center rounded-lg ps-2.5 pe-2.5 py-2.5 gap-1.5 text-sm font-medium text-foreground hover:text-primary mv-scrollspy-active:text-primary"><span class="flex w-1.5 relative before:absolute before:top-0 before:start-px before:size-1.5 before:rounded-full before:-translate-x-2/4 before:-translate-y-2/4"></span>Section 1</a> <div class="flex flex-col"> <a href="#section_2_1_1" data-mv-scrollspy-anchor="true" class="flex items-center rounded-lg ps-2.5 pr-2.5 py-2.5 gap-3.5 border border-transparent text-sm font-medium text-foreground mv-scrollspy-active:text-primary"><span class="flex w-1.5 relative before:absolute before:top-0 before:start-px before:size-1.5 before:rounded-full before:-translate-x-2/4 before:-translate-y-2/4 mv-scrollspy-active:before:bg-primary"></span>Sub item 1</a><a href="#section_2_1_2" data-mv-scrollspy-anchor="true" class="flex items-center rounded-lg ps-2.5 pr-2.5 py-2.5 gap-3.5 border border-transparent text-sm font-medium text-foreground mv-scrollspy-active:text-primary"><span class="flex w-1.5 relative before:absolute before:top-0 before:start-px before:size-1.5 before:rounded-full before:-translate-x-2/4 before:-translate-y-2/4 mv-scrollspy-active:before:bg-primary"></span>Sub item 2</a><a href="#section_2_1_3" data-mv-scrollspy-anchor="true" class="flex items-center rounded-lg ps-2.5 pr-2.5 py-2.5 gap-3.5 border border-transparent text-sm font-medium text-foreground mv-scrollspy-active:text-primary"><span class="flex w-1.5 relative before:absolute before:top-0 before:start-px before:size-1.5 before:rounded-full before:-translate-x-2/4 before:-translate-y-2/4 mv-scrollspy-active:before:bg-primary"></span>Sub item 3</a> </div> </div> <a href="#section_2_2" data-mv-scrollspy-anchor="true" class="flex items-center rounded-lg ps-2.5 pr-2.5 py-2.5 gap-1.5 border border-transparent text-sm font-medium text-foreground mv-scrollspy-active:text-primary"><span class="flex w-1.5 relative before:absolute before:top-0 before:start-px before:size-1.5 before:rounded-full before:-translate-x-2/4 before:-translate-y-2/4 mv-scrollspy-active:before:bg-primary"></span>Section 2</a> <div class="flex flex-col" data-mv-scrollspy-group="true"> <a href="#section_2_3" data-mv-scrollspy-anchor="true" class="flex items-center rounded-lg ps-2.5 pe-2.5 py-2.5 gap-1.5 text-sm font-medium text-foreground hover:text-primary mv-scrollspy-active:text-primary"><span class="flex w-1.5 relative before:absolute before:top-0 before:start-px before:size-1.5 before:rounded-full before:-translate-x-2/4 before:-translate-y-2/4"></span>Section 3</a> <div class="flex flex-col"> <a href="#section_2_3_1" data-mv-scrollspy-anchor="true" class="flex items-center rounded-lg ps-2.5 pr-2.5 py-2.5 gap-3.5 border border-transparent text-sm font-medium text-foreground mv-scrollspy-active:text-primary"><span class="flex w-1.5 relative before:absolute before:top-0 before:start-px before:size-1.5 before:rounded-full before:-translate-x-2/4 before:-translate-y-2/4 mv-scrollspy-active:before:bg-primary"></span>Sub item 4</a><a href="#section_2_3_2" data-mv-scrollspy-anchor="true" class="flex items-center rounded-lg ps-2.5 pr-2.5 py-2.5 gap-3.5 border border-transparent text-sm font-medium text-foreground mv-scrollspy-active:text-primary"><span class="flex w-1.5 relative before:absolute before:top-0 before:start-px before:size-1.5 before:rounded-full before:-translate-x-2/4 before:-translate-y-2/4 mv-scrollspy-active:before:bg-primary"></span>Sub item 5</a><a href="#section_2_3_3" data-mv-scrollspy-anchor="true" class="flex items-center rounded-lg ps-2.5 pr-2.5 py-2.5 gap-3.5 border border-transparent text-sm font-medium text-foreground mv-scrollspy-active:text-primary"><span class="flex w-1.5 relative before:absolute before:top-0 before:start-px before:size-1.5 before:rounded-full before:-translate-x-2/4 before:-translate-y-2/4 mv-scrollspy-active:before:bg-primary"></span>Sub item 6</a> </div> </div> <a href="#section_2_4" data-mv-scrollspy-anchor="true" class="flex items-center rounded-lg ps-2.5 pr-2.5 py-2.5 gap-1.5 border border-transparent text-sm font-medium text-foreground mv-scrollspy-active:text-primary"><span class="flex w-1.5 relative before:absolute before:top-0 before:start-px before:size-1.5 before:rounded-full before:-translate-x-2/4 before:-translate-y-2/4 mv-scrollspy-active:before:bg-primary"></span>Section 4</a> </div> <div class="mv-scrollable overflow-y-auto flex flex-col gap-5 h-[400px] grow pe-2" id="scrollable"> <div id="section_2_1_1"> <h3 class="mb-2 text-base text-mono font-semibold">Sub item 1</h3> <div class="rounded-lg bg-muted w-full grow h-[500px]"></div> </div> <div id="section_2_1_2"> <h3 class="mb-2 text-base text-mono font-semibold">Sub item 2</h3> <div class="rounded-lg bg-muted w-full grow h-[500px]"></div> </div> <div id="section_2_1_3"> <h3 class="mb-2 text-base text-mono font-semibold">Sub item 3</h3> <div class="rounded-lg bg-muted w-full grow h-[500px]"></div> </div> <div id="section_2_2"> <h3 class="mb-2 text-base text-mono font-semibold">Section 2</h3> <div class="rounded-lg bg-muted w-full grow h-[500px]"></div> </div> <div id="section_2_3_1"> <h3 class="mb-2 text-base text-mono font-semibold">Sub item 4</h3> <div class="rounded-lg bg-muted w-full grow h-[500px]"></div> </div> <div id="section_2_3_2"> <h3 class="mb-2 text-base text-mono font-semibold">Sub item 5</h3> <div class="rounded-lg bg-muted w-full grow h-[500px]"></div> </div> <div id="section_2_3_3"> <h3 class="mb-2 text-base text-mono font-semibold">Sub item 6</h3> <div class="rounded-lg bg-muted w-full grow h-[500px]"></div> </div> <div id="section_2_4"> <h3 class="mb-2 text-base text-mono font-semibold">Section 4</h3> <div class="rounded-lg bg-muted w-full grow h-[500px]"></div> </div> </div> </div>
