@@ -7,7 +7,7 @@ import { useData, withBase } from 'vitepress';
77import { useTemplateRef , watch } from ' vue'
88import type { NimiqVitepressSidebar , NimiqVitepressThemeConfig , NimiqVitepressThemeNav } from ' ../types'
99import { ref } from ' vue'
10- import { CollapsibleContent , CollapsibleRoot , CollapsibleTrigger } from ' reka-ui'
10+ import { CollapsibleContent , CollapsibleRoot , CollapsibleTrigger , ScrollAreaRoot , ScrollAreaViewport , ScrollAreaScrollbar , ScrollAreaThumb } from ' reka-ui'
1111import { useCurrentModule } from ' ../composables/useCurrentModule'
1212import { isActive } from ' ../lib/route'
1313
@@ -48,18 +48,18 @@ function openAccordionInitialState(items: NimiqVitepressSidebar['items'][number]
4848
4949<template >
5050 <aside z-20 w-full of =" x-hidden y-auto" fixed inset-y-0 left-0 overscroll-contain bg-neutral-100 flex =" ~ col"
51- <div absolute inset-y-0 right-0 ring =" 0.75 neutral-400" aria-hidden />
52- <div f-p-xs flex-1 >
51+ <div absolute inset-y-0 z-3 right-0 ring =" 0.75 neutral-400" aria-hidden var:outline-color:neutral-400 />
52+ <div f-p-xs pb-0 display = " ~ col "
5353 <Logo />
5454 <CommandMenu f-mt-sm />
5555 <span id =" sidebar-aria-label" sr-only >
5656 Sidebar Navigation
5757 </span >
5858
59- <DefineNavItem v-slot =" { item: { text, subpath, defaultPageLink, icon, description }, component }"
60- <component :is =" component" :href =" withBase(defaultPageLink)" f-text-xs py-6 pl-12 pr-16 rounded-6 w-full hocus:bg-neutral-300 transition-colors :class =" { 'font-bold text-blue bg-blue-400': isActive(page.relativePath, subpath), ' grid-cols-[max-content_1fr]':!!icon }" grid =" ~ rows-2 gap-x-12 items-center"
59+ <DefineNavItem v-slot =" { item: { text, defaultPageLink, icon, description }, component }"
60+ <component :is =" component" :href =" withBase(defaultPageLink)" f-text-xs py-6 pl-12 pr-16 rounded-6 w-full hocus:bg-neutral-300 transition-colors :class =" { 'grid-cols-[max-content_1fr]':!!icon }" grid =" ~ rows-2 gap-x-12 items-center"
6161 <div :class =" icon" block size-28 row-span-full v-if =" icon"
62- <span flex-1 text-left >{{ text }}</span >
62+ <p flex-1 text-left >{{ text }}</p >
6363 <p v-if =" description" text =" left f-xs" text-neutral-800 >{{ description }}</p >
6464 </component >
6565 </DefineNavItem >
@@ -84,38 +84,44 @@ function openAccordionInitialState(items: NimiqVitepressSidebar['items'][number]
8484 <span flex-1 >{{ text }}</span >
8585 </a >
8686 </DefineSidebarItem >
87-
88- <nav v-bind =" $attrs" of-y-auto ref =" nav" f-mt-sm >
89- <div i-nimiq:fire />
90- <ul >
91- <li v-for =" item in currentDocModule.sidebar" :key =" item.label" f-pb-xs >
92- <template v-if =" item .items ?.length " >
93- <span nq-label text-11 text-neutral-700 v-if =" item.label"
94- {{ item.label }}
95- </span >
96- <div v-for =" subitem in item.items" :key =" subitem.text"
97- <CollapsibleRoot v-if =" subitem.items?.length" v-slot =" { open }" :default-open =" openAccordionInitialState(subitem.items)"
98- <CollapsibleTrigger class =" sidebar-item" group pr-12 pl-8 bg-transparent >
99- <div :class =" subitem.icon" f-text-sm v-if =" subitem.icon" text-neutral op =" 70 group-hocus:100" mr-8 />
100- <div :class =" subitem.text" op =" 80 group-hocus:100" transition-opacity />
101- <span flex-1 text-left >{{ subitem.text }}</span >
102- <div i-nimiq:chevron-down aria-hidden text =" 9 neutral-700 group-hocus:neutral-800"
103- transition =" [color,transform]" :class =" { 'rotate--90': !open }"
104- </CollapsibleTrigger >
105- <CollapsibleContent of-hidden data-open:animate-slide-down data-closed:animate-slide-up relative >
106- <div absolute inset-y-0 left-12 w-2 bg-neutral-400 z-1 rounded-full />
107- <SidebarItem v-for =" subsubitem in subitem.items" px-24 :key =" subsubitem.text" :item =" subsubitem"
108- </CollapsibleContent >
109- </CollapsibleRoot >
110- <SidebarItem v-else :item =" subitem" px-8 />
111- </div >
112- </template >
113- </li >
114- </ul >
115- </nav >
11687 </div >
11788
118- <div border =" t neutral-400" flex =" ~ items-center" f-px-sm >
89+ <hr w-full h-1.5 bg-neutral-200 f-mt-xs >
90+
91+ <ScrollAreaRoot relative of-hidden bg-neutral-100 var:scrollbar-size:10px as =" nav" flex-1 f-px-xs ref =" nav" v-bind =" $attrs"
92+ <div absolute top-0 z-2 w-full h-24 bg-gradient =" to-t from-transparent to-neutral-100"
93+ <ScrollAreaViewport size-full f-pt-xs as =" ul"
94+ <li v-for =" item in currentDocModule.sidebar" :key =" item.label" f-pb-xs >
95+ <template v-if =" item .items ?.length " >
96+ <span nq-label text-11 text-neutral-700 v-if =" item.label"
97+ {{ item.label }}
98+ </span >
99+ <div v-for =" subitem in item.items" :key =" subitem.text"
100+ <CollapsibleRoot v-if =" subitem.items?.length" v-slot =" { open }" :default-open =" openAccordionInitialState(subitem.items)"
101+ <CollapsibleTrigger class =" sidebar-item" group pr-12 pl-8 bg-transparent >
102+ <div :class =" subitem.icon" f-text-sm v-if =" subitem.icon" text-neutral op =" 70 group-hocus:100" mr-8 />
103+ <div :class =" subitem.text" op =" 80 group-hocus:100" transition-opacity />
104+ <span flex-1 text-left >{{ subitem.text }}</span >
105+ <div i-nimiq:chevron-down aria-hidden text =" 9 neutral-700 group-hocus:neutral-800"
106+ transition =" [color,transform]" :class =" { 'rotate--90': !open }"
107+ </CollapsibleTrigger >
108+ <CollapsibleContent of-hidden data-open:animate-slide-down data-closed:animate-slide-up relative >
109+ <div absolute inset-y-0 left-12 w-2 bg-neutral-400 z-1 rounded-full />
110+ <SidebarItem v-for =" subsubitem in subitem.items" px-24 :key =" subsubitem.text" :item =" subsubitem"
111+ </CollapsibleContent >
112+ </CollapsibleRoot >
113+ <SidebarItem v-else :item =" subitem" px-8 />
114+ </div >
115+ </template >
116+ </li >
117+ </ScrollAreaViewport >
118+ <ScrollAreaScrollbar inset-y-0 flex =" ~" select-none touch-none p-2 z-20 bg =" neutral-300" w-10 orientation =" vertical"
119+ <ScrollAreaThumb flex-1 bg-neutral-500 rounded-5 relative content-empty before =" absolute top--50% left--50% -translate-x--50% -translate-y--50% size-full min-h-40 min-w-40"
120+ </ScrollAreaScrollbar >
121+ <div absolute bottom-0 z-2 w-full h-24 bg-gradient =" to-b from-transparent to-neutral-100"
122+ </ScrollAreaRoot >
123+
124+ <div border =" t neutral-400" flex =" ~ items-center" f-px-sm sticky bottom-0 >
119125 <nav >
120126 <ul flex =" ~ gap-4" f-py-xs >
121127 <li v-for =" ({ icon, link }) in theme.links" :key =" link"
0 commit comments