<script setup>
import { nextTick, onMounted, watch } from 'vue'

const route = useRoute()
const { docsLinks, actions, dataDisplay, dataInput, feedback, layout, navigation, mockup } = useNav()

const drawerState = createDrawerState('docs')
const sidebarRef = ref(null)

function scrollToActiveLink() {
  nextTick(() => {
    setTimeout(() => {
      const el = sidebarRef.value?.$el || sidebarRef.value
      const activeLink = el?.querySelector('.menu-active')
      if (activeLink) {
        activeLink.scrollIntoView({ block: 'center', behavior: 'smooth' })
      }
    }, 100)
  })
}

watch(
  () => route.path,
  () => {
    drawerState.isDrawerOpen = false
    scrollToActiveLink()
  },
)

onMounted(() => {
  scrollToActiveLink()
})
</script>

<template>
  <div class="relative pt-4 menu w-80 bg-base-100 text-base-content min-h-full">
    <NuxtLink to="/" class="fixed">
      <Logo class="ml-8 text-4xl text-base-content" />
    </NuxtLink>

    <Flex ref="sidebarRef" col class="pb-12 pl-2 mt-12 overflow-y-auto">
      <SidebarMenuSection :links="docsLinks" no-divider class="pt-4" />
      <SidebarMenuSection
        title="Actions"
        title-icon="mdi:cursor-default-click"
        title-icon-classes="text-fuchsia-600 w-5 h-5"
        :links="actions"
      />
      <SidebarMenuSection
        title="Data Display"
        title-icon="ph:app-window-bold"
        title-icon-classes="text-teal-600 w-5 h-5"
        :links="dataDisplay"
      />
      <SidebarMenuSection
        title="Navigation"
        title-icon="mdi:link-variant"
        title-icon-classes="text-cyan-600 w-5 h-5"
        :links="navigation"
      />
      <SidebarMenuSection
        title="Feedback"
        title-icon="ph:chat-centered-dots"
        title-icon-classes="text-orange-600 w-5 h-5"
        :links="feedback"
      />
      <SidebarMenuSection
        title="Data Input"
        title-icon="material-symbols:edit-square-outline"
        title-icon-classes="text-red-600 w-5 h-5"
        :links="dataInput"
      />
      <SidebarMenuSection
        title="Layout"
        title-icon="ic:round-grid-view"
        title-icon-classes="text-blue-600 w-5 h-5"
        :links="layout"
      />
      <SidebarMenuSection
        title="Mockup"
        title-icon="icon-park-outline:iphone"
        title-icon-classes="text-lime-600 w-5 h-5"
        :links="mockup"
      />
    </Flex>
  </div>
</template>
