docs(sidebar): fix active state rendering error on the server

lib/components/index.ts

@@ -1,7 +1,7 @@
 
 export { default as Layout } from  './layout'
-export { default as ActiveLink } from  './active-link'
-export { default as ActiveCatalog } from  './active-catalog'
+export { default as ActiveLink } from 'lib/components/sidebar/active-link'
+export { default as ActiveCatalog } from 'lib/components/sidebar/active-catalog'
 export { default as Sidebar } from  './sidebar'
 export { default as Playground } from  './playground'
 export { default as ExampleBlock } from  './example-block'

lib/components/sidebar/active-link.tsx

@@ -13,12 +13,13 @@ export interface Props {
 const ActiveLink: React.FC<React.PropsWithChildren<Props>> = React.memo(
   ({ children, index, href }) => {
     const { updateShouldScroll } = useConfigs()
-    const { asPath } = useRouter()
-    const isActive = asPath === href
+    const { pathname } = useRouter()
+    const isActive = pathname === href
     const child = Children.only(children)
-    
+  
     useEffect(() => {
       if (!isActive) return
+      
       updateShouldScroll && updateShouldScroll(index > 16)
     }, [isActive])
 

lib/components/sidebar/side-item.tsx

@@ -1,7 +1,7 @@
 import React, { useState, ReactElement, useCallback } from 'react'
-import ArrowIcon from 'lib/components/icons/arrow'
-import ActiveLink from 'lib/components/active-link'
-import ActiveCatalog from 'lib/components/active-catalog'
+import ActiveLink from './active-link'
+import ArrowIcon from '../icons/arrow'
+import ActiveCatalog from './active-catalog'
 import { useTheme } from 'components'
 
 export type Sides = {